Assalamualakium sobat semuanaya... Cara Membuat Menu Vertical Dengan Icon di Blog, bagaimana judul artikel kita kali ini ,,,? yah , kali ini kita akan belajar membuat Menu Vertical dan agar tambah cantik,, kita gunakan Icon untuk menghiasinya. Cara membuat menu vertical ini sangatlah mudah, kita juga bisa menaruh menuh vertical ini di mana saja kita mau ,, mau sebelah kanan, kiri, atas atau bawah,, terserah selera sobat saja, Ok tanpa panjang lebar langsung aja kita ke TKP :
- Menu Vertical Dengan Icon di Blog :
- Login ke Blig sobat
- Pilih Rancangan
- Pilih Tata Letak
- Pilih Add Gadget
- Pilih Html/Java Script
- Copy Code berikut
<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="ALAMAT WB TUJUAN">Home</a></li></td> </tr> <tr> <td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvB49xtYAIJQb2LZeLtkI3sqR-27_B0rJ8py4dabpo7RGp8p2Cr7YZJtVpndBHuwy6Ha5mwXgjKirvl5QOp8ypKbsTfOsTfF0sHUZ01qrJFRx8sH3nscIUFDaSw-QERTXxGFgYDSPl5Bi1/s1600/report_magnify.png" width="18" height="18" /></div></td> <td width="97%"><li><a href="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">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/AVvXsEis0jf-v0uWsivyuLOgfnAKf1_JKuJ9is9FstxJVgcHYd_5enNtIHsRv-WS5N01GXVycyGJHfC_fdOszHsLS789N4WBjBXp4Tm1AF6fbYT2OCj6GlHRu4dZ-tjoe8DO9548Df5-lCy0lVh2/" width="18" height="18" /></div></td> <td><li><a href="ALAMAT WB TUJUAN">Facebook</a></li></td> </tr> <tr> <td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh55S3upQFsaK4gBbyo4N5KLOEAtLeEp0r0jqHFdTAcbVj7l6Egl96y6jDBYy9VyHU65FxGwcEUKtVrZ5-5p5LoYVXoUuJrLXjPdQRf16Gqa605SyB2pKT-cVegin-k96npH8am5UJGUjpT/" width="18" height="18" /></div></td> <td><li><a href="ALAMAT WB TUJUAN">Twitter</a></li></td> </tr> <tr> <td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNBeBd56cW38jKvDLqDP9CSAg0epNzUrPDnMlB9UEn7TcJ4oOOXvxHJGxeSZ8yFmMGeRkctE27gw9ANBioeBP9UTnLww-CuQWslvYt-iZay_lasuLu-0OQ9K5xfpu-TzxpAKT7G7YDQvhY/s1600/feed_burner.png" width="18" height="18" /></div></td> <td><li><a href="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">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="ALAMAT WB TUJUAN">Contact Us</a></li></td> </tr> </table> </ul> </div> |
- Yang berwarna Merah silahkan sobat ganti dengan URL icon sobat
- Yang berwarna Biru silahkan sobat ganti dengan URL Tujuan
- Yang berwarna Ungu Muda silahkan sobat ganti dengan Nama
- Yang berwarna Hijau yang paling atas sobat atur background sesuai selera sobat
Kalau sobat memerlukan Icon,, sobat bisa berkunjung ke www.iconarchive.com disana ada banyak icon yang bisa sobat gunakan. OK kalo udah sobat tingal save aja ,, dan selesai deh, selamat berkreasi ya sob
