Page List widget configuration not working on Save - javascript:void on click

 If you are trying to add / edit the "Pages" widget on your Blogger blog's layout you may have noticed that it isn't working lately. 

Spoiler Content Box for Posts in Blogger Blogs

It is difficult to warn users about possible spoilers in an article, if you are a blogger who blogs about TV shows, movies or books which are some common subjects of spoilers for its audience. Today you will learn how to implement a simple technique to handle spoiler contents on your blog posts.

Before you proceed any further you want to make sure that this is what you want to have as a feature on your blog, so try this live demo here



The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.

Spoiler: This is easy to add to your blog!! See this.

It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting

1. Almost no work to do when adding these Spoiler box in your blog posts. 
2. Works on Blogger, WordPress, basically it is all HTML and CSS, thus works perfectly fine on any kind of website. The tutorial is meant for Blogger though. 
3. Your readers use mobile devices to read your blog? No problem, we got you covered, they just need to tap the boxes to show the hidden content
4. Different colors! Match it with your blog's color scheme. 

Let's Begin The Tutorial

You are here, it means you have made up your mind and would like to continue adding it to your blogger blog (or probably other sites like WP). Before we begin these are some steps you should follow:

• Backup your Blogger Template - In case anything goes wrong you can restore it to the way it was. 
• Open a plain text editor in your computer (Notepad or TextEdit, if you have a code editor then it is a plus but that's optional!)
• Coffee or tea? You choose :)

This tutorial is split into two parts, adding the CSS and then setting up the HTML, these are the only two things that you have to go through and we will give you a small hints about what's going on with each part so you don't feel lost. 

Adding the CSS

CSS is the language used on the web to style things on a website, it plays a major role in our spoiler content box, as it is the back-bone of how our spoiler content show/hide box is going to work.

Following is the CSS code we are going to use, this is the whole code, and is less than 2 kilobytes in size, that means no performance impact on your blog at all :

/*************************************
Spoiler Content Box 
 # By Deepak Kamat
 # stramaxon.com
 # depy45631@gmail.com

Get it for your blog at:
http://goo.gl/ZiJj3J
*************************************/
.spoiler {
  position: relative;
  border: 2px dotted rgba(0,0,0,0.1);
  padding: 10px;
  background-color: #ffe496;
  margin: 10px 0;
}

.spoiler {
  color: #ffe496; 
  color: transparent;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}

.spoiler:hover ,
.spoiler:active ,
.spoiler:focus  {
  color: inherit;
}

.spoiler::after {
  content: "{Click or hover to see spoiler}";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffe496;
  text-align: center;
  font-size: 0.8em;
  padding: 10px;
  color: rgba(0,0,0,0.6);
  font-weight: 600;
  opacity: 1;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}

.spoiler:hover::after,
.spoiler:active::after,
.spoiler:focus::after{
  opacity: 0;
}

