Membuat Menu Horizontal

Isi blog yang lebih dikenal dengan istilah postingan, tidak selamanya akan membahas satu topik tertentu saja. Walaupun pada awal-awalnya kita memegang teguh hanya akan membahas "ini" dan yang "itu" tidak perlu. Tetapi ditengah jalan ngeblog pasti akan tergoda untuk menulis yang "itu". Apa sebab?

Jika cerita di atas benar adanya, maka saatnya Anda memikirkan memasang menu atau biasa disebut navigasi blog, yang dengan sistem menu ini sangat membantu pembaca blog Anda. Dengan klik menu PowerPoint (misalnya), seseorang yang ingin mencari tulisan tentang PowerPoint. maka blog Anda hanya menyediakan tulisan tentang PowerPoint dalam bentuk daftar isi, begitupun dengan klik Excel maka blog Anda menyediakan semua tulisan tentang Excel. Sehingga seorang pengunjung tidak dibingunkan daftar isi yang terlalu banyak apalagi dengan topik-topik yang berbeda.

Gambar 1. contoh menu pada FB
 

















Gambar 2. contoh menu horizontal
   

Beberapa template secara default menyediakan menu, namun beberapa template lagi tidak menyediakan. Untuk membuatnya ikuti langkah-langkah berikut :

1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu. 
2. Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan.
teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Cara 1. Menu Horizontal Link ke Blog Lain
1. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

2. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

3. Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

Cara 2. Menu Horizontal Link ke Label

1. Login dengan account Anda di http://www.blogger.com/
2. Pada bagian dasbor, klik tata letak
3. Tambahkan gadget baru
Catatan: Pilih tambah gadget yang posisinya di bawah header (kebanyakan blog menempatkan menu pada bagian ini)
4. Pilih jenis gadget HTML/Javascript
5. Muncul kotak dialog Mengkonfigurasi HTML/Javascript
6. Pada bagian Judul, silahkan kosongkan
7. Lalu copy dan vaste script berikut ini

<div id="navcontainer">
<ul id="navlist"><li class="first"><a href="http://bugishq.blogspot.com/">Home</a></li>
<li><a blank="" href="http://bugishq.blogspot.com/search/label/powerpoint" target="-">PowerPoint</a></li> <li><a blank="" href="http://bugishq.blogspot.com/search/label/excel" target="-">Excel</a></li>
<li><a blank="" href="http://bugishq.blogspot.com/search/label/word" target="-">Word</a></li>
</ul>
</div>

Teks yang perlu di edit:

• bugishsq.blogspot.com, ganti dengan alamat blog Anda
• powerpoint, excel, dan word, sesuaikan dengan label postingan blog Anda
• PowerPoint, Excel, dan Word, sesuaikan dengan kata yang ingin tampil pada menu

8. Klik simpan
9. Lihat hasilnya pada blog Anda

Catatan:
Teks target="_" blank atau yang semacamnya menunjukkan bahwa jika diklik salah satu menu maka akan membuka halaman baru (namun beberapa software browser tidak mendukung fasilitas ini). Selain itu, Anda dapat menambahkan menu-menu lain dengan copy salah satu menu yang ada dan kemudian paste pada urutan menu yang Anda inginkan.

Silahkan pilih cara membuat menu horizontal sesuai dengan kebutuhan anda. Contoh pada blog ini menggunakan cara 2. yaitu menu horizontal dengan link ke label
Selamat Mencoba....


Sumber : Trik Tips Blogging dan Bugishq Blog