Minggu, 15 Januari 2012

Cara Membuat Menu Vertikal Dengan Icon Di Blog


By on 21.29

Cara Membuat Menu Vertikal Dengan Icon Di Blog - Setelah lama saya tidak memposting Tips Dan Tutorial Blog kali ini saya akan berbagi Tips lagi supaya Blog kamu terlihat cantik, yaitu dengan Membuat Menu Vertikal Dengan Icon, biasanya yang kamu temuin hanya menu vertikal saja tanpa dengan icon nah sekarang supaya lebih bagus pake icon donk, langsung ajah deh ini dia cara-cara nya.

  • Login Ke Blog kamu.
  • Pilih Rancangan Terus Pilih Elemen Laman
  • Add Gadget HTML Java Script
  • Copy Kode di Bawah Ini

<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="http://blazerracing.blogspot.com">Home</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="18" height="18" /></div></td>
<td width="97%"><li><a href="http://blazerracing.blogspot.com/2011/12/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="18" height="18" /></div></td>
<td width="97%"><li><a href="http://blazerracing.blogspot.com/2012/01/kumpulan-kumpulan-icon-keren.html#id">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="http://blazerracing.blogspot.com/search/label/Tutorial%20Blog">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="http://blazerracing.blogspot.com/search/label/Tips%20Blog">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="http://blazerracing.blogspot.com/2012/01/dowload-free-template-blog.html#id">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://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/Blazer-Blog/193419544081467">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="18" height="18" /></div></td>
<td><li><a href="https://twitter.com/#!/eclipspain">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://2.bp.blogspot.com/-w5urf_m-J5A/TXoVtRLo8AI/AAAAAAAABWY/JIR1Esypfdc/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/blogspot/ZqAec">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="http://blazerracing.blogspot.com/2012/01/informasi-pasang-banner.html#id">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="http://blazerracing.blogspot.com/2011/12/conatct-us.html">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

Keterangan :

  • Yang Berwarna Merah silahakn sobat ganti dengan URL Icon Nya.
  • Yang Berwarna Biru silahkan sobat ganti dengan URL tujuan atau target.
  • Yang berwarna Ungu Muda silahkan sobat ganti dengan Nama.
  • Yang Berwarna Hijau silahkan kamu ganti background nya sesuai selera kamu.
Jika sobat tidak punya Icon Silahkan Sobat lihat ini Kumpulan-Kumpulan Icon Keren
Dan sobat bisa memodifikasinya sesuai selera sobat.
Dan jika ada hal yang belum di pahami silahkan tinggalkan pesan di Kotak komentar, dan jangan lupa jika ada kegagalan dalam kode nya silahkan HUB saya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

13 komentar:

  1. waah ane coba ya gan menunya, terima kasih

    BalasHapus
  2. mantep gan keren banget menunya 0-0p

    BalasHapus
  3. Terimakasih yah atas kunjungannya.....

    BalasHapus
  4. nice post sob keep posting

    visit mine ya
    http://updatepengetahuan.blogspot.com/

    BalasHapus
  5. waduuuh, panjang bnget scriptnya,,,
    pasti bikin berat

    BalasHapus
  6. Ga Ko Gan Buktinya saya Ga Berat Ko Gan.

    BalasHapus
  7. aduh ksana kmari cari-cari beginian (menu vertikal) eh dapat disini..trimaksih mas bro..
    good luck trus brkreasi

    BalasHapus
  8. Ya gan sama-sama dan terimakasih atas dukungan nya

    BalasHapus
  9. cari baground nya dimana mas????????

    BalasHapus
  10. Cari background gimana mas, atau maksud agan mau nambahain Background nya gimana, jika mau pake background cukup ubah kode
    - background:none;
    menjadi
    - background:#kodewarna;
    atau mau pake url gambar
    - background:url(url gambar nya);

    BalasHapus