Menambah Sub Menu dalam Menu Horizontal Pada Blogger

Pada post yang sebelumnya..., ZN telah menshare cara membuat menu horizontal . Nah....pada cara ini ZN menggunakan pengkodean CSS yang dibuat oleh blog Kang Rohman. Nah...Jikalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog

Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :
• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
• Cari kode HTML di bawah ini yang posisinya diantara ... .

<div id="navleft">
<div id="nav">
<ul>
<li><a href="http://alamat_blog_kamu.blogspot.com/">home</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
</ul>
</div>
</div>

*Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.*

• Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum .

<ul>
<li><a href="http://www.blogger.com/URL%20sub%201">Sub menu 1</a></li>
<li><a href="http://www.blogger.com/URL%20sub%202">Sub menu 2</a></li>
<li><a href="http://www.blogger.com/URL%20sub%203">Sub menu 3</a></li>
</ul>

Contoh :
<div id="navleft">
<div id="nav">
<ul>
<li><a href="http://alamat_blog_kamu.blogspot.com/">home</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a>
<ul>
<li><a href="http://www.blogger.com/URL%20sub%201">Sub menu 1</a></li>
<li><a href="http://www.blogger.com/URL%20sub%202">Sub menu 2</a></li>
<li><a href="http://www.blogger.com/URL%20sub%203">Sub menu 3</a></li>
</ul>
</li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
</ul>
</div>
</div>

Catatan :
1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
3. Simpan


Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;

}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}


Selamat berdropdown dengan menu horizontal...

Posted in: Blog