Monday 1 August 2011

Membuat Menu Vertikal Dengan Icon

Sudah beberapa postingan dilewatkan sejak mengganti template dan domain blog ini, inilah pertama kalinya dengan domain 4-jie.blogspot.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 versi 4-jie. 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/AVvXsEimxGFlUof-rDciUVPJuVLXk6cMORWIFfym-squaoGHDlq8q14g_zXBvvuN_hb4Tc349iKSlITPwwR8VBbl9APGVx2_WSZRx3hSrxgKAZ8YXiXlUbjvQOv5idbRhKZ-H7m1ZdBjrHU-lpqJ/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://4-jie.blogspot.com/search/label/Alexa">Alexa Rank</a></li></td>
</tr>

<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlbE1NFpKyn-AwAORnQqyr4RH0IKpPyWSbnFqjeVN81L8Mzfn-d2dtmHmyf2W8639XeN6lNp-AH9hNS5buIwDNuZbYbqRXSLqZuOZHRCkuwH8T8V7sdoJpihGiZ0iH1M3zFXZQ6zrOM2t/" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://4-jie.blogspot.com/search/label/Backlink">Backlink</a></li></td>
</tr>

</tr></table>
</ul>


4. Simpan

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.

9 comments:

  1. berkunjung kawan, wah simpel, ane copas gpp ye? tp ctrl D dulu =))

    ReplyDelete
  2. ini dia yg sy cari2...thnks bro...

    ReplyDelete
  3. Nanya mas,, masang menu tsb merusak deskripsi blog gak? Maksud sy,, saat kita share di fb misalnya,, yg muncul deskripsinya malah menu tsb. Gmn solusinya? Thx

    ReplyDelete
  4. @ANEKA SAINS sama sekali gak ada pengaruh gan, dicoba aja :D
    efeknya malah membuat blog anda tampak lebih rapi gan

    ReplyDelete
  5. Ane coba share slh satu link artikel ke facebook,, tp munculnya bukan deskripsi artikel tsb tp malah kode html template, gmn gan?? skrinsotnya -- > http://i1193.photobucket.com/albums/aa354/teguhhhhh/screenshot.jpg bisa kasih pencerahan gan ??

    ReplyDelete
  6. @BISNIS BARU Itu terkadang ada beberapa faktor yang mempengaruhi dan membuat kode seperti itu muncul...
    1. Kode facebook like yang salah dan tidak sesuai
    2. Meta Tag yang bad setting
    3. Templates

    itulah prediksi yang admin amati :D

    ReplyDelete