How To Add Beautiful Multi Tab View Widget to Blogger

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.