how to add a nice tabview

tab view is useful for saving space on a regular basis your sidebar and look presentable

1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>

Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ b: skin>

CSS CODE :

/* Tabview */
#tabzine{background:#f8f8f8; 
 width:325px; 
 float:right; 
 margin-bottom:3px; 
 padding:0; 
 word-wrap:break-word; 
 overflow:hidden}

ul.tabnav{
 width:325px; 
 background:#000000; 
 padding:8px 0; 
 height:25px; 
 margin:0}

.tabnav li{
 display:inline; 
 list-style:none; 
 float:left; 
 font-size:16px; 
 width:90px; 
 margin-left:10px; 
 font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 
 text-align:center}

.tabnav li a{
 text-decoration:none; 
 font-weight:normal; 
 line-height:30px; 
 padding:0px 0px; 
 color:#fff; 
 text-decoration:none; 
 display:block}

.tabnav li a:active, .tabnav li.ui-tabs-selected a, .tabnav li a:hover{
 text-decoration:none; 
 color:#fff}

.tabdiv{
 background:; 
 padding:5px 10px 10px 10px; 
 margin:0}

.tabdiv li{
 list-style:none; 
 border-bottom:1px solid #eee; 
 display:block; 
 padding:5px 0; 
 text-decoration:none}

.tabdiv li a{
 color:#030b86}

.ui-tabs-hide{
 display:none}

.banner1, .banner2{
 width:125px !important; 
 height:125px !important; 
 float:left; 
 display:inline; 
 background:#eee; 
 padding:10px; 
 margin:10px 0 0 0}

.banner2{
 float:right}

Next steep:

find CODE : <div id='sidebar-wrapper'>

details see the code below:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

<b:widget id='HTML11' locked='false' title='' type='HTML'/>

<b:widget id='HTML3' locked='false' title='Follow By Email' type='HTML'>

</b:section>

Under the HTML code  you put in this box Before Or Above code </b:section>

HTML CODE :

<div class='tabview' id='tabzine'>
         <ul class='tabnav'>
           <li class='rec'><a href='#popular'>Popular</a></li>
           <li class='pop'><a href='#recent'>Recent</a></li>
           <li class='fea'><a href='#archives'>Chat</a></li>
         </ul>

         <b:section class='tabdiv' id='popular' preferred='yes'/>

         <b:section class='tabdiv' id='recent' preferred='yes'/>

         <b:section class='tabdiv' id='archives' preferred='yes'/>
       </div>

       <div class='clear'>&#160;</div>

as shown in the picture below

The next step

Find CODE </body>

Copy code java script below before code </ body>

JAVASCRIPT CODE:

<script src='http://sitemaphendrytha.googlecode.com/files/hendrythacodejquery-1.2.js' type='text/javascript'/>

if successful will look like the picture below