DBUnggul Blog

Multi Tab Widget

          Pada kesempatan kali ini saya ingin  berbagi tutorial membuat widget multi tab di Blogger. Multi tab widget yaitu sebuah widget dimana widget tersebut dapat menampung lebih dari satu konten, misalnya seperti pada gambar widget multi tab dapat menampung tiga konten. Multi tab widget ini memang sangat efektif untuk mengatasi pemakaian tempat dalam penempatan widget. Berikut langkah-langkah membuat Multi Tab Widget Blogger.


1. Masuk Tab Rancangan ==> Edit HTML
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'>  , kalau tidak ada kodenya cari yang sama hubungannya.

<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 ungu dengan nama tab sobat, kemudian simpan template sobat.
Sekian tutorial kali ini, wassalam. 

*jika ingin menubahnya edit warna atau lebar edit value di bawah ini

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