Beranda Blogspot

Membuat MENU TAB Widget Pada Sidebar

Gambar
admin udin
0 • menit membaca
Daftar Isi
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 ]]>



  • 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
  • Tepat di bawah kode tadi taruh kode berikut ini.





                                      
   
                       


                                        
   
                       



                                       



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.
Membuat Menu Tab Widget pada sidebar sebenarnya diadaptasi dari wordpress Membuat MENU TAB Widget Pada Sidebar

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

Posting Komentar