Cara Membuat Menu Vertical Dengan Icon di Blog

1. Login ke blogger 
2. Kemudian klik Tata Letak dan 
3.  Elemen Halaman Ketika sudah berada di Elemen Halaman klik Tambah 
4. Gadget Lalu pilih HTML/JavaScript 
5. Langkah selanjutnya masukkan kode seperti contoh dibawah ini 

CONTOH

 <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/AVvXsEj41Z1fmoH6smI57DaiOGAPTgVDRw25zRwS3A60R4f53N3zdCfNn6QfiPKQJLL-wU_OmvY5ihMr8FAiBmLZuBD805TZ4e0ohXz4rSfh7vgxt7Ur7SYUQGXnawHavH0IlhN07TFt9Fiyh7es/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/AVvXsEhTDpzbPDfb2CBoAYH4pQxzln993M3t8tCipn8On34CP8C-eDzbo0DX1Rvgx2VC0L3UmtZd6ZohjdbZV90N0Kw4PtsTnTnMTglIks47zQKJ_ouBkFO-TkEuZSe0VFSxxPaxAc49F1ArPko8/" 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/AVvXsEgWXnKDpCMuQiglrtoTurVM-2sZjZYjaRbuRpO0JE0245elUJYeqhBkQU9peeWqJoqUTKjaXQ1JnuhiQnJO8baDwIK_PZpTYNa93H4E83hlhmYZfvAq38MNEbeZ5xVMJ1qmiaOTcREdyQhP/" 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/AVvXsEgLZxBLcuQWPbD5rbLn6SRhkxlyvZOGQVfr9BnAGOLTSnonKX00B_-SdJRvYFKV9PRwJ2I7ub1_FBTKlIiysC2GJZPxGVuHgTTXRpd84MOagIg2DOGkDkcVi03X-I5xpVuZ5R2hLPFyUl-d/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>

from : http://biz-zona.blogspot.com/2012/10/cara-membuat-menu-vertical-dengan-icon_5.html

Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan sarannya saya harapkan utuk membantu pengembangan website saya, Kritik dan Saran dapat disampaikan melalui kotak komentar atau Diskusikan Bersama

Berbagi artikel ini Ke : Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 01.51 and have