Seni Blogger Pemula
4 komentar

Menu Vertikal Dengan Icon/Gambar

Cara Membuat Widget Menu Vertikal Dengan Icon/GambarMenu 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="http://1.bp.blogspot.com/-blhPS6EkPTA/TXnHCD-Rj3I/AAAAAAAABUg/l5cSTY_mWOs/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://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn3gOy2oI/AAAAAAAABUA/cfUmuLowAq8/facebook.png" 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://lh6.googleusercontent.com/_yF0--u7KSSI/TXmn4Snr7BI/AAAAAAAABUQ/LQ-EYuN02hg/twitter.png" 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.........

4 komentar:

yoga gjhenqydhama mengatakan...

nyimak aje nie...
keren gan
follow blogqw ya?
http://yogagj.blogspot.com

NABILA SHOP mengatakan...

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

Arramaheng Lct mengatakan...

Thx atas infonya,,,,

Jau Hari mengatakan...

mantaap nih... tq gan ...
mampir yah..

Best viewed on firefox 5+

Entri Populer

Daftar Isi