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/AVvXsEh1JLzPEJv-nRkVscm9fTtRqJ1vKZoVekCxbg8oWbvjwMRComM3fI_yo_12QXlIvNLkl67rDYvZs8mW7cx9xkPlMbVU-Y9JsH3rRy1n3iJ91HSH_l11kAWUpj3Sl3gkPk-SgZ7Gjr7dk7MU/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/AVvXsEjKUc1vIfRzy_EIN1dFWP8xGDv1r8r4OdfDIRReFnae8HzoxZkIaOIuPuknv4a5FJbLYyCPOZ-6QJJYbuZMSEgU5YePcA4-NYnZ3ak7ni5pcz15nBhqyoh8DwZkyU2U5noe9NFzTpwDCszx/" 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/AVvXsEjzh8nhV-uO7GbveDqL6SHi_ktcj_LXzyqhJkiMkIIm2JJBbyFropR-6ml0R0ac9r918a6Hlu_JyPqlL9sNmLEK_dUw5tgrTym82a3DlU5rVdv1gdyqxvetMsSwx_sNl7strrD9KFzWdqCS/" 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/AVvXsEgYxIiSpWVSvCWvDpyBbpBVvRzOOAXm37jhe3nmGQAj3CuRiWJFBbTvJ6Z2X3y9HpE1ZMgZHOuKg3aBuRBBUPs7gbXIOU5rwl06uLXW8yotbl1zKDlhNsMNJ4nrOu0fVEhXUIC1JxptiVkD/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.

Jika sobat tidak punya Icon Silahkan Sobat lihat ini Kumpulan-Kumpulan Icon Keren

Dan sobat bisa memodifikasinya sesuai selera sobat.

Dan jika ada hal yang belum di pahami silahkan tinggalkan pesan di Kotak komentar, dan jangan lupa jika ada kegagalan dalam kode nya silahkan HUB saya.

SUMBER : http://blazerracing.blogspot.com

Tweet