Ditambah lagi sekarang banyak bermunculan pebloger hebat di tanah air. Sebuah widget blogspot yang satu ini ( Tabs horisontal )boleh dikatakan wajib untuk dimiliki dan dipasang pada blog.
Dengan adanya Navigasi ini maka pengunjung menjadi terbantu dalam mengeksplorasi konten yang ada dalam sebuah blog. Blogger memberi nama navigasi itu dengan sebutan Tabs Horisontal. Blogger menyediakan widget Tabs horisontal yang letaknya berada di bawah Header. Akan tetapi Tabs horisontal ini tidak akan muncul sebelum kita mengaktifkannya.
Tetapi sayangnya Tabs horisontal bawaan blogger standar tidak dilengkapi dengan submenu atau menu di bawah menu utama, alias dropdown menu, sehingga masih kurang begitu menarik.
Selama ini yang kita tahu untuk dapat membuat navigasi horisontal plus menu dropdown adalah dengan menambahkan banyak css maupun js yang begitu ribed. Belum lagi setelah diterapkan malah merusak konstruksi template.
Jika saat ini anda sedang mencari tips tentang cara Menambah menu dropdown pada Tabs Horisontal sedangkan template yang dipakai adalah template Blogger yang masih standar, maka anda termasuk orang yang beruntung karena pada kesempatan ini akan saya berikan rahasianya.
Silahkan perhatikan dan ikuti langkah berikut ini :
1. Pastikan bahwa anda memakai template blogger standar (Template bawaan blogger)
2. Pastikan anda telah mengaktifkan fitur Laman.
Kalau belum silahkan aktifkan dulu, caranya lihat gambar di bawah ini :
3. Klik Simpan Setelan
4. Setelah itu masuk ke Edit HTML template
5. Klik Expand Template Widget
6. Cari kode ini ]]></b:skin>
7. Setelah ketemu, masukkan kode berikut ini, tepat di atas kode pada langkah no.6
.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;}
8. cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah kode <b:/loop>.
<li><a href='#'>Menu</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
</ul>
</li>
9. Simpan Template
Jika anda melakukannya dengan benar maka hasilnya seperti pada blog demo berikut ini:
LIHAT DEMO
