Membuat deret menu vertikal kebawah dengan icon gambar

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="http://karaokebatak.blogspot.com">Beranda</a></li></td>

</tr>

<tr>

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

<td width="97%"><li><a href="http://karaokebatak.blogspot.com/2012/04/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="25" height="25" /></div></td>

<td width="97%"><li><a href="http://karaokebatak.blogspot.com/2012/05/kumpulan-icon-untuk-blog.html">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="http://karaokebatak.blogspot.com/search/label/widget">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="http://karaokebatak.blogspot.com/search/label/Tips%2FTrik%20Blog">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="http://karaokebatak.blogspot.com">Download Lagu</a></li></td>

</tr>

<tr>

<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9clSePEFf_DKr2EMZXIL9txVwa3g6RQ_EdQtZ9vr-T2igo6u8VKHCdTK4Dz59z2NZphkrfvqzrPP_kPhMtFYUAtNMKtk4lBNIfGKGEwU31dMAt7RbFw08K1j752M_XzxXaa8gO-2bBcQf/" width="18" height="18" /></div></td>

<td><li><a href="http://www.facebook.com/pages/Batak-musik/168226019959239">Facebook</a></li></td>

</tr>

<tr>

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

<td><li><a href="https://twitter.com/batakmusik">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="http://feeds.feedburner.com/HalakBatakMarlagu">Feedburner</a></li></td>

</tr>

</table>
<span style="font-size: 80%">Widget by <a href="http://seniblogger.blogspot.com/2012/05/menu-vertikal-dengan-icongambar.html" target="_blank">jemz</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.........

sumber: Cara Membuat Widget Menu Vertikal Dengan Icon/Gambar