Cara Membuat Menu Dengan Icon Gambar Di Blog

 Cara Membuat Menu Dengan Icon Gambar Di Blog - Setelah kemarin saya posting artikel tentang trik Cara buat Daftar Isi Dengan Label Tertentu Di Blog, Dan kali ini saya akan berbagi  artikel tentang trik lagi, Tentunya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik. Caranya yaitu dengan menambahkan Menu Vertikal Dengan Icon atau gambar.

 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilannya dengan icon gambar.

 Nah sekarang saya punya trik untuk sobat semua supaya tampilan menu di blog sobat jadi lebih menarik dan bagus lagi, Sobat bisa membuat dan memasang Menu Vertikal Dengan Icon gambar.


 Agar sobat tidak penasaran dengan tampilan menu yang menggunakan icon gambar, Sobat bisa melihat contoh gambar screenshot di bawah ini, Atau melihat langsung pada blog DEMO KUCOPAS.

DEMO

 Jika sobat sudah tidak sabar lagi ingin membuat dan memasang Menu Vertikal Dengan Icon gambar di blog sobat, Nanti saya akan kasih tahu caranya. Karena caranya terbilang sangat mudah sekali untuk di pahami, Asalkan sobat mengikuti langkah-langkahnya yang akan saya jelaskan dengan cermat. Okelah kalau begitu kita langsung saja menuju ke TKP. huahh...

Berikut langkah-langkahnya cara membuat dan memasang Menu Vertikal dengan Icon Gambar di Blog:

1. Silahkan sobat >> Login atau Masuk >> Ke Blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blog baru, Pilih menu >> Tata Letak >> Tambah Gadget >> HTML/Java Script.

3. Kemudian masukkan semua Kode di bawah ini pada kotak HTML/Java Script.
Masukkan semuanya dan jangan sampai ada yang terlewatkan ya sobat.

<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://kuc0pas.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLUo9bBRDHzEYfl2iXmf4f_nBr9WYNzZpBvrJ-NhaiSTj-rePutDNaSuhxrXZ997ZmSFXNpQisFwdTq4wjS0CcHBRdnBzf5Pg5MoOsQUCd3jI7o7YGsyCwqT5n3ze9PAsNcXeSxO6Iq3c/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">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://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwItpoUtvHaTH6YJWcZKY9o6_hmfEJJ-idTLXydIeuvFzMsFVsUa2PSTeUCjUK_Q8nWnDGPK7BBcVlBhqCbVMAPW5wnidPm39oqRZ03k9TcX8LX_9AuiQhNr05gIxaeUUs9_h5GWdF-o8/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg01mhnU4PkC5LRXKA09QfeLxS5JKFNJoKQblaG-gdyG19qDFnmboOUpqkj9oXE5qV8_oODow12sQQ05fbkhDRn-vp787_S7N1wzUslwPB-LnKAVXnr2oUJY9h0SNcxssHwkqdq8jOilPDK/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVpD9SczL20EPQI9uXcYbKWxfhx8P31QsyAQb4wXcSrDFuY8mdQbHZtSXS4WQH4pScXo6dUEL-PY14Re75Wm5I1SwbJa_HJVUKTqNrpR739lcx_Mk6gdkWROkO2mPGPuqp0U8oaihPGpP/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">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="http://kuc0pas.blogspot.com">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

4. Setelah semua kode sudah sobat masukkan pada kotak HTML/Java Script, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan :

• Berikut keterangan beberapa Kode yang bisa sobat edit atau ganti:

- Warna Biru silahkan sobat ganti warna backgroundnya sesuai dengan selera sobat.

- Warna Pink silahkan sobat ganti dengan URL Icon gambarnya sesuai dengan keinginan sobat.

- Warna Hijau silahkan sobat ganti dengan alamat URL tujuan atau target Menu.

- Warna Merah silahkan sobat ganti dengan Nama Menu yang ingin sobat tampilkan.

 Jika sobat tidak punya atau belum punya alamat URL Icon atau gambar, Silahkan Sobat bisa lihat dan pilih-pilih Kumpulan Icon Keren DISINI. Sobat bisa memodifikasi icon atau gambarnya sesuai dengan keinginan dan selera sobat.

 Semoga tips dan trik blog tentang Cara Membuat Menu Dengan Icon Gambar Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...