Membuat MENU TAB Widget Pada Sidebar
Daftar Isi
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 ]]>
Baca Juga: 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
- 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.
Silahkan tambahkan widget yang anda inginkan pada masing-masing tab.
Posting Komentar