Cara Membuat Widget Menu Vertikal Dengan Icon

! Bakalan-Tlogorejo-City -Cara Membuat Widget Menu Vertikal Dengan Icon/Gambar -  Menu vertikal 
atau pun menu horizontal memang tidak bisa di hindari dalam dunia 
blogger. Terutama menu horizontal yang 90% template pasti ada menu
horizontal. Nah pada posting kali ini saya akan berbagi
tutorial cara membuat menu vertikal dengan gambar/icon di blogspot seperti gambar dibawah ini.

Langkah-langkah Membuat Menu Vertikal :

1. Login terlebih dahulu
2. Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
3. Kemudian copy kode dibawah ini lalu pastekan di kotak yang disediakan. Lalu Simpan/Save.

<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="25" height="25" /></div></td>

<td width="97%"><li><a href="#">Beranda</a></li></td>

</tr>

<tr>

<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3iLVICjNKTPuiEV2pU5zkbwQNCEZgPyjOn9Hznvs9ZgVRVSb4DKQMMt9gFZRI44oXRcP5QyAGdcN8jC8pNS2eHZ3tZQdpjUqOCRWpX9jA6GZqX-cHccmo54Ka7152PyNePdKluf17Btr/s1600/report_magnify.png" width="25" height="25" /></div></td>

<td width="97%"><li><a href="#">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="25" height="25" /></div></td>

<td width="97%"><li><a href="#">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="25" height="25" /></div></td>

<td width="97%"><li><a href="#">Widget 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="25" height="25" /></div></td>

<td><li><a href="#">Tips/Trick Blog</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="http://www.downtownstockton.org/images/icon_music.gif" width="25" height="25" /></div></td>

<td><li><a href="#">Download Lagu</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbUY0gnVDtlJZ7C9ZrCoXduW40JnZMYa-900yCumnpNTEzCm85h7G3JdZkdcu1uPXAiqW_N4hTFHxHjEgVRusFHh7ly_CSZkhP4rl8AVYzoQOXDBK6Hko8Un7jFc1ipoAAFp18mQffiwQ/" width="18" height="18" /></div></td>

<td><li><a href="#">Facebook</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZgNkvtHyGR1fBkKr4eg9rUHwqdn6bN5V9yfXHICHRZVD11HYlPGdDaI7f38hIApUKg6NujchicUzvOuH5CHGFzHGca3PGWaLdZOdd1rXzl3N7-cnkeIolB1WIsH_Z1vhIcTeb13AeTKC/" width="25" height="25" /></div></td>

<td><li><a href="#">Twitter</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="http://www.tektrify.com/wp-content/themes/default/images/icon_feedburner_40x40.png" width="18" height="18" /></div></td>

<td><li><a href="#">Feedburner</a></li></td>

</tr>

</table>
<span style="font-size: 80%">Widget by <a href="http://bakalan-tlogorejo-city.blogspot.com/2012/06/cara-membuat-widget-menu-vertikal.html" target="_blank">widget</a></span>

</ul>

</div>

Keterangan :

• Ganti kode warna merah dengan URL icon sobat.
• Ganti kode warna biru dengan URL Tujuan.
• Ganti Kode Warna Orange  dengan nama menu.
• Ganti kode warna ungu untuk mengganti warna background.

Untuk memperbanyak atau menambah jumlah menu, silahkan tambahkan kode dibawah ini diatas code</table>

<tr>

<td><div align="center"><img src="URL icon" width="25" height="25" /></div></td>

<td><li><a href="URL tujuan">Nama Menu</a></li></td>

</tr>

Selamat Mencoba Sobat....Semoga Berhasil.........Salam blogerr

Sobat Blogger sedang berada di halaman Cara Membuat Widget Menu Vertikal Dengan Icon dan Sedang membaca artikel Cara Membuat Widget Menu Vertikal Dengan Icon ini dengan url http://arafcreativity.blogspot.com/2012/06/cara-membuat-widget-menu-vertikal.html. Dan Sobat Blogger juga boleh COPAS artikel Cara Membuat Widget Menu Vertikal Dengan Icon ini jika bermanfaat dan jangan lupa untuk meletakkan link Cara Membuat Widget Menu Vertikal Dengan Icon sebagai sumbernya.