Ketika anda memasang sebuah template baru, lalu di template tersebut tidak menyediakan widget untuk menu nya. Tidak perlu khawatir, karena kali ini saya akan mengajarkan Cara Membuat Menu Horizontal nya. Menu horizontal adalah kumpulan menu yang berbaris horizontal. Jadi, dengan menu ini teman-teman dapat mengatur isi menu di blog nya masing-masing. Ini sangat memudahkan pengunjung agar dapat menemukan materi atau artikel yang ingin dibaca atau dicari. Meskipun ada gadget Search dari google untuk blog kita, tapi ratarata pengunjung lebih sering menggunakan daftar menu atau pun label. Menu horizontal ini terletak di bagian atas pada blog kalian.
Berikut cara cara membuat menu tersebut :
1. Login ke blogger.com masing- masing.
2. Lalu, klik Tata Letak atau yang versi terbaru blog sekarang yaitu Rancangan.
3. Lalu pilih Edit HTML.
Disitu terlihat kode-kode Javascript yang mungkin anda kurang mengerti. Janganlah pernah mengubah simbol-simbol atau karakter yang ada di dalamnya jikalau anda belum paham. Ikuti langkah dibawah ini, agar pengeditan tidak gagal.
4. Selanjutnya tekan CTRL + F untuk mencari sebuah karakter yang ingin diedit.
Tuliskan dalam kotak search, kode berikut ini :
]]></b:skin>
Maka, akan langsung terlihat kode tersebut didalam edit HTML nya.
Lalu masukkan kode di bawah ini tepat diatas kode tersebut.
.horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
.horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
.horizontal-menu li{display:inline; margin:0}
.horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
.horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}
Lalu klik SIMPAN TEMPLATE.
Tulisan yang berwarna biru, merupakan ketebalan garis pinggir di bawah menu. Bagi teman-teman yang tidak menginginkannya silahkan ganti 1px dengan 0px.
Sedangkan tulisan berwarna orange, Adalah warna background ketika disorot, ketika pengunjung menyorot menu pada blog anda pasti warnanya akan berubah menjadi orange. Anda dapat menggantinya dengan kode warna yang lain.
Selanjutnya yang harus teman2 lakukan yaitu menaruh kode HTML menu horizontal pada elemen add gadged bagian header (bagian atas blog)
Bagi teman2 yang ternyata template-nya gak ada elemen add gadget pada bagian headernya, maka bisa ditambah dengan menggunakan trik yang berada di postingan "cara menambah add elemen pada bagian header", pilih add elemen di bawah header, bukan yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">
<div class="horizontal-menu">
<li>
<a href="http://mediashared-liquid.blogspot.com">HOME</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/Gombal20%Gembel">DAFTAR ISI</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/english-post.html">ENGLISH</a>
<a href="http://mediashared-liquid.blogspot.com/2009/12/arabic-blogger-tutorial.html">
العربية</a>
<a href="http://mediashared-liquid.blogspot.com/2009/12/sekilas-info.html">SEKILAS INFO</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/link-to-this-blog.html">LINK AND BANNER</a>
<a href="http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2" target="_blank">FEED</a>
</li>
</div>
</div>
<div class="horizontal-menu">
<li>
<a href="http://mediashared-liquid.blogspot.com">HOME</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/Gombal20%Gembel">DAFTAR ISI</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/english-post.html">ENGLISH</a>
<a href="http://mediashared-liquid.blogspot.com/2009/12/arabic-blogger-tutorial.html">
العربية</a>
<a href="http://mediashared-liquid.blogspot.com/2009/12/sekilas-info.html">SEKILAS INFO</a>
<a href="http://mediashared-liquid.blogspot.com/2009/11/link-to-this-blog.html">LINK AND BANNER</a>
<a href="http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2" target="_blank">FEED</a>
</li>
</div>
</div>
Klik Simpan
Yang perlu teman2 ubah adalah pada bagian2 yang telah saya tandai denagn warna biru itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex: http://mediashared-liquid.blogspot.com ===>> HOME
Bagaimana...mudahkan?
Mungkin beberapa rekan blogger merasa trik di atas rada susah atau mungkin ribet, maka gak sah khawatir...masih ada alternatif lain, yaitu cara membuat menu horizontal secara instan. Tentu ini hanya membutuhkan waktu yang relatif pendek untuk membuatnya. Oh iya...gak hanya menu horizontal yang dapat teman2 buat, menu vertikal juga bisa...dan kerennya lagi bisa milih2 gaya/style suka2 kita. Biar gak kelamaan, langsung aja kunjungi web: Accessify.com
Berhubung itu webnya bule, jadi teman2 bisa menggunakan jasa Google translate.
Terima Kasih. Jangan lupa komentar apabila ada kesulitan. ^^
