Membuat MENU TAB Widget Pada Sidebar

Table of Contents

Membuat Menu Tab Widget pada sidebar sebenarnya diadaptasi dari wordpress. Widget ini bisa anda gunakan untuk menghemat ruang pada sidebar, karena setiap widget disimpan pada tab berbeda. Jadi widget pada tab yang tidak dipilih tidak akan ditampilkan.

Contoh dari tab menu ini bisa dilihat pada gambar di atas. Atau bisa juga mengunjung blog live demo ini.

Kalau anda tertarik untuk menghias blog anda dengan menu tab widget ini, silahkan ikuti prosedur di bawah ini.

Menambah JQuery dan Javascript Menu Tab Widget pada Template

• Masuk ke akun blogger anda
• Pilih menu TEMPLATE -> EDIT HTML
• Cari kode ]]>
• Copy paste kode berikut tepat di bawah kode ]]>

Related: loading

• Jika sudah simpan perubahan pada template

Memasang CSS Menu Tab Widget

• Kembali cari kode ]]>
• Tepat di atas kode ]]> taruh kode berikut ini

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

• Simpan lagi perubahan pada template anda.

Memasang HTML Menu Tab Widget pada Template

• Bagian ini bisa jadi sedikit merepotkan untuk pemula.
• Masuk kembali ke TEMPLATE -> EDIT HTML
• Jangan centang EXPAND TEMPLATE WIDGET, biarkan saja
• Cari kode
  . Kode ini bisa berbeda untuk setiap template.
• Tepat di bawah kode tadi taruh kode berikut ini.

• Subscribe


• Latest Tricks


• Search

                                      

   

                       

                                        

   
                       

                                       

Kalau anda melakukan tahapan di atas dengan benar, maka anda bisa mendapatkan tampilan seperti di bawah ini pada sidebar anda saat membuka menu TATA LETAK.

Silahkan tambahkan widget yang anda inginkan pada masing-masing tab.