/* Colors */
.spoiler.green { background-color: #c8fbb8;}
.spoiler.green::after { background-color: #c8fbb8;}
.spoiler.blue { background-color: #bfe1ff;}
.spoiler.blue::after { background-color: #bfe1ff;}
.spoiler.red { background-color: #ffbfbf;}
.spoiler.red::after { background-color: #ffbfbf;}
.spoiler.purple { background-color: #e4bfff;}
.spoiler.purple::after { background-color: #e4bfff;}
.spoiler.black { background-color: #222; color: #fff;}
.spoiler.black::after { background-color: #222; color: #fff;}
.spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); }
.spoiler.white::after { background-color: #fff; color: #222; }

Looks like a large piece of code? That's a very small snippet in comparison to what other plugins for these kinds of features takes.

Now follow these steps:

• Copy the entire CSS snippet above and place it in a Notepad/TextEdit application
• See how to add CSS to your Blogger Blog or,
• Go to your Blogger Dashboard - Template - Customize - Advanced - Add CSS 
• And paste the CSS in the text box on the right hand side, now click on the "Apply to blog" button

Once you have the CSS code in place you can proceed to the next section to learn how to make use of the CSS we added in a blog post. 

The HTML 

We have to tell the browser "Hey web browser, this is a spoiler box, please hide its text content!", unfortunately we can't tell it in English, so we use HTML, that's the markup language, if you have been working on Blogs for long you might have come across it many times, because it's what makes everything on the web!

Without further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:

<div class="spoiler">
The quick brown fox jumps over the lazy dog.
</div>

This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!

Using the HTML

Follow these steps properly to learn how to add it to a blog post, you just have to carefully understand the process once and afterwards you would be able to easily modify the code as you like and add it to your posts.

• Open a post or a draft in your blogger dashboard
• On the top left corner of the post editor, you will see two buttons "Compose | HTML", click on the HTML button OR 
• You could skip the above step by enabling "Interpret typed HTML" in the options in your post editor, on the right sidebar under Post Settings, click on Options and then choose "Interpret typed HTML"
• Paste the HTML in the post where you want it to appear. That's it, if you pasted the code in "HTML" mode, switch back to "Compose" and you will see the text in post editor with no styles, don't worry, when you load the post on your blog the spoiler content styles will be applied automatically.

Applying different colors

If you like you can apply different colors to the spoiler box, there are 7 color styles, namely

yellow (default) | green | blue | red | purple | black | white

You can easily change the color of a spoiler content box by adding the name in the  class="spoiler" part. How? See the example below:

Default color:

<div class="spoiler">
...
</div>

Blue:

<div class="spoiler blue">
...
</div>

Green:

<div class="spoiler green">
...
</div>

And so on. You just have to add the supported colors name next to spoiler in the class attribute. If you know how to code CSS.

If you want to add new colors please let us know in the comments on this post and we will be happy to consider it if it is a good fit.

Generate Spoiler Content Box Code

Don't want to write the code each time you proceed to add it in your post? Use this generator to enter your desired content and get the code right away, works on mobile phones as well!



A small tool to make your life easier :)

What else?

A similar functionality that you might want to take a look at which also can be used for spoiler content show/hide effect: Expandable Section in your Post on Blogger

Stuck with something and don't know how to proceed? Please leave us a comment on this post and we will get back to you as soon as possible. Or found a bug in the generator? Send me an email at depy45631@gmail.com

Like what I am doing and want me to make something similar but more customized for your blog/website? I am a web developer and you can hire me.

Background Images for Widgets in Blogger

In terms of customization the options that Blogger provides might be limited but with custom styles and codes you can do almost anything to the looks of your blog. With this tutorial you will learn how you can set background images to the widgets in the sidebar or anywhere.

Upgrade your blog's look by setting custom images (your choice!) as the background on widgets on your blog. We will guide you through setting background images on widgets on your blog, either on sidebar & footer or just the sidebar.

Before you make changes to the template I recommend you to take a backup of your blog template.

Set Background Image On All Widgets

If you want a image background on all of the widgets on your blog then follow the instructions below, the other section deals with adding a background image to particular widget(s) which goes a bit into technical stuffs.

First Get An Image

Before anything else we need an image somewhere on the web that you can use as  the background. Simplest way is to upload an image in a draft post on Blogger, then right click on it to get its direct URL.

For example I have this image:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg

Make sure your image wide enough to cover the width of the image, as for the height you may also keep it in accordance with height of the widgets but it is not in this case useful as some widgets might stretch more vertical which may require the image to be stretched too, but instead of stretching we can just tile it downward to fill in the blank area.

The CSS Snippet

To get the image applied as background we would use this small snippet that sets the image on every widget (including the widgets in footer, you can omit the line specified if you don't want it on footer)

.sidebar .widget .widget-content
,foooter .widget .widget-content {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg');
    background-repeat: no-repeat repeat;
    background-position: top center;
    background-size: cover;
}

Replace Image URL:
The third line is basically the one you have to change. Currently the image pointed in the code is what I have set it, but for your images you have to enter your image's URL in the snippet.

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg');

The highlighted area in the code is the URL of the background image, when you copy the code replace the highlighted area with your own image's URL and then apply the whole CSS code to your blog.

Don't Apply To Footer Widgets:
In case you intend to only apply the background image to sidebar widgets then omit the following piece of highlighted code from the snippet:

,foooter .widget .widget-content {

Do not remove the "{", only the highlighted area is supposed to be removed.

Now Apply The CSS

Here is a quick tutorial on adding CSS code to your Blogger blog with easy demo steps

Decorative Backgrounds for Holidays

Christmas and New Year's Eve is near, everything on the web has almost blended into the festive look so why not your blog? Use the steps provided above with these pre-made images that will give your blog an impressive look. Just right-click, copy the image URL and use it with the code in the previous section.

Moreover you can always select your own decorative background image from around the web or look at some very creative designs on Creative Market that you might find useful.

So have a great Christmas and happy new year! See you in 2016. 

Auto Hide Notification Box in Blogger

Notification boxes in blogs can be useful for notifying readers about something hot on your blog. But this notification box is a bit different from others, it hides automatically after a specified time.
You may find lots of tutorials about these types of notification boxes but this one is different. It hides itself after a specified time which is the best thing about this. It won't remain there on the page forever (which can possibly disturb the reader not interested in notifications).

Before we proceed to the tutorial check what you are going to add to your blog. 

Demo

Proceed to the tutorial to know how to add it to your blog.

The HTML

The first thing we need is the HTML code as always. The code is simple and you can edit its content easily to make it ready for your blog. This is the HTML snippet

<div id='float-bar' style='display:none;'>
<b class='notifyTextbld'>Notification:</b>
Hello! Welcome to our blog and blah blah blah. See this new post <a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>
</div>

The box contains bold text "Notification" and below it is some message you want your readers to see. You may also include an anchor link to a post or website you want the readers to visit.

Edit the HTML

You will need to edit the text (on line number 3) to display your own message. You know how to do it, just replace the sample text with your own meaningful message. It also contains an anchor link :

<a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>

If you want your readers to visit a page then you can add your own HTML anchor links or any element, you can even add images inside it.

If you are not familiar with HTML but want to add different HTML elements use the Blogger post editor to set the elements in a graphical user interface, switch to the HTML tab, copy the HTML and paste it in the third line of the HTML.

Add the HTML

To add this HTML you have to edit your template HTML so it's good to backup your current template.

We can add this HTML anywhere in the template (inside body element) but to make sure it doesn't interfere with any other element in the template it is best to add it below everything. Follow this steps to do that :

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Press the Edit HTML button, ignore the warning and proceed. 
4. Now open the in-page search function in your browser (default CTRL+F)
5. And search for </body> 
6. When you find it, paste the HTML code just above it and save the template. 

Once done, check your blog for the HTML (it might be at the bottom), it may look dull, to make it beautiful we will need the CSS. So proceed to the next step.

The CSS

Yeah, this is what gives life to dead HTML skeleton.  The following CSS will be used to style the notification box.

#float-bar {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color:rgba(248, 248, 248, 0.85);
color:#000;
padding:10px 30px 30px 30px;
font-size:16px;
position:fixed;
right:10px;
top:0px;
width:500px;
border-radius:0px 0px 10px 10px;
z-index:99999;
}

#float-bar a {color:#000;}
#float-bar a:hover {color:#000;text-decoration:none;}

#float-bar .notifyTextbld {display:block;margin-bottom:20px;}

Editing the CSS

You might want to modify the codes. Edit the values in the highlighted lines.

• Line 3: This the background color of the box. Replace the value with a rgba color value (with alpha transparency) or HEX color code. 
• Line 4: This is the color of the text inside the notification box. Use HTML Color Picker to choose a HEX color code  
• Line 6: This is the size of font inside the notification box. Change the 16px to a desired value.
• Line 8: You can edit both the property name and its value. Change right to left if you want the notification bar to appear on the left side. And also you can change the 10px to a some other value, this decides how far the box should be from the position. 
• Line 9: The number of pixels you can the box to be far from the top. 
• Line 10: This is the width of the box. Change the pixel value if you want.

If you know about CSS (it's easy) you may try adding for removing properties to design your own different box.

Adding the CSS

Check this tutorial to learn how to add CSS in Blogger
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

The JavaScript jQuery 

The final step is to add the JavaScript jQuery script. The script controls how the box should enter and exit. We can do a lot of things with it but for now we will just do the basic in and out stuff.

Including jQuery Library

If you already have jQuery library installed then skip this step. If not then copy the HTML line below :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

To add this in your template : Go to your Blogger Dashboard -> Template -> Edit HTML -> Search for </head> and paste the code just above </head> and save the template.

Now you may proceed to the next step.

The jQuery Script

This is the script you need.

<script type='text/javascript'>
$(document).ready(function(){
$('#float-bar').slideToggle(445,function(){
$(this).show(function(){
setTimeout(function (){
$('#float-bar').slideUp(445);
},5000);
});
});
});
</script>

You don't need to change anything in this script expect the number of seconds you want the notification bar to stay on the page.

The line number 7 contains a number value 5000 which is the number of milisecond after which the box will disappear. 1000ms = 1sec, so just change the value to set a different time for it to hide. If you want the box to stay on the page for 20 seconds you may change the value to 20000

Adding the Script

The procedure to add the script is same as adding the HTML in the body. To add it go to your Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </body> in the template and then paste the jQuery code just above </body>.

Showing it just on Homepage

You might not want this notification bar everywhere so the question how do you set it to just display on homepage, post pages, or an index page and archive pages.

The best way to do this is to use Blogger conditional tag (which works on the backend) which will make the box render only on the page type you specify.

The code we will need is this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
//The HTML/JS/CSS or any code you want.
</b:if>

Replace the 2nd line in this code with the HTML code of the notification box and then add it to your template as instructed in in the tutorial. All we did is added the <b:if> conditional tag around the HTML code provided in the tutorial.

Now check your blog for the new notification bar. How is it ? I hope you liked it but if you found any error in the code then do post it in the comments. Thanks.

What Happened to GFC Follower Gadget Blogger ?

If you recently made changes to your blog and removed your good-old Google Friend Connect follower widget, you might be having problem adding it back, but what really happened to it ?
After the launch of Google+ many Google services including blogger changed to adapt G+ integration and most of the changes were great, new G+ profiles were launched to replace Blogger profiles. But recently blogger added a new Google+ Follower Gadget which is to replace the GFC Follower gadget, as the social networking site by Google is trending a follower gadget by G+ can help you get lots of followers, as it is easier to follow a blog as compared to GFC but yet there are many fans of the old but gold GFC widget who want it.

Some months back GFC was retired for non-blogger sites and the GFC seems missing from blogger gadget list, looks like the G+ Follower gadget took it place but that's not the truth. You can use both G+ and GFC follower widget altogether in your blog, the Follower gadget haven't been removed it's still in the gadget list but in a different section.

Add Old GFC Follower gadget again ?

To add the old follower gadget again go to your Blogger Dashboard -> Layout -> Add a Gadget -> On the gadget list click 'Add More Gadget' on the left side. You will now find the GFC Follower gadget there, click on it's link and add it to your blog. Check the image below for reference

Add a Paypal donate button in Blogspot blog 2012

Paypal has now become the biggest way of receiving and sending money online, Paypal provides a wide variety of tools to help you earn more and one is the donation button, you will get to know how to easily add a Paypal donate gadget in Blogger.
If you are running a non profit organization or just a blog then you might want to add a donation button to increase your income and get donations from people without messaging each and every single person. Paypal donation buttons can be very helpful as i said that you can just put up it on your blog and website and any person that likes your blog or work can donate you for your work to keep on.
Demo : You can see on the right sidebar.
The reason i have put 2012 in the title is that there are many tutorials online about adding a Paypal button but they don't work now and many people don't get a proper answer about adding the feature on their blog or website.

Adding the donation feature

The adding process is as easy as copying and pasting, no need of any coding language. Please follow and read each and every step carefully to avoid any misunderstanding.

Setting up your Paypal

Note : If you haven't yet signed up for Paypal then do it here http://paypal.com
We were having difficulties receiving Payments in Personal Paypal account, so you have to make your Paypal account Premier in order to receive donations. Upgrading your account to Premier is absolutely free.
Login to your Paypal account -> On your account dashboard you will see the account type you have, if Personal is mention there, click on it and upgrade to Premier. That's it.

Generate the donation button

In many old tutorials you may have seen that you need to log into your account to get to a page where you can create the buttons, but Paypal interface and system has changed since the way to get a button is also different.
Paypal provides a free tool with which you can create a button, you just need to enter your details, that's not more than your Paypal email id and the organization name you want your donation received as.
Note : I suggest you to log out from Paypal while creating the button.

1. Go to this page and click on 'Create button' link https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside
2. Now when you are on the page with Paypal button creating tool you will see a drop down menu with different options (button type) choose Donations from the drop down.
3. Put your organization name and donation id (it's optional)
4. If you want a more customized button then you can use the customization options, you can put your own image instead of the normal donate button (optional)
5. Choose the currency. If you want a fixed amount to get donated from the donors then you can choose the 'Donors contribute a fixed amount.' and enter the amount.
6. The last and the most important step is to enter the email id for your Paypal
7. Skip Step 2 and 3 there and click on 'Create Button' and you will get the HTML code for your donate button. Copy that code.

Next is to add the code for Paypal donate button into your blog's sidebar.

Add the code in your blog

We are going to simply add the code into the blog by an HTML/JavaScript gadget. To do that go to your Blogger Dashboard -> Layout -> Add a gadget -> Select HTML/JavaScript from the list -> Title the gadget and in contents paste the HTML code you got from the Paypal donation button generator.
Save the gadget and that's it.
Tip : You can add the donation button HTML anywhere applicable, for example inside the posts.
Tip : If you want to add the gadget below your posts then this tutorial[click to open] will help you.

Yeah ! That's it

Wasn't it so simple ? Adding a Paypal donation button could be so easy with a latest tutorial. I will be publishing another tutorial on custom Paypal donate button, subscribe to our feed to get the updates.

Drop your awesome comments to give us a feedback of this post/tutorial, we will be glad to hear from you.

Support your country for London 2012 Olympic by your Blog

London 2012 Olympic is obviously trending up on the web and that's the magic of the Olympic games. As a blogger don't you feel like supporting your country by putting up a badge on your website or blog ?

If you are an ultimate lover of the Olympics and support you country to perform well in the games then you can do more to support them, if you are crazy about the London Olympics 2012 then you can run waving your country's flag  but that's just too tiring so if you are on Blogger and want to show love to the sports person of your country then why not put a badge in your blog ?

Badge for your blog

Adding the badge is easy, the badge is a logo of your country and it will link to anything you want, can be a blog post you made to support your country in the London 2012. We actually need just two things, HTML and CSS

Here is a demo for the badge

Demo

The HTML

The first step is to the add the HTML in your blogger template. This is the HTML we will use for the badge

<a class='sprt-country' href='#' target='_blank'>
<h4 class='hsupport'>I Support</h4>
<img src='http://www.printableworldflags.com/icon-flags/48/India.png' title='I am supporting my country for the Olympics'/>
<h4 class='hsupport2'>For the London 2012</h4>
</a>   

You need to make changes on couple of things in this HTML, main change is the flag image url in the <img> tag.

1. Line 1 : If you posted something related to the Olympics games on your blog or just a blog post to support you country then you can put the link in href='' just replace the hash (#) with your blog post URL
2. The <h4> tags contains some text, by default i have put it 'I support' for the first h4 and for the last it is 'For the london 2012', you can change it if you want it in your own language or just want to put your own words. 
3. Line 3 : This is the most important one, as it's your country's logo that will appear in the badge. To change the picture URL, go to this link, find your country name and click on it. You will be taken to a page with different sizes for your country flag picture. Choose the 48*48 and copy the image url by right clicking on it and replace the link in src='' in the line 3 which is an <img> tag 

You have to place your HTML in the template. Go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Find </body> tag in your template and paste the HTML just above/before the </body> tag, that's it. Save the template.

CSS for the badge

To make the badge beautiful and attracting we will use CSS. Here is the style codes for the badge.

.sprt-country {
    position: fixed;
    top: -10px;
    text-decoration:none;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.87);
    text-align: center;
    padding: 12px;
    border: 2px solid #888888;
    width: 100px;
    border-radius: 0px 0px 20px 20px;
    font-family:'georgia';
    color:grey !important;
    text-shadow:1px 1px 1px white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.sprt-country:hover {
    background-color: white;
    text-decoration:none;
    color:black !important;
}

You can add the CSS in via the template designer to do that go to the Blogger Dashboard -> Template -> Click on the Customize button -> Advanced -> Add CSS -> Now paste the CSS in the custom CSS box and hit Apply to Blog. [Click here to know how to add CSS]

Once the CSS is applied on your template you can see the badge in action on the top right corner of your blog. Now your readers will see you as a true lover of your country. 

Liked this tutorial

Did you find this badge useful and a good way to let your readers know about how you support your country in the London 2012 ? Then please share about this post. Drop your valuable comments below and enjoy discussing this post.

Static update/notice message with hover effect for Blogger

Have you ever been away for your vacations and you can't update on your blog ? Don't you feel your readers would wonder why aren't you posting anymore, maybe they will even leave you blog because your blog is inactive. In this post i will be telling you how to add static message box on your blog.
It's very useful to keep your readers updated about your current status and that keeps them from assuming that your blog is inactive. I found it very useful when i changed my domain thus it was important to inform my readers about the domain change and it helped them understand the cause of redirection on my blog.

Demo

If you want some message that appears on all pages of your blog then try this tutorial, i am sure you will love this to inform your readers about anything. This plugin connects you more to your readers and give them importance, now follow the steps below to add it.

1. Add the HTML in your template

The first step is to add the HTML. We have used anchor HTML tag for the message box, it's because if you want the message to go on a link you can put the link in href value, you can write a blog post for more information related to the message.

The HTML code is as follows

<a class="stx-update" href="" target="_blank" title="A message">Thanks for visiting our blog you can join us by subscribing</a>

Changes you can make

1. Fill the href attribute's value with a link if you want your visitors to go on a link by clicking it. For example href="http://stramaxon.com/p/update.html" 
2. Change the value inside title attribute, the text inside the title value will appear when you will hover it. For example mouse over this text and see the box appear with the text in it's title attribute.
3. The main change you need to make is the text between <a> and </a>, it will appear to your visitors.

Once you have made the necessary changes to the HTML you can now continue adding it into your blogger blog. Check the next step to know how to easily add it.

Placing the HTML in your template

You need to add the HTML code in your template by following these steps : (backup your template beforehand)

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Then open Edit HTML and Proceed
4. Use CTRL+F to find </body> in the template and place the html code above </body>
5. Save the template

That's it ! Once the HTML is appearing in the blog, you are now ready to style it using CSS

The CSS design

CSS is what gives the basic anchor HTML an awesome look and feel. Check the CSS code below and learn what you can change in the CSS

.stx-update {
text-decoration: none !important;
position: fixed;
right:0px;
left:0px;
top: 0px;
display: block;
background-color: #49A2E7 !important;
text-align: center !important;
padding: 20px !important;
z-index: 9999 !important;
color: white !important;
font-size: 17px;
font-family: 'verdana' !important;
border-bottom: 8px solid rgba(255, 255, 255, 0.69);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
opacity: 0.8;
overflow: hidden;
}

.stx-update:hover {
opacity: 1.0;
}

You can make changes to the CSS, only make changes if you know what you are doing.

• Line 8 : Change the box color to your favorite or the color that looks good with your blog. Here's a list of basic CSS colors but you can also see the shades of those colors - CSS colors list
• Line 12 : This is the for the color of text into the message, check the link above for CSS color list.
• In fact you can modify anything in the CSS as per your needs, so enjoy, if you want any specific design message box you can contact me on depy45631@gmail.com

Now when you are done with modifying the CSS, read further to know how to add it to your blogspot blog.

Adding the CSS to blogger

You now have to add the CSS code in your template. To do that follow the steps below or just check this tutorial to know how to add CSS to template. 

1. Go to Blogger Dashboard
2. Locate the Template tab
3. You will see Customize button there, click it
4. You will be in the Template designer
5. Click on Advanced tab on the left pane
6. From the Advance tab, click on the Add CSS
7. And paste the CSS in custom CSS text area, preview it. If it seems to be correct and working then Apply to Blog.

Great ! If you did everything correct then you will see the new message box on top of your blog page.

Your Feedback and Suggestion

The design of this box was made simple but interactive, but if you think there's something that needs to improved then feel free to comment on our blog and also subscribe to our email feed updates. 

Hover effect Heat meter design Popular post widget on Blogger

Any Blogger blog can be easily customized but did you know that we can also customize the existing gadgets   ? It becomes very easy to design gadgets on a blog with CSS and i love doing it. In this tutorial you will learn about adding heat meter style for popular post gadget.
In this tutorial you don't have to add any external HTML into a gadget. We will be applying CSS style on the default popular post widget in Blogger to give it a heat meter style with hover effect. Follow the steps below to continue to the tutorial.

Demo preview

1. Configure the Popular post widget

Before we put styles onto it, we have to configure the popular post widget for the style to be compatible with it. To do that that go to your Blogger Dashboard -> Layout -> Edit/Add Popular Post gadget -> And configure it like this

Leave the image thumbnail and snippet check mark unchecked, and set to display 5

2. The CSS

CSS for this effect is very long. You don't need to edit or customize the CSS, it looks the best in what it is.
But if you know what to do then you can try your hands on this. But before that follow the instruction and add this CSS to your template.

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Copy the CSS into your notepad or any word processing program.
Note : This is a scroll box so make sure to copy the whole code.

3. Adding the CSS

Now it's time to add the CSS to your blogger template.
Add from Template Designer : The easiest way is to add from the Template designer. To do that go to your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the copied CSS in custom CSS box and preview, if it's okat then hit Apply to Blog.

Or add directly to Template : For a long CSS i recommend you adding the CSS directly to the Template. And to do that Go your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Now use CTRL+F to find ]]></b:skin> and paste the copied CSS just above this tag. Preview the template and Save.

That's it ! Now see your Popular post gadget design, isn't it amazing ?

You tried but nothing happened ? Don't worry i am here to assist you, just provide your blog address in the comments and i will tell you what to do. Also comment if you loved this post and want to say thanks.

Add Syntax Highlighter into Blogger to display codes

Syntax Highlighter is a widely used code highlighter on websites and blogs, almost every web developer, web designers or any people who want display codes on their pages. In this tutorial you will learn how to add it on your blog on blogger.

Use the PrismJS,a simple and lightweight opensource syntax highlighting plugin
Syntax Highlighter is a tool by Alex Gorbatchev and thanks to him for developing such useful tool. In order to the add the Syntax highlighter scripts and make it work on your blog follow the steps.

Add the scripts 

The script files i will be giving links to in the script tag is hosted on the developer's server, if you want to download it to host on your own server then click here to download Syntax Highlighter files.

<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->

Looks very heavy but all you have to with is to add it into your Template.

Add it to your blog's Template

And to do that Go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </body> in the template and paste the codes above </body>


Tip : The codes can differ in your page loading time, if you don't display codes on your homepage then use this script, which is same to above scripts but only added blogger conditional tag around it to load it only on post pages.

<b:if cond='data:blog.pageType == "item"'>
<!-- SyntaxHighlighter starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
 
</script>
<!-- SyntaxHighlighter ends -->
</b:if>

The adding process is same as the above

Highlighting the codes in posts

Once you have added the code in your template, now you have to make the your code display in the Syntax highlighter and to do that you have to wrap your display codes into <pre> tag with special attributes into it to define what language you are displaying the code in.

Displaying the code if it's HTML

This is an example of how you have to markup the codes if you are display HTML codes.

<pre class='brush:xml'>
// HTML Code here
</pre>

The HTML code is wrapped into <pre> tag and with class='brush:xml' and it's what tells SyntaxHighlighter that it's an HTML code (HTML and XML both looks similar)

Brushes : There are more languages SyntaxHighlighter supports and here's the list of values you can put in the brush value. Following are the brushes you can apply on your codes
as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml

Add it to your post

Let's say you want to display a HTML code, the whole code with the wrapping <pre> tag will be this

<pre class="brush:xml">
<ul class='make-tea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li>
</ul> 
</pre>

To add it open your Post Editor, switch to the HTML mode and paste the your HTML code between the <pre> tags.

Note : If you paste your display HTML raw, it will interpret itself and then it can't be displayed as HTML, to prevent it you must first convert your raw HTML into escaped characters. Use Quick Escape to convert your HTML to escape characters.
Example -
This is the Raw HTML before conversion

<ul class='maketea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li> 
</ul>

This is the converted HTML codes.

<ul class='maketea'>
<li>Tea</li>
<li>Water</li>
<li>Sugar</li>
<li>Milk</li> 
</ul>

Just put the converted Raw HTML code into the <pre> tag and you are ready to paste it into your post, just switch to HTML mode and paste it at the right place.

Customizing the SH skins

You can use different skins and colors for your SyntaxHighlighter, to make changes to the skins you just have to change the  2nd<link> tag in the SyntaxHighlighter scripts HTML. This is the link tag you have currently
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
You can use any of the following styles, just replace the yellow highlighted text with any style below (each style is separated by a comma).
shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault
For examply if you want to use shCoreEmacs skin then the href value in link tag will be this
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEmacs.css' rel='stylesheet' type='text/css'/>
Simple as that.. Now choose whatever skin or theme you want and apply it.

Your feedback

I tried my best to keep this tutorial as easy as possible, but if there's something you can't understand or wrong then you can contact me. If you have successfully implemented SH in your blog using this tutorial then you can thank us by dropping your comments.

Subscribe to our blog for more blogger tricks updates. 

Put videos, photos or any HTML in Tabs in Blogger with Jquery

There have been many question about adding content into easily switchable tabs without any page load, blogger users normally don't find using JQuery and most of them never headed to the Jquery plugin site, the instruction are complicated there and it's not easily understandable. But i will give easy and clear instruction to install this Tabs JQuery plugin on Blogger.

Update 25th March 2017 - Due to some issues in hosting the script files the plugin might not be working properly for everyone who implemented this. I would request you to come back here in a day or two and re-add the script codes with update URLS (you do not have to re-do the tabs you created in your post.)

Before we start this tutorial, thanks to sunsean.com for this JQuery plugin called idTabs, you are going to install that JQuery plugin on your blog.

Every blogger wants to add dynamic function but they are unable to do it, because there are not much people who writes about installing JQuery plugins on Blogger Blogs. If you want to display your post contents in a new way then this plugin is what you need, this plugin is useful for video bloggers having lots of videos in one post , if they use this plugin they can reduce space used for the videos.

If you aren't sure this is what you are looking for then please see the demonstration of the code.

Demo


Believe me this tutorial is very easy but yet some people with less experience with codes will find this tutorial difficult and to make this easy for you, i have divided the steps in parts, read further for the instructions.

Follow these steps

Before you proceed keep a backup of your template so if anything goes wrong you can revert it back to normal.

Include JS files

The first step is to include the JQuery library and the JS file for this plugin into your template. JQuery lib. This is the script tags you need.

To add it go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </head> in the template. Paste the following code just above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script>
<script src='http://cdn.stramaxon.com/stramaxon/ext/idTabs-stramaxon.js' type='text/javascript'/></script>

• Line 1 : This is the script for latest version of minified JQuery library hosted on Google, if you have already included it in your template then don't add it again.
• Line 2 : The second line is for the main plugin JS file which makes the tabs work. The file is being hosted my DropBox, you can host it on your own server, download the JS file here.

The HTML

The HTML is only where you will can confused but if you try to understand the concept of this plugin and how it works then it becomes easy for you to work with this HTML. Anyway, i am going to tell briefly about each element.

Here's the HTML we need

<ul class="idTabs">
<li><a href="#tab1">First</a></li>
<li><a href="#tab2">Second</a></li>
<li><a href="#tab3">Third</a></li>
<li><a href="#tab4">Fourth</a></li>
<li><a href="#tab5">Fifth</a></li>
</ul>

<div id="tab1">
<!-- Content Below this -->
</div>

<div id="tab2">
<!-- Content Below this -->
</div>

<div id="tab3">
<!-- Content Below this -->
</div>

<div id="tab4">
<!-- Content Below this -->
</div>

<div id="tab5">
<!-- Content Below this -->
</div>

• Line 1 : It is the starting tag of the UnorderedList (ul)
• Line 2 : This is the link tab for the content in div element with id='tab1' which is on line 9
• Line 3 : Similar to the description of line 2, this tab link is for the content in div element with id='tab2'. 
• Line 4 : This also do the same thing as the line 2 and line 3 but goes for the div element with id='tab3' 
• Line 9 : From line 9 to line 11 is the first div element which will appear for a tab, you can put any valid HTML into it, just like i put the Video embed code in the Demo
• The other div elements are for their corresponding links, if the <a> element has #tab1 in it's href value then it's the tab for the div element with id='tab1' and that's how it works.

Note : When you are giving an anchor link a href value with a hash like this #target, then it thinks links that to the current page (post editor) with the this #target. For example if i give the href value #mytab then the whole URL becomes
http://www.blogger.com/blogger.g?blogID=6219123568585811984#mytab

And that sometimes stops the plugin from working. To prevent this put the current Post URL before the target tag. Now we have got Custom permalink, so you can see what's the URL even before publishing the post. For example see this

<ul class="idTabs">
<li><a href="#tab1">First</a></li>
</ul>

<div id="tab1">
<!-- Content Below this -->
</div>

Should be turned to

<ul class="idTabs">
<li><a href="http://stramaxon.blogspot.com/2012/07/jquery-tabs-plugin-blogger.html#tab1">First</a></li>
</ul>

<div id="tab1">
<!-- Content Below this -->
</div>

If you turn the URL correctly then your plugin will work well and there will be no bugs.

The Final CSS

If you take a look at your post after adding the CSS, it will look very dull and to give it a professional look we need to apply the CSS on the tabs, we will be applying styles just on tabs. Following is the CSS

.idTabs {padding-left:0px !important;}
.idTabs li {display:inline;padding-left:0px;}
.idTabs li a {
    padding:5px 15px;
    background-color:#2EA537;
    color:white;
    text-decoration:none;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    font-weight:bold;
    border:1px solid transparent;
    border-radius:10px 10px 0px 0px;
}
.idTabs li a:hover {
    padding:5px 15px;
    background-color:#805D5A;
    color:white;
    text-decoration:none;
}
.idTabs li a.selected {
    background-color:#42BEF8;
}
.idTabs li a.selected:hover {
    background-color:#42BEF8;
}

[Click here] To see how to add CSS to your blog.
There's no special instruction for CSS, you apply your own CSS design on the tabs to make it look good with your blog or if you don't have any idea about the editing the CSS then contact me for help at depy45631@gmail.com

Great ! You Did it

Hows the tab switcher looking, i hope you integrated it without any difficulties. If you have question, suggestion or just want to say thanks then your comments are welcomed. We will be publishing more JQuery  plugins for blogger so subscribe to our Email Newsletter.

Add 'Read Previous post' link at bottom of Posts in Blogger

If you have a well structured blog with links to right things at right places then your chances of getting more readers increases and that's what any blogger wants. This tutorial shows you how to add an good looking link to previous post at bottom of every post automatically.
When you are new with all this HTML and CSS thing in blogger then you add a static thank you message at bottom of post one by one in all blog post while writing it, but there's more you can do with the template, you can add your own elements in the template to make your blog look better.
Demo
This is a post you will find helpful if you want to add something at bottom of every post : http://stramaxon.blogspot.com/2012/07/adding-any-thing-under-every-post.html
Coming back to main topic of the post, it's about adding a link to previous post under each and every post automatically. Read further for the codes.

The skeleton HTML

Before you start, Backup your template.
As usual we need the HTML to be in place and then we will add some CSS effect on it. The HTML code is actually just an anchor HTML with bloggers layout data tags to dynamically get the link of previous or older post.

<a class='lst-post' expr:href='data:olderPageUrl' target='blank'>Read our Previous Post</a>

Copy the above HTML to your clipboard by selecting and clicking CTRL+C.

How to add this HTML

We have to place it in the template and to do that follow these steps.

1. Go to your Blogger Dashboard 
2. Select the Template tab (in new interface)
3. Now click on the 'Edit HTML' button on the page
4. Click on 'Proceed' 
5. Then check mark the box which says 'Expand Widget Template' (Important)
6. Use CTRL+F to find <div class='post-footer'> in the template, you may not copy and paste the text from here, type <div class='post-footer'> yourself in the search box which appears after hitting CTRL+F
7. Once you find this line  <div class='post-footer'> paste the HTML provided just above the code.
   
   
8. When you have place the right code at right place then you can Save the Template.

Now check one bottom of your one of post and you will see the link to previous post, but doesn't it look so dull ? It needs to be painted in CSS3 to attract reader's attention.

The CSS

.lst-post
{
    display:block;
    font-family:'verdana' !important;
    cursor:pointer;
    background-color:rgba(10, 74, 133, 0.49);
    margin-bottom:-5px;
    margin-top:16px;
    color:white !important;
    padding:5px 10px;
    -webkit-transition:background-color 0.3s ease-in-out;
    -moz-transition:background-color 0.3s ease-in-out;
    -o-transition:background-color 0.3s ease-in-out;
    -ms-transition:background-color 0.3s ease-in-out;
    box-shadow:0px 0px 4px gainsboro,inset 0px 0px 2px white !important;
    font-size:14px;
    text-shadow:1px 1px 1px grey;
    border-radius:4px;  
}
.lst-post:hover
{
    background-color:rgba(6, 128, 224, 0.49);
    text-decoration:none;
}

The CSS code is lengthy but useful, all you have to do is now to add the CSS in your template to apply the style onto the link.


Now follow these steps to know how to add the CSS into the template

1. Go to your Blogger Dashboard
2. Now select and Template 
3. In the Template tab you will see the customize button
4. You will enter the template designer
5. Click on the Advanced tab > Add CSS 
6. Now paste the CSS in the custom CSS box, Preview it before you save to make sure it's working well.
7. If it's okay, hit the Apply to Blog button refresh your blog with CTRL+F5 and see the link just below any of your post !

That's it ! This feature will keep your visitors engaged with your page and that's a good thing for your SEO and pageviews. Your readers will stay online for more time on your blog.                  

Your suggestions

You can help us make our blog post better by giving your suggestions and informing us about any error in post or the codes. Drop your precious comments which is very important for us. We will love to hear from you.