Sudah beberapa postingan dilewatkan sejak mengganti templatedan domain blog ini, inilah pertama kalinya dengan domain www.berbagidisini.com untuk sharing blogging tips yaitu "Membuat Menu Vertikal Dengan Icon". Mungkin saya berbagi trik yang satu ini agak terlambat, karena saya dilihat sudah banyak teman-teman yang lain untuk mengambilnya dengan membongkar page source blog ini, tapi itu tidak masalah bagi saya. maaf ya telat...hehehe...
Menu vertikal merupakan salah satu cara pintas yang bisa diterapkan pada blog untuk link favorit agar mudah mengaksesnya, membuat menu vertikal dengan icon ini cocok digunakan pada template blog yang memiliki sidebar blog yang tidak terlalu lebar. Membuat menu vertikal dengan icon ini merupakan inspirasi dari Yahoo.com, inilah menu vertikal dengan icon versiberbagidisini. Bagaimana cara membuatnya? yuk kita ikuti langkah-langkah sebagai berikut :
1. Login akun blogger anda terlebih dahulu
2. Pilih Design>>Page Elements>> Pilih Add a Gadget kemudian pilih HTML/Javascript
3. Copas kode berikut pada gadget HTML/Javascript tadi :
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Rrf1tZvS2BeIJ5EfV0nahb9A3YgchYQiEKu_cRx6ysR2xXQl1CTsQns9igPmtgu5ulfR52vMsU3cIohv_mcf7dhFObmLGZlx1lwtcwOXRoVzaCAKfGGfuSkDu4Ls_13clv4ZGBxpNvxF/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://www.berbagidisini.com/2009/09/tips-dan-motivasi-mario-teguh.html">Daftar Isi</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJC09SrG61xijuoPO3j5p1M6aLC-d0eBq1YlakKFBOeHOQlCTVQ-_Di_9xkX99mJn8dtxYUnD6u6LGvBhT_VTnr6SxWOdB4KyiVFlfGIonSQPwl2QRemDgdfrImYj-Q_dsYqOLmiTzEJvc/" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://www.berbagidisini.com/2009/10/pasang-bannerlink-sobat-disini.html">Link Exchange</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmK62UNUlGboXB14IfgEie0knB4Pg0Gci4maDnhbv5Y6bgffTQIoLIlWsw1wl0lsELTnl-icw7MEpMv4fkzF89faGHNKcmnoA4QIwMI-KbVRuBiLMaeA2onoQqkIj_QItWQBuphduYK9j/" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/endafivers?format=xml">Live Bookmark</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvNmC2I6fRSVmhn-8N2yaLlbG3jbhZG65J4zj3X1w-AByam8azQesOqCKXgzyeLDO3fZkhfx53kpuxO4-fU3284nbB1qG8OTsbA8q1Uh2vD95ii0RNGmcSVCEAr_r0Lh6ADgPP59Odps_R/" width="18" height="18" /></div></td>
<td><li><a href="http://www.gmail.com">Mail</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lFfjynX9cZJlMGTsicsx1BIUrmkic9beF6LuTZ6cws54PDyo3UJVf-0Vt2NMMgQmK6cQgyUbu4fxC6LZyGarsNclqnhmGeCfB23rleOVYpczL6IySo8uMq7RS5WYopZSfpLi8koORJ_M/" width="18" height="18" /></div></td>
<td><li><a href="http://www.facebook.com/enda.fivers">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWxxSRikIuFQ_F8VQap5i30gpC750lIEXsm-NBdSCMtrK46PiHn02E4coQ-aGQ18jXj9QfOJ-5Y0fNPJLTUB2mKCQXUtNkm5DX3ibQdw6IK6lS-LvXQl5XShv_M9ncRSHgJ-fFmMikOdiO/" width="18" height="18" /></div></td>
<td><li><a href="http://www.twitter.com/endafivers">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrffTiiZG9SuyaIHZ2bHmLZ60gABQx1IRfNlukA6f6eowbS88WAMXXgxVuwdsLKAKE5nKpeOCGSCZHwgA9xEd4inbs5oFC56cu0-IJppCsBXxogppCHKODzsKJvaFEJiKQTagvbC1xFvYi/" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2010/03/followers.html">Followers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xChofvzfBHp3B4VxPFy2hpLMQIdVlmP6NmemcYT4OQoIzGOO5tl0yIHm1L68DDilcMQ-vzrEl5LrDOvzKyXQntMK1BFiOj2ObOcNC6jL4xEWmTFnjvWMiaR_8DCIU9Apnm_ir2Q4VuUQ/" width="18" height="18" /></div></td>
<td><li><a href="http://www.yahoo.com">Yahoo</a></li></td>
</tr>
<tr>
<td><div align="center"><img alt="Five Minutes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpU6bNxwBr-l995A93H5o0wDzozcQYbqF6azmu82xA4rcWBEL-3Bl_-486iy1Xd7HyBgGnqpnWMevJ91ZvAiXBO_QGNrFs2WUr-VsIF4ddB_6_j8PcQW1CklhnJAeMUmYF9S1MabpRKKf/s1600/Fivers.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.fivers-pekanbaru.com">Fivers</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithHlxqQB_AD68EQn-4TuYYpeN-t2tF2Dh_ha1swDBYMHjIOo9ZqaU0rGhUt4TYdE8cLIyql5MHDZrHVm34WfsNgCLN9IIYxUEOzDSqiVqDa1nJTbfEGGFG3trWLS5YXKsrUZRCRemEUeQ/s1600/music.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2009/09/dengerin-lagu-five-minutes.html">Music</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60sYCFwix8vvpCBpbeP_hXW203s0s-QaiMACMhpNGjtVXsZ_ch8squsFWHhiu1gXoRZ6UmpEHVewGYoH-Pxg4sDkGwzMzpEYZEzNwq5zuCHP0i5CX3n15MKUYAQVBKD2CJriismAd1ema/s1600/video.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.fivers-pekanbaru.com">Video</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_rQ4gjc7OvJZYqs0rqoBgmBsrgW_JbdLYtjxXFmQ_88pxsX1awNBerIu-nplLjKn_nNgrnfL0x2pGt9qF1xRaznQjQLP9ofzwUu_YZ7w2fnuGllDY7gTnhccycPaJWFtSSIQzvbypM5CR/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://feeds.feedburner.com/endafivers">Feedburner</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSxsMAXTTU90Byly1aNwDTVQAXGBtvYtOARlw4yzLe-NKeX5qhcb8eCHjD0gkjT18IRUK5q4IbGOKVdNGkEOREM9f25L5cn-yeWDLDWU5RsZl3I7klXH58nSp_cWbJ93Rq2xlB-Jol8at/s1600/chat_2.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2009/03/chat-room.html">Chat Room</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJN7txLVyMwE9Ou11U-o4dPygB5vmSRm6ExLtRmYvOgC_reMSwMZ5OZuYvL397j1phnW3autTpoUWSe87i9Xhcr1LkV3swPwpZ4-REgcMDTkWNDGrRYTm__L4vo0TPKgWDwEZQ_MuzR8c8/s1600/download_folder.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2009/09/new.html">Download</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IezHg6xvw6rvCRapyE9RGf-YzsaU_HZOUcZy4l2l9b0Y9woHdDAaqJRrRYOqb8j0I7KrnHwhsRCmmmY6qRuSnFe0mZDMR-fjgDJWzrhcFARYbLNUYK-8H-vTnOHrZ8xQutNCMhLLwmJ6/s1600/google_youtube.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.youtube.com/user/endafivers">Youtube</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8H6g7u9D7uhuJuykjfxpMOuBvuCHAu82eC7amNIu8FrpFaqaQjHoTOZE4JhYy8flZBy-6IOE4HgW3tAEaY0bq_g2ZBOJccsb6IH1THj7RRMkffCnZJzQOI1ti7ueokOFUIpUnJumg24C/s1600/radio.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2011/01/radio-online-enda-fivers.html">Radio</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtT9oH06FRFE1hRfvL9k_AJaVeRimThE1hb2cbKrR6WAfEsB5ZKuhchG5J9vq0CzzRwdlKuQH9otppgOVIakbtd1JyY5PNoda25jUuGKZyAwmW7MqyOnmZZOetyhodCQb5XdBq79OXrSD/s1600/tv.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2010/06/tv-one.html">Tv </a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0vi07fACkL4YE2pfX2FDC_M7WO1FgFQ58mXjIL2vyBO24lR3zD_rxwX2Jj60mqyq-eBTPCiNpIoOFI0T4fvkg188_RWkrVt7hyphenhyphenW1x3daK0uQMxDGYihbeOFdLuyRutWjRqyV3GNH6KjH/s1600/widget_badge.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/search/label/Widget">Widget</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubZQwH3doOonTP4E6ProhSs_Vtfn83VU0Il5wdJq5WasS4IQ8H4qyBpfc4RAzVhDVAhmq7K1-llj_UAlIuGhOEoKknfSI4yZFU0qx7EYV47UDkFAb7aWsrlKj0nXzRddgf5wdGIYkPZzF/s1600/people_online.png" width="18" height="18" /></div></td>
<td><li><a href="http://www.berbagidisini.com/2009/03/chat-room.html">User Online</a></li></td>
</tr>
</table>
</ul>
4. Simpan dan lihat blog.
Sangat mudah bukan?? tapi tidak hanya sampai disini saja, silahkan untuk merubah nama menu dan link tujuan sesuai yang anda inginkan. Perhatikan catatan berikut ini :
* Untuk mengganti Icon silahkan ganti URL imege yang berwarna biru pada kode diatas.
* Untuk mengganti nama menu silahkan ganti text yang berwarna merah.
* Untuk mengganti link silahkan ganti tulisan yang berwarna hijau.
Semoga ini dapat bermanfaat bagi kita semua, silahkan dikembangkan lagi untuk yang lebih baik.
salam
0 komentar:
Posting Komentar