Cara Membuat Daftar Menu Vertikal Dengan Icon Gambar

Ada banyak cara untuk mempercantik tampilan blog kita agar terlihat semakin ENDOL. Tujuannya tentu saja untuk membuat pengunjung merasa terkesan dengan tampilan blog kita.

 

Salah satu cara untuk mempercantik tampilan blog kita adalah dengan Cara Membuat Daftar Isi atau Daftar Menu Vertikal dengan Icon Gambar. Screenshootnya di bawah ini nih:

 Bagaimana cara membuatnya Mas Endol?  

1. Login ke akun Blogger
2. Pilih Tata Letak
3. Tambah Gadget, lalu pilih Html JavaScript
4. Copy Paste kode berikut:

<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/artua/mac/512/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SENDIRI">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge3J8Y9vL9tIGRbq46hz-5nHRaur7JW1hzScy4hO6sfM2df-tY131pxwrJwu0rCG6yDvnh3eUsBzJ4awEGGvB8BHIuWeGTtBkRBqeoLz4cfZayd9uyP9DbNcsmN2rnESP54ADotZ9c0ttT/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="GANTI DENGAN LINK/URL SENDIRI">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 SENDIRI">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 SENDIRI">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 SENDIRI">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 SENDIRI">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGwieFZopH0_PLUYqf4UvnDqIrzGAjg0HnQnD3EXEuj5klhRW7w_a0h0Ao_saiSS5DnRmud3PKEwRRdi1wEkeNog_WdeZd7O2fXKKSn3yZDTb89FaIbA3nzdH_LifM2zppNyVwboFLIC1/" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SENDIRI">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 SENDIRI">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3T1OR7HBJrTypPsRWP1zvKB_XDG5iS5DIWq85A_hbH755bN7t9eFOOMC-WXo0dtdBlCWQ0DzGlMW4Shhx0Revyc2kGwOOooUZAPset7lRpiyMqmWT4R_qyoHzGI5J7fTlqf7MZ1T9-zXP/" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SENDIRI">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 SENDIRI">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOp_c8vN4NDA7zu5HZoyRPIMMbR3JZzUt0Vzc9rahNMwmpEABbrM6YTsOayv-lUolqQzA7WVXJ2U4LoEU_yeYDHEekAN9KxBZd1V2VekbIdt435SQnIUxl7j80rOCxi3pewF7GbPIJYhNh/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="GANTI DENGAN LINK/URL SENDIRI">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 SENDIRI">Koleksi 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 SENDIRI">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

Simpan, dan lihat hasilnya.. ENDOL kan?

Keterangan:
-Yang Berwarna Biru silahkan ganti background nya sesuai selera Mas Endol.
-Yang Berwarna Pink silahkan ganti dengan URL Icon/gambar Nya.
-Yang Berwarna Hijau silahkan ganti dengan URL tujuan atau target.
-Yang Berwarna Merah silahkan ganti dengan Nama Menu.

Cari icon gambar yang cocok dan sesuai untuk blog Mas/Mbak Endol semua, cari aja di Google.
Semoga bermanfaat.

Artikel Terkait

Cara Membuat Daftar Menu Vertikal Dengan Icon Gambar

4/ 5

Oleh Bonita Benz