Cara Membuat Menu Vertikal dengan Icon Gambar Di Blog

Advertisement

Sedekah Ilmu, seperti janji saya sebelumnya, bahwa saya akan membagi bagaimana cara membuat menu vertikal dengan menambahkan Icon Gambar agar blog mas bro dan mbak bray mempunyai tampilan yang terlihat lebih profesional.

Ibarat jalan raya, menu blog menjadi sebuah hal yang sangat vital karena keberadaan menu pada blog bagaikan kompas yang dijadikan navigasi atau petunjuk arah agar para pengguna jalan dapat menemukan tujuannya dengan lebih cepat.

Dalam sebuah situs, dikenal dua menu yang sangat populer, yaitu menu Horisontal atau mendatar, dan menu vertikal dari atas ke bawah, sebelumnya saya pernah memposting cara membuat menu Horisontal dengan icon gambar, jika mas bro dan mbak bray belum membacanya silahkan membacanya pada artikel

Cara Mudah Menambah Icon Gambar Pada Menu Blogger

Untuk membuat sebuah menu vertikal dengan icon sangatlah mudah, apalagi jika mas bro dan mbak bray meggunakan template yang mempunyai sidebar disebalah kiri, karena menu vertikal akan terlihat mantab jika diletakan di sidebar sebelah kiri.

1. masuk ke blogger
2. pilih edit tata letak
3. pilih tambah widget/add widget
4. pilih html kemudian pastekan kode dibawah 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%"><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Home</a></li> <br /> <br /> <br /> </td> </tr> <tr> <td width="3%"><div align="center"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTE2aeIakfC2gp6TzhjLv_JIW019kKP2dxsgizkkrO3lkGZsgcnHZaHty0-kjCziVC9OFrUyCOqWx93BIXn8PBCyQhcmvOdKy0w1dUnwtlP6BvxSlc8fAKQpUOoS6Rf_TBRyTs75kBLPln/s1600/report_magnify.png" width="18" height="18" /></div> </td> <td width="97%"><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Daftar Isi</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Download Template Blog</a></li> <br /> <br /> <br /> </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%"><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Tutorial Blog</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Tips Blog</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Kode Warna</a></li> <br /> <br /> <br /> </td> </tr> <tr> <td><div align="center"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFdWOcrOMAqvbEDVEFV-GiCW-_Ua0xSDw3G_bhY9J85QgXSEZ933oqM3PkqkfGe5MbKldMQnNY6-sjOqGTeWDm3VK8jKz0AzIbbykMm60N9BnxqzGvE5q3Q9KC0uCxPe0bNK8Phyhg3Ky/" width="18" height="18" /></div> </td> <td><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Twitter</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Tukar Link</a></li> <br /> <br /> <br /> </td> </tr> <tr> <td><div align="center"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPz9FyTEuZZbbB8LRO8xwrl4fSUFT-SqJwfTKD4zPTGP7jhwur14R35MAgk1imbof_ilpqgVn-0tdiJXgBOdAjYhXkIshbx_zIyYdnCFdJ_B8sjlMhH5V5XBYwFG1KN5D9wtadrxgybfEO/" width="18" height="18" /></div> </td> <td><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Facebook</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Advertise</a></li> <br /> <br /> <br /> </td> </tr> <tr> <td><div align="center"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWzSbdudl-pvinAp6pEhHAGmSN7siakFCi8o96J1R217ks8Ah1ZS0VdMg3wvEqbF5QPlM5H8UVyvoyAO_p73VeNodQZhK25WcQgg78NnkW5i_x08wvTqhyzPZ_ql-xCOrO6QXr6brXFyQC/s1600/feed_burner.png" width="18" height="18" /></div> </td> <td><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Feedburner</a></li> <br /> <br /> <br /> </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%"><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Kumpulan Icon</a></li> <br /> <br /> <br /> </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><br /> <li><a href="GANTI DENGAN LINK/URL SOBAT">Contact Us</a></li> <br /> <br /> <br /> </td> </tr> </table> </ul> </div>

Silahkan ganti link tujuan menu sesuai dengan link mas bro dan mbak bray

kemudian Klik Simpan dan Lihat hasilnya
semoga bermanfaat bermanfaat
.