Cara Membuat Menu Vertikal Dengan Icon

Yups seperti contoh gambar disamping, disini saya akan share Cara Membuat Menu Navigasi Dengan Icon.

Cara ini sebenernya punya banyak manfaaat, yaitu selain lebih mempercantik blog kita karena icon" yang menarik dan lucu dan juga bisa menghemat tempat.

Cara ini bisa sobat terapkan pada berbagai tempat, misalnya pada gadget atau malah bisa ditempatkan dibawah postingan... yaaaaa tergantung selera kita deh... hihihihihihih

Nih langsung aja pada tutorialnya :
1. login blog
2. rancangan --> Edit HTML
3. Cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini diatas kode ]]></b:skin>

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

5. simpan........

SELESEI?????? belum lahhh.. karena tu masih instalasi cssnya saja... nah langsung aja pada langkah selanjutnya.

6. buka Elemen halaman --> tambah gadget --> HTML/JavaScript
7. lalu copy kode dibawah ini dan taruh pada gadget tadi

<div id='newnavbar'>
<ul>
<li><a href="URL "><img src="URL gambar" /></a></li>
<li><a href="URL "><img src="URL gambar" /></a></li>
<li><a href="URL "><img src="URL gambar" /></a></li>
--- Dan seterusnya Bila mungkin sobat ingin menambahkan lagi ---
</ul></div>

NB : ganti URL dengan alamat yang akan di link, dan ganti URL gambar dengan alamat gambarnya, dan anda pun bisa menambahkan beberapa navigasi icon lagi seperti contoh diatas. Eitsss jangan lupa hapus tulisan --- Dan seterusnya Bila mungkin sobat ingin menambahkan lagi --- Karena itu hanya menandakan bahwa sobat bisa membuat menu navigasi icon lebih dari 3 seperti yang saya contohkan diatas.....