How To Add Beautiful Multi Tab View Widget to Blogger

Posted by Lasantha Bandara on July 29th, 2009 File Under : css, jquery, widget2 Comments

1.Login to your dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to till you see ]]></b:skin> tag.

4.Now copy and paste below code just before ]]></b:skin> tag.

.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}

NOTE : You can change width,height,color,..... as your choice.

5.Now you must 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

6.Now again scroll down to till you see </head> tag.

7.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 src='http://YOUR-USER-NAME.110mb.com/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/sprinkle.js' type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/hoverIntent.js' type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/scroll.js' type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/spy.js'/>

Note : Remember to replace above urls with your real hosting urls.

8.Scroll down to where you see this :

<div id='sidebar-wrapper'>

9.Now add below code just after above code.

<div class='widgets' id='tabzine'>

<ul class='tabnav'>
<li class='pop'><a href='#popular'> Recent</a></li>
<li class='fea'><a href='#tags'> Labels </a></li>
<li class='rec'><a href=' #recent'> Followers </a></li>
</ul>

<div class='tabdiv' id='popular'>
<b:section class='cahaya13' id='cahaya16' showaddelement='yes'>
<b:widget id='HTML144' locked='false' title='Recent Post' type='HTML'/>
</b:section>
</div>
<div class='tabdiv' id='tags'>
<b:section class='cahaya4' id='cahaya4' showaddelement='yes'>
<b:widget id='Label122' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='tabdiv' id='recent'>
<b:section class='cahaya13' id='cahaya14' showaddelement='yes'>
<b:widget id='Followers152' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

</div>
<p><font><b>created by</b></font> <a href="http://bloggertipandtrick.blogspot.com/" target="_BLANK" name="blogger tips and tricks">Lasantha</a></p>

Note : Please do not remove credits.

You can change Recent,Labels,Followers(Red coloured codes) if you want to change tab names.

To add your own widget into the tabs, replace Blue coloured codes with your widget codes.

10.Now save your template and you are done.

Look at the example below.

File Under : css, jquery, widget

Related Posts

2 Responses to “How To Add Beautiful Multi Tab View Widget to Blogger”

  1. Esydownloads says:

    i my templete already use the jquery.js file when i use this tabber widget then it affects my other widget linke "Sponcer","About me","Random Post"

    so any soluction for that

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Yes,If you already use jquery.js in your template you must not add jquery.js again.Solution for that:

    Add your jquery file immediately below ]]></b:skin> tag.Look at below:

    ]]></b:skin>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> .

    After adding this, your previous jquery.js file must delete.Now your all jquery widgets will work fine.

Leave a Reply