Menambah menu dropdown pada Tabs Horisontal Blogger Standar

sub menu tabs horisontal blogger standard
Blogger semakin hebat saja, tidak kalah dengan pesaingnya disana. Kini siapa pun dapat memiliki blog dengan penampilan yang menarik.

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 :

sub menu dropdown tabs horisontal blogger standard

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

Comments

  1. jie....ganti meneh template...ijo ndak dewasa kata kompetitor lho pak, tapi natural....i like it

    ReplyDelete
  2. Wah, ga bisa nih gan..
    Sub menunya jadi..tapi langsung ditampilin..
    Ga kaya yang di demo..keluar kalo kursor nunjuk ke menu utama..

    ReplyDelete
  3. Kalau boleh saya sarankan, kode , dicek kembali...
    Mungkin yang dimaksud .

    ReplyDelete

Post a Comment

Popular posts from this blog

Tutorial Android Studio Mengganti Icon Launcher App

Cara Menambah gambar untuk project Android Studio

Mengenal Icon di tab Review MS.Word 2010