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/AVvXsEjg7xjfpezEG26JgdH2HAtwg-KCOB5mIK1uBu1oHkF-18abz8AaVW8g2Q9pYg4ijVvbBCaw9KM65q2pewcF-Sdl0oIUVBiPX43D6JQDN_AfD9m4lwHNfj0UuHZQuH7DaKzNT6bE14G17b28/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/AVvXsEjWJrmGtOsYhQ1ArNS4NwgHXYbxx9K-z6ugcnHpkLJbZAlayaNpN37T45vSFw3AzlqzSTCVM9m2hyyo-TvYyQM_DoBEw58dSZK5MOLEQJIWiJ7ti5B8G7gMiQYwXY483PTjyQ1HYOT9S08j/"
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/AVvXsEjMgOsRxd08sblst3ubbepBiITpMg9AJdlyrhBfMD74lqF2Xz62f4Fyl2CECoprmKzioCBsP7AIMMZMLuTx8h_IxmWxm6kIzVwOw6LV0ADmcDf929_j2d_c7F7r1TFLfHpV2WkEqY59VE4c/"
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/AVvXsEj49fNCNAeov4DZcDgCCTw0F6kDxYAu-QwkLqUZQAz0wB1Jo7A-YGUUusam5IaUNKCPnlKmaiZ1LLKolNZsZD8JqRexweu32jC6SMTh5jolUOka3Bmi7THdf7-_T-cvkCL0Vf5fpzldNX_e/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>
- 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.
Posting Komentar untuk "Cara Membuat Menu Vertikal Dengan Icon Di Blog"