Add An Animated Tabbed Widget To Blogger

tabbed-widget-blogger
Well, we've seen so many blogs come up with tabbed widgets for blogger. What if we add some simple animations to such widgets using Jquery. Will it not make the widget and blog, more attractive and unique? I feel it should. So, in this article, I'll teach you about adding one such animated widget with ease on blogger. Take a look at the demo using the link below and we'll get started.

ANIMATED TABBED WIDGET FOR BLOGGER - LIVE DEMO

Pretty interesting, isn't it? Well, let's dive into the tutorial straight away. I'll split the article into three parts - HTML, CSS and JavaScript so that you can rather take a break as and when you need, than working out the complete tutorial at a stretch. Well, so follow these steps to get the animated tab working on your blog.

CSS
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Paste the following piece of code just above the line mentioned in step 1. Save your template.
.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
padding: 15px;
background-color:#7F822A;
background-image:url(https://lh6.googleusercontent.com/-T7SeJr4flqU/TlIxAq8lLgI/AAAAAAAABf0/DdEWFuDVGfM/s800/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding: 25px 15px;
background-position: bottom left;
background-repeat: no-repeat;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 10px 0 10px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
list-style-type:none;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}
Possible customizations include changing the list-style for the elements, background color, text color and the spacings. Please note that, I've used an image for the arrow mark. So, if you change the background color, ensure that the image showing arrow mark is also changed to match with that of the background.

HTML
1. Search for the following piece of code in your template.
<b:section class='main' id='main' showaddelement='no'>
2. Paste the following block of code just above the line mentioned in step 1.
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg' style='left: 155px;'/>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
</div>               
<div class='slide_content'>                       
<div class='tabslider' style='margin-left: -600px;'>
<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>
</div>
<br style='clear: both;'/>
</div>
</div>
3. Replace # at every instance with the links you wish to point to. Similarly, replace LINK NAME  at every instance with the name of your links - probably post titles. Don't forget to replace TAB TITLE with the your title for the tabs. Save your template temporarily before we add the final jquery magic.
You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1. But, when you place them elsewhere, you need to adjust the width of the widget correspondingly in the CSS part to fit your layout.

JAVASCRIPT/JQUERY
1. Search for the following piece of code in your template.
</head>
2. Paste the following piece of code in the text document - SCRIPT FOR ANIMATED TABBED WIDGET, just above the line mentioned in step 1.
Note: You need not include the first line in the script mentioned above (the one in the text document), provided you already have the latest jquery file running on your blog.
3. Save your template and check out the animated tab running on your blog.

I've tested the above widget to work fine on all the major browsers which include, but not limited to, IE, FF, Chrome, Opera and Safari. If you need assistance in adding the same, then leave a comment below and get it clarified. Do share your opinions about the article via comments.

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Widgets, jQuery
Manuel Garcia PH said on August 22, 2011 at 7:30 PM :

Nice Post Mukund ! I will use this on my sidebar. as multi tab widget for recent and popular post. etc. what do you think? Does this widget will effect the loading time of my page?

REPLY
Mukund said on August 22, 2011 at 8:36 PM :

@Manuel Garcia PH: Yes! Very good idea! Probably the Jquery file might take a little bit of time to load but definitely not much. So, you can install this on your blog.

REPLY
Aditya Samitinjay said on August 23, 2011 at 12:55 PM :

Page Speed is all that matters to Google and that is holding me back to implement this! Lots of JS...More than 10 seconds to load... Anyway good post!

REPLY
Mukund said on August 23, 2011 at 1:03 PM :

@Aditya Samitinjay: May I know which page tool did you use? The script is defined within the template. So, it should load faster. The widget loads much faster on my demo site. So, ping me on gtalk and I'll help you out with the analysis.

REPLY
TuvanGold said on August 23, 2011 at 2:55 PM :

hi, sorry as this comment isnot related to topic ;> Please help me how to widen the post width, have a look at my blog,i'd like to make to Body wider

REPLY
Mukund said on August 23, 2011 at 4:45 PM :

@TuvanGold: Just change the width specified in your CSS - #content and your done! For further help, write to me via email.

REPLY
Building Supplies said on August 25, 2011 at 12:00 PM :

Very good idea n the explanation is also good. i'll try this out!

REPLY
Mukund said on August 25, 2011 at 12:15 PM :

@Building Supplies: Yup! Thanks for the comment! Let me know how easy was it to install the same:)

REPLY
Haz Issac said on August 25, 2011 at 10:09 PM :

wow! this is so awesome! nice one bro.. i like to try this !

REPLY
Mukund said on August 25, 2011 at 11:30 PM :

@Haz Issac: Yup! Try the widget and let me know, if the tutorial was easy to follow. Anyway, thanks for the comment buddy!

REPLY
Anonymous

i got a Error while saving the template

"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference."

what is wrong.??

REPLY
Mukund said on August 28, 2011 at 11:19 AM :

@Anonymous: Just ping me on gtalk and I'll help you! If you made use of & some where in the codes, then add Amp; next to it.

REPLY
Vivek Nath.R said on December 6, 2011 at 3:03 PM :

How i change the background black color to white??

REPLY
Mukund said on December 25, 2011 at 12:37 AM :

@Vivek Nath.R: Make sure you change the CSS to get the white color going!

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]