How To Add Beautiful Multi Tab | Blogger Tips

In this post, Adding Multi Tab in Blogger is explained. Normally MultiTab is used in the sidebar to help visitors geting different information on your blog.

1.First of all Login to your dashboard--> layout- -> Edit HTML
2.Scroll down to till you see ]]>tag.
3.Now copy and paste below code justbefore ]]> tag.

You can customize width,height,color etc as your choice.

.widgets{width:100%; overflow:hidden; margin-top:5px; padding:0px 0px 0px 0px; background:#FFF; border:1px solid #ccc}.widgets a{color:#222; text-decoration:none}.widgets a:hover{color:#009; text-decoration:underline}ul.tabnav{padding:0px 0px 0px 0px; height:27px; margin:0px 0px}.tabnav li{display:inline; list-style:none; float:left; text-align:center; margin-right:4px}.tabnav li a{text-decoration:none; text-transform:uppercase; font-weight:normal; padding:5px 8px; width:90px; line-height:18px; font-weight:bold; font-family:Century gothic,Arial,sans-serif; color:#262B2F; text-decoration:none; display:block}.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a{text-decoration:none; background:url(none/catm.pg) repeat-x; color:#0283C7}.tabdiv{margin-top:2px; padding:5px 5px 5px 5px; font-family: Tahoma,Georgia,Century gothic,Arial,sans-serif; background:#EBF3FB}.tabdiv a:link, .tabdiv  a:visited{color:#333}.tabdiv a:hover{color:#2676A1}.tabdiv ul{list-style-type:none; margin:0px 0px; padding:0px 0px}.tabdiv ul li{height:100%; line-height:28px; padding:0px 0px 0px 0px; color:#333; border-bottom:1px dotted #61696F}.tabdiv li a:link, .tabdiv li a:visited{margin-left:5px; overflow:hidden; height:18px; line-height:24px; padding:0px 0 0px 0px; margin:3px 0px; color:#99A6AF; font-size:13px}.tabdiv li a:hover{background:url(none/la.jpg) no-repeat; color:#fff; text-decoration:none}.ui-tabs-hide{display:none}.tagcloud{width:300px; float:left; height:100%; padding:5px 15px; margin:0px 0px; background:#fff url(YOUR-IMAGE-HOSTING-LOCATION-HERE/tbody.jpg) repeat-y; font-family:Tahoma,Century gothic,verdana,Arial, sans-serif}.tagcloud a:link, .tagcloud a:visited{color:#0282D9}.tagcloud a:hover{color:#BC0C0F}

4.Now you have to host below 6 java script files into free java script hosting service like 110mb.com.First download these files.After hosting these 6 files, copy their direct urls.
hoverIntent.js
jquery-1.2.6.min.js
jquery-ui-personalized-1.5.2.packed.js
scroll.js
sprinkle.js
spy.js
Look at the example below.
http://YOUR-USER-NAME.110mb.com/hoverIntent.js
http://YOUR-USER-NAME.110mb.com/jquery-1.2.6.min.js
http://YOUR-USER-NAME.110mb.com/jquery-ui-personalized-1.5.2.packed.js
http://YOUR-USER-NAME.110mb.com/scroll.js
http://YOUR-USER-NAME.110mb.com/sprinkle.js
http://YOUR-USER-NAME.110mb.com/spy.js
5.Now again scroll down to till you see </head> tag.
6.Now copy and paste below code just before </head> tag.

<script src="http://YOUR-USER-NAME.110mb.com/jquery-1.2.6.min.js" type="text/javascript">
</script><script src="http://YOUR-USER-NAME.110mb.com/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript">
</script><script src="http://YOUR-USER-NAME.110mb.com/sprinkle.js" type="text/javascript">
</script><script src="http://YOUR-USER-NAME.110mb.com/hoverIntent.js" type="text/javascript">
</script><script src="http://YOUR-USER-NAME.110mb.com/scroll.js" type="text/javascript">
</script><script src="http://YOUR-USER-NAME.110mb.com/spy.js">
</script>

Note : Remember to replace above urls with your real hosting urls.
Now add this code to your sidebar. You have to know how gadget is added in Blogger first.
7.Now add below code just after above code.

<div class="widgets" id="tabzine">
<ul class="tabnav">
<li class="pop"><a href="http://www.blogger.com/post-create.g?blogID=8685731215904055893#popular"> Recent</a></li>
<li class="fea"><a href="http://www.blogger.com/post-create.g?blogID=8685731215904055893#tags"> Labels </a></li>
<li class="rec"><a href="http://www.blogger.com/post-create.g?blogID=8685731215904055893#recent"> Followers </a></li>
</ul>
<div class="tabdiv" id="popular">
<b:section class="tabid1" id="tabid1" showaddelement="yes"><b:widget id="HTML144" locked="false" title="Recent Post" type="HTML"></b:widget></b:section></div>
<div class="tabdiv" id="tags">
<b:section class="tabid2" id="tabid2" showaddelement="yes"><b:widget id="Label122" locked="false" title="Labels" type="Label"></b:widget></b:section></div>
<div class="tabdiv" id="recent">
<b:section class="tabid3" id="tabid3" showaddelement="yes"><b:widget id="Followers152" locked="false" title="Followers" type="Followers"></b:widget></b:section></div>
</div>
<b>Get this Widgets</b> <a href="http://makeblogpopular.blogspot.com/" name="blogger tips and tricks" target="_BLANK">Get this MultiTab Widget</a>

You can change your Tab name (Recent Posts,Labels,Followers) what ever you want. Then place your respective codes in the Recent Posts, Labels, Followers tab.
8.Now save your template and you are done.

Comments Post a Comment

RollingRoxy - June 19, 2010

having proble in tab widget please help as it showing title of other widget and content of other

Anonymous - July 02, 2011

i want to add five tab . how to possible? please help
pka246@gmail.com

Leave a Comment