Cara Membuat Menu Vertikal Dengan Icon Di Blog

Cara Membuat Menu Vertikal Dengan Icon Di Blog

Cara Membuat Menu Vertikal Dengan Icon Di Blog - Setelah lama saya tidak memposting Tips Dan Tutorial Blog kali ini saya akan berbagi Tips lagi supaya Blog kamu terlihat cantik, yaitu dengan Membuat Menu Vertikal Dengan Icon, biasanya yang kamu temuin hanya menu vertikal saja tanpa dengan icon nah sekarang supaya lebih bagus pake icon donk, langsung ajah deh ini dia cara-cara nya.

• Login Ke Blog kamu.
• Pilih Rancangan Terus Pilih Elemen Laman
• Add Gadget HTML Java Script
• Copy 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="http://blazerracing.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6PcwZ5R7mcJICGPmbK00_49V-LPn6XEZ3xNuGoQQK8kFG1IqWMfsxvKKiBnaQMjqDBAIX5SiVnxQtZcM3_vSCkN_i5GYZ5FJAz0KanTIhzYhJB6r6TWz-qAZ0aZQn_P0Upm4II204K167/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://blazerracing.blogspot.com/2011/12/daftar-isi.html">Daftar Isi</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="http://blazerracing.blogspot.com/2012/01/kumpulan-kumpulan-icon-keren.html#id">Kumpulan Icon</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="http://blazerracing.blogspot.com/search/label/Tutorial%20Blog">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="http://blazerracing.blogspot.com/search/label/Tips%20Blog">Tips Blog</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="http://blazerracing.blogspot.com/2012/01/dowload-free-template-blog.html#id">Download Template 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="http://blazerracing.blogspot.com/2012/01/kode-warna.html#id">Kode Warna</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="http://blazerracing.blogspot.com/2012/01/tukat-link.html#id">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25dymyXhScRLKB9QcA_0Rj9zTpEudYrztlJRwx74Ac6CXNPEr7TG2bmyTYDGj76HOHet_73h84-m20V_RXt8bgR9a5adzTIBYraDFxoidfd_mrndS6IG_JriVVM0p9hwaPipSg6XwJDoK/" width="18" height="18" /></div></td>
<td><li><a href="http://www.facebook.com/pages/Blazer-Blog/193419544081467">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYPu6eM_hT9JkxUFhSlzKMCV-IYccj3OTlcWwxwOFC1G2aw3PYdlM7sHfoP-j_Xg3drUe_odB5hF5a88cgGInJdEkOG0DxT8tF8nFt3xclnTcnbP2wYnm4mRn-GjvDgbEjk22Gb7hCLBJ/" width="18" height="18" /></div></td>
<td><li><a href="https://twitter.com/#!/eclipspain">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZ9pZlJwzFgwY1QTriFcei5SrWhdth7Pg3I1d-8MSoNW-k-d6GMaHnOQOssnD8-o55rL4iajWB_pXu3IVSqxBcBYNCEcdng8xFR397nyAcC8ZmxgCLGZT3FPc00bMQwx4AZXZv1VrTxU7/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/blogspot/ZqAec">Feedburner</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="http://blazerracing.blogspot.com/2012/01/informasi-pasang-banner.html#id">Advertise</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="http://blazerracing.blogspot.com/2011/12/conatct-us.html">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

Keterangan :

• Yang Berwarna Merah silahakn sobat ganti dengan URL Icon Nya.
• Yang Berwarna Biru silahkan sobat ganti dengan URL tujuan atau target.
• Yang berwarna Ungu Muda silahkan sobat ganti dengan Nama.
• Yang Berwarna Hijau silahkan kamu ganti background nya sesuai selera kamu.

Artikel Terkait:

Widget by [ Berbagi itu Indah ]