cara membuat menu dengan tampilan icon gambar

Cara Membuat Menu Dengan Icon Gambar Di Blog
  - kali ini saya akan berbagi  artikel tentang trik lagi, Tentu nya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik, Cara nya yaitu dengan Menambahkan Menu Vertikal Dengan Icon/gambar.


 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilan nya dengan icon/gambar.
nah sekarang saya punya trik untuk sobat semua supaya tampilan menu sobat di blog jadi lebih menarik dan bagus lagi, sobat bisa pasang Menu Vertikal Dengan Icon/gambar.


Sobat lihat saja tampilan Gambar di samping posting ini.(klik saja untuk memperbesar dan melihat gambar dengan jelas.)

gimana... Menarik bukan...???

 jika sobat sudah tidak sabar lagi ingin memasang Menu Vertikal Dengan Icon/gambar di blog,,,
okelah kalau begitu kita langsung saja menuju ke TKP.
hehehe...

Berikut cara-cara nya :

1. Login Ke Blog sobat.
2. Pilih Rancangan Terus Pilih Elemen Laman.
3. Add Gadget HTML Java Script.
4. Kemudian Copy dan paste Kode di Bawah Ini.
Jangan sampai ada yang terlewatkan.!!!

<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="GANTI DENGAN LINK/URL SOBAT">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6c2V-vq82P799Y9YlFpRn_qmWRhly65cF0M9dMZAWCMnf3t6q7WLZvr79-PPIcA80H0qoCAZMD6loaWTfyY0LcCyooazEAXkUAjhlXIlfx6j-XIqtn1FpfP912QE7XfIjXV8AE3r2UvM/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SOBAT">Daftar Isi</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="GANTI DENGAN LINK/URL SOBAT">Download Template Blog</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="GANTI DENGAN LINK/URL SOBAT">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="GANTI DENGAN LINK/URL SOBAT">Tips 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="GANTI DENGAN LINK/URL SOBAT">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAdon8hy6UbrBhDrrgjduyYw-o03WIdMWMFETt93rR-A7tLTn3iUFR9Bo6QcmiQOpbthyphenhyphenW_ASxZ0WJQwcBwmqcMAIkMJRtgfkYIPRflcGCyt10ZksE5prvfIYopz5Hc_e48EJQ821qa4//" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Twitter</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="GANTI DENGAN LINK/URL SOBAT">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiusxVA-6g7ovnMvMeA1ZPVJJfD2iS3fOUh0lCwlr-CDa5z5bqJxwMyS_4NTgyZmq1ZdyemDFqYAgFyakdAHvD2qyxZNLK_kPhoT4shFzNKpMko_WWR7mnJilBijV68rSazN7mxXdX1LrY//" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Facebook</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="GANTI DENGAN LINK/URL SOBAT">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsx1-xINiWCd1l0a-V3jYGQaZ_468dRLrf5p4rr2DpsIOD-yCCC6tdQH6Gzx6mlNyD8r86rFLX2v8IJJ9AVvQMGfmuuJG-7L9ib9XmFysrc5kbTJqCzYYzJNoQm26J1ATB8lv8Clb4WM/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SOBAT">Feedburner</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="GANTI DENGAN LINK/URL SOBAT">Kumpulan Icon</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="GANTI DENGAN LINK/URL SOBAT">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

5. Save/simpan dan selesai.
Silahkan sobat lihat hasil nya.

Keterangan :

-Yang Berwarna Biru silahkan kamu ganti background nya sesuai selera sobat.
-Yang Berwarna Pink silahkan sobat ganti dengan URL Icon/gambar Nya.
-Yang Berwarna Hijau silahkan sobat ganti dengan URL tujuan atau target.
-Yang berwarna Merah silahkan sobat ganti dengan Nama menu.

jJika sobat tidak punya icon/gambar,bisa sobat dapatkan di situs resminya di sini www.iconarchive.com