Hai sob, mari kita membahas tentang aksesoris di blogger. Sebenarnya banyak sekali cara untuk memudahkan pengunjung mengeksplor situs kita, blogger sendiripun memberi banyak widget misalnya "popular posts" yang bisa langsung kita tambahkan dengan add gadget (layout -> add gadget -> popular posts). Kali ini saya akan membahas bagaimana cara menambahkan navigasi pada blog blogger kita. Intinya tentang dropdown menu. Pertama, apa sih fungsinya kita perlu menambahkan menu navigasi untuk blog kita?
fungsi menu navigasi pada blog
- Memudahkan pengunjung untuk sortir/ memilih informasi yang dibutuhkan
- Memberitahukan kepada pengunjung tentang apa saja yang ada di blog kita
- Mempercantik tampilan situs
- Memudahkan kita sendiri untuk mengevaluasi blog kita
Cara menambahkan dropdown menu pada blog
1. Masuk pada blogger anda
2. Masuk pada menu template -> edit HTML
3. Cari kode ]]></b:skin> (klik disembarang tempat didalam kode editor, ctrl+f, lalu ketikkan kode yang tercetak tebal, enter.
4. Copy dan pastekan kode css dibawah ini tepat diatas ]]></b:skin>
.menu{font-size:16px;border-top:1px:solid DDD;color:#DB1079;margin:0px;padding:0;}
.menu ul{height:40px;list-style:none;margin:0;}.menu li a{border-right:1px solid #DDD;display:block;line-height:40px;text-align:center;text-decoration:none;padding-left:15px;padding-right:15px;margin:0;}.menu li a:hover,.menu ul li:hover a{background:#DB1079;color:#222;text-decoration:none;}.menu li ul{display:none;height:auto;border:0;position:absolute;width:225px;z-index:200;margin:0;padding:0;}.menu li:hover ul{display:block;}.menu li li{border-bottom:1px solid #dedbd1;display:block;float:none;width:225px;margin:0;padding:0;}.menu li ul a{display:block;height:30px;font-size:12px;font-style:normal;text-align:left;margin:0;padding:0 10px 0 15px;}.menu li ul a:hover,.menu li ul li:hover a{background:#2580a2;border:0;color:#fff;text-decoration:none;}.menu p{clear:left;}
.left,.menu li{float:left;}
5. Copy dan pastekan kode berikut tepat dibawah <body>
<div class='menu'>
<ul><li><a href='#'>link 1</a></li><li><a href='#'>link 2</a></li><li><a>link 3</a><ul><li><a href='#'> link 3.1</a></li><li><a href='#'> link 3.2</a> </li><li><a href='#'> link 3.3</a> </li></ul></li></ul>
</div>
6. Klik simpan template
7. Lihat hasilnya :-)
* Ganti link URLnya sesuai yang anda inginkan, atau anda mungkin ingin menambahkan menu dan sub menu itu akan mudah terserah anda. Mudah bukan? selamat mencoba sobat.
