Add An Animated Tabbed Widget To Blogger

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 14 Comments

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-u30qJqRpR_FMgxyjvDCq6jcyqZS2doWEP-e3Yh_fUNyItLUzmY67qKGJwmodq1OWQ4LXuhT-txM9t_ddVA_1rU2J2XFh7o7L7iiTds8qJTrkU99y4sz9UlGxhi59RLEC2LHIflJGPSps/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!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Widgets, jQuery