Membuat Multi Tab Widget Blogger

1. Masuk Tab Rancangan ==> Edit HTML ==> centang Expand Template Widget
2. Backup template sobat dengan klik Download Template Lengkap (Optional)
3. Tambahkan kode di bawah ini sebelum kode ]]></b:skin>

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#666666;background:#DDDDDD;padding:4px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#666666;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Tambahkan kode di bawah ini setelah kode <div id='sidebar-wrapper'>

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-tab&quot;).hide();
                $(&quot;ul.tabs-widget-tab li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-tab:first&quot;).show();
 
                $(&quot;ul.tabs-widget-tab li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-tab li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-tab&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>About</a></li>
<li><a href='#tab2'>Tags</a></li>
<li><a href='#tab3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                 
</div>                      
                          
<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                   
</div>                      
                          
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                  
</div>
</div>
<div style='height:5px;clear:both;'/>

5.  Tambahkan kode berikut sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Jika sobat sudah memasang script Jquery di atas pada template sobat, maka abaikan langkah ini.
6. Ganti tulisan yang berwarna biru dengan nama tab sobat, kemudian simpan template sobat.

sumber;http://www.blackdeviant.web.id/2012/03/multi-tab-widget-blogger.html

Membuat Multi Tab Widget Blogger

Posted by: Risalahati Dedic Ahmad Updated at: 14:54