Memasang Widget Multi Tab di Blogger

Widget di sidebar dari blog dengan wordpress bisa didesain dengan sangat baik sehingga bisa memberikan tampilan yangbisa menghemat tempat juga. Misalnya widget dengan sidebar yang memiliki beberapa tab (multitab), contohnya seperti pada gambar di samping, yang terlihat ada beberapa Tab (subcribe, latest tricks search). Anda bisa melihat hasilnya dari multi tab widget tersebut dari Live Demo di bawah ini.

Live Demo

Namun jangan takut jika anda pengguna setia blogger, tampilan seperti ini pun bisa dipakai pada template blogger. Dengan menambahkan beberapa kode CSS dan Jquery. Saya akan mencoba membuat tutorial proses instalasinya semudah mungkin sehingga bagi pemula pun masih bisa mengikutinya.

Tutorial menambahkan Widget Multi Tab ke Blogger

Ada 3 langkah yang harus dilakukan,

1. Menambahkan JQuery dan JavaScript ke template Blogger anda
2. Menambahkan kode CSS
3. Menambahkan kode HTML

langkah 1- Menambahkan JQuery dan JavaScript ke template Blogger Anda

1. Menuju ke Blogger > Template > Edit HTML
2. Jangan lupa Backup templateanda dahulu
3. Cari kode  ]]></b:skin> (gunakan bantuan Ctrl+F pada browser)
4. Tepat di bawah kode tersebut, paste paste kode berikut ini –> TTO Menu Tabs JavaScript
5. Simpan template Anda
6. Selesai

Langkah 2- Menambahkan kode CSS

1. Masih di HTML templatecari kode berikut ]]></b:skin> lagi
2. Tepat di atas kode tersebut paste kode di bawah ini:

/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Anda bisa mengganti kode warna #A46F38 dengan kode  kode warna HexaDecimal dari template anda sehingga tab bisa terlihat lebih sesuai dan sempurna menyatu dengan template anda.

Langkah 3- Menambahkan kode HTML

1. Masih di bagian HTML Template, cari kode berikut <div id='sidebar-wrapper'>
2. Jangan centang expand widget template.
3. tepat sebelum kode <div id='sidebar-wrapper'> paste kode di bawah ini,

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>   
<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>   
                       
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<div style='clear:both;'/>

Keterangan: anda bisa mengganti Subscribe, Latest Tricks dan Search dengan Judul Widget yang anda inginkan.



Simpan Template
  
 Langkah 4 (tambahan).  Sekarang menuju ke Page Elements/tata letak. Anda akan melihat tampilan seperti di bawah ini,
Sekarang anda bisa menambahkan widge, lalu lihat hasilnya..

Kalau semua langkah sudah anda lakukan dengan benar dan tidak ada crash antar script, seharusnya multitab widget sudah bisa muncul di blog anda.

Selamat mencoba 


sumber