Tambahkan Wordpress Style Menu Tabs Widget Untuk Blogger

Tab View Widget Bergaya Wordpress? atau widget 3 kolom bergaya wordpress? itu mungkin yang akan saya bahas pada postingan kali ini, tapi sobat perlu lihat jga postingan saya sebelumnnya yaitu Special tab view untuk widget di blogger lama dan blogger baru. Kode ini saya dapatkan dari master blogger luar negeri ketika saya sedang jalan-jalan kesana, waduh pulau jawa juga belum semua saya kunjungi udah ngaku ke luar negeri lagi haa becanda kawan. Memang benar kode saya dapat dari Master Blogger luar negeri ketika sejang surfing di dunia maya, tanpa banyak panjang lebar lagi kita mulai bahas bagaimana menambahkan wordpress style menu tabs widget untuk blogger.

Cara tambahkan widget tabs multi untuk blog?

Saya telah membagi tutorial membuat tab view untuk widget dalam tiga bagian.

1. Menambahkan Jquery dan JavaScript untuk template blog sobat
2. Menambahkan CSS
3. Menambahkan HTML

Sebelum ke 3 bagian tersebut sebaiknya sobat like dulu blog saya hee

Oke setelah anda like kita mulai di tahap satu yaitu:
1. Menambahkan Jquery dan JavaSceript untuk template blog sobat

1. pergi ke blog sobat.
2. dari dasbor klik Rancangan => Edit HTML
3. backup temlate sobat terlebih dahulu
4. cari kode ]]></b:skin>
5. tepat di bawahnya simpan kode berikut => BUS buka menu tab JavaScript
6. simpan template anda
7. selesai untuk tahap satu.

2. Menambahkan CSS

1. masih di bagian Edit HTML cari kode ]]></b:skin> lagi
2. tepat di atas itu paste kode di bawah ini

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

Sobat cukup ganti #A46F38 dengan kode warna heksadesimal sehingga dapat menyatu dengan sempurna pada template blog sobat.

3.Menambahkan HTML

1. sekarang waktunya untuk pencarian kode  <div id='sidebar-wrapper'> 
2. pastikan kotak kecil di samping tulisan expand template widget anda centang atau ceklis.
3. tepat di bawah kode   <div id='sidebar-wrapper'> paste kode di bawah ini.

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

Silahkan sobat ganti subscribs, latest tricks, search dengan nama judul widget yang akan sobat tambahkan nantinya.
Eits belum selesai sob masih ada berikutnya sekarang waktunya pindah ke tata letak atau page elements. Dan sobat akan melihat seperti gambar di bawah ini.

Tambahkan gadget yang sobat inginkan dan ingat sesuai judul widget yang sobat simpan pada kode sebelumnya. Dan lihat hasilnya..tarang...