Cara Membuat Menu Dengan Icon Gambar Di Blog

Hallo Sobat YAP Blog kali ini saya akan berbagi  artikel tentang trik lagi, Tentunya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik. Caranya yaitu dengan menambahkan Menu Vertikal Dengan Icon atau gambar.

 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilannya dengan icon gambar.

 Nah sekarang saya punya trik untuk sobat semua supaya tampilan menu di blog sobat jadi lebih menarik dan bagus lagi, Sobat bisa membuat dan memasang Menu Vertikal Dengan Icon gambar.

Sobat lihat saja tampilan Gambar di samping posting ini.
klik saja untuk memperbesar dan melihat gambar dengan jelas.

gimana... Menarik bukan...???

 jika sobat sudah tidak sabar lagi ingin memasang Menu Vertikal Dengan Icon/gambar di blog,,, 
okelah kalau begitu kita langsung saja menuju ke TKP.
hehehe...

Berikut cara-cara nya :

1. Login Ke Blog sobat.
2. Pilih Rancangan Terus Pilih Elemen Laman.
3. Add Gadget HTML Java Script.
4. Kemudian Copy dan paste Kode di Bawah Ini.
Jangan sampai ada yang terlewatkan.!!!

---

<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SOBAT">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghb1bsrdmvOB6_Afo9SdISsFLLwADSONrNqdA6ANG1oxyC6cedcW0QGKA3qqa9Qasd4cDdEUigzAN0LYRhncqQDXSLKzRB7EtmurP9p3fEjM_PaaWjOxzUuGEqYU1aXC6RTog8X47RJk_U/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SOBAT">Daftar Isi</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Download Template Blog</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SOBAT">Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCW1dWChjeN0G27OuPMJIfbgWcjIZ-FhSUhP_G9P4Isg0QKB6yrAv5C0lF_leKS03LAyIDbvoBz2QsKyqB0DzB-4xQr10E4YDGcEmvHGAQQAIPdTlXDqpyEiIp926ntr4eT8KraJl0Dx7/" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtak-krwJJQ_mM1kPtFEkIrTBH3H4NWV0C6cWbEZamRvVIscYrZYjf933I9H6KoWtdDu2ZuHCk1dVEe99YhF0Q5ruvBVO4g8XXjObpmJr6winVDpmPlbXbbsUonJnAMs1h4qy8EA1M8oOK/" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOiu4d8w4Yl3ZLKNwoObWMHP1kxlK9HJTwQERwyaSAODS5yZeJ-VWs8ya0DY84m-9OjossQQ8ZE7Ry3HtDTUdftIrmEA4rs7nAOnAaCsDjIwiEzEOJ_dsbmzzFjTe4kz6m0b-VqKTSbq0/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Feedburner</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SOBAT">Kumpulan Icon</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

---

5. Save/simpan dan selesai.
Silahkan sobat lihat hasil nya.

Keterangan :

-Yang Berwarna Biru silahkan kamu ganti background nya sesuai selera sobat.
-Yang Berwarna Pink silahkan sobat ganti dengan URL Icon/gambar Nya.
-Yang Berwarna Hijau silahkan sobat ganti dengan URL tujuan atau target.
-Yang berwarna Merah silahkan sobat ganti dengan Nama menu.

Jika sobat tidak punya Icon/gambar, Silahkan Sobat lihat dan pilih-pilih Kumpulan Icon Keren DISINI.
Sobat bisa memodifikasi nya sesuai dengan keinginan dan selera sobat semua.
Semoga bermanfaat