Kamis, 24 Oktober 2013
Browse Manual »
Wiring »
cara
»
dengan
»
icon
»
membuat
»
menu
»
vertikal
»
widget
»
Cara Membuat Widget Menu Vertikal Dengan Icon
! -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.
Keterangan :
Selamat Mencoba Sobat....Semoga Berhasil.........Salam blogerr
Cara Membuat Widget Menu Vertikal Dengan Icon
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 :
- Login terlebih dahulu
- Klik Rancangan >> Elemen laman >> Tambah gadget >> HTML/Javascript
- 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/AVvXsEi6CZ8s0WzXZVPcxieYNWBonVcbX9TndrIV6ElAq87K780xuvw63QkhzdxZ-M2qbMCGHe7A6GDqAEFd8IMKeSPqVIQVortqMRV7j_RsALxjxvl0iUABCOcmcNTT4GLc0a8w3hXxjbu6vEiF/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/AVvXsEj4cej8iMlrjROIo3wGItYSmA2rF-jDNOKrNEKevxOpJmVLNSaLQ1xEImJNoWsooJJnLbuTIMWwmkFZyclRl9x-asvn_scAtvJbckBwiWPRM-fCZH8BiAFbwmKz_mRLcXD1toEknr-15cOB/" 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/AVvXsEhJWqT1OK0_XJWSaxotFeHfpdBHLXoV2y33eahcg4sReblni7pL64WAKMCFV_4oAh1w4VWW-L2ZaC41WAzJ7CUUkdobkTT7EWB_ABks2mUyRBh_NldEaSYXdJJ3uAEiPCLeYpxZxTbme0L9/" 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://.blogspot.com/2012/06/cara-membuat-widget-menu-vertikal.html" target="_blank">widget</a></span>
.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/AVvXsEi6CZ8s0WzXZVPcxieYNWBonVcbX9TndrIV6ElAq87K780xuvw63QkhzdxZ-M2qbMCGHe7A6GDqAEFd8IMKeSPqVIQVortqMRV7j_RsALxjxvl0iUABCOcmcNTT4GLc0a8w3hXxjbu6vEiF/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/AVvXsEj4cej8iMlrjROIo3wGItYSmA2rF-jDNOKrNEKevxOpJmVLNSaLQ1xEImJNoWsooJJnLbuTIMWwmkFZyclRl9x-asvn_scAtvJbckBwiWPRM-fCZH8BiAFbwmKz_mRLcXD1toEknr-15cOB/" 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/AVvXsEhJWqT1OK0_XJWSaxotFeHfpdBHLXoV2y33eahcg4sReblni7pL64WAKMCFV_4oAh1w4VWW-L2ZaC41WAzJ7CUUkdobkTT7EWB_ABks2mUyRBh_NldEaSYXdJJ3uAEiPCLeYpxZxTbme0L9/" 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://.blogspot.com/2012/06/cara-membuat-widget-menu-vertikal.html" target="_blank">widget</a></span>
</ul>
</div>
</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>
<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
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar