Cara Membuat Menu Dengan Icon Gambar Di Blog dan Website

Cara Membuat Menu Dengan Icon Gambar Di Blog  dan Website

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.

<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/AVvXsEjw907v_7tCTBYMkIIzBwVOS2ZKKqP6Fe8X9XVdMXMclI5qVPQY34sUB_rcZqIOrugK3672kseUunGHXkZsAW50mCMMt3qXq1euFacIegEeWChIYLilPyyzao6hYUSCJbdx3FuSFA5T3VhT/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/AVvXsEjGPqhcjW9wvcOdpujbBbq4PXmeC3FvGnSthdzdePlNUY04pzhuTlfHSmrUREz1dT1bM5I6blfiSIgmJizYRmsgK-eDQOZycxStdb5RV2UIfEWkGYQy757V0gPZB2Zs3ldKqYsEnA8f23-l/" 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/AVvXsEj7d0d15KbJYqE3mSiHo4b6-bnBZ34X47vUzu5mYaqOfKdr0MzlvK38sXZM1yQ2OSJpdkPLIE0JPdacZDv07TaTKEReBuPhveGokj5AtHF7Z8rhM6ZsBThyphenhyphenDNf0VJVk1VLjugQM0kI88xin/" 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/AVvXsEgs2V2NdV5ijOnzdWxzfTqmumzccO49zI-HdrPQSXQtno7s8OAyUoW0O1vCtGJSynQLl009mCbeAbfFCrO3wUZspZQNJzw6RaILRqia4FuL2cbksFll2diF60Gt573FVXEbTygyRm6xY1pn/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>

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. - See more at: http://kuc0pas.blogspot.sg/2012/02/cara-buat-menu-dengan-icon-gambar-di.html#sthash.l4v3UqrM.dpuf