Cara Membuat Menu Horizontal Berdasarkan Label

Add caption

Label secara default adalah list item, daftar yang sifatnya vertical dan dibelakang label diikuti angka dari jumlah isi label yang sama. Jika ingin mengelola label menjadi menu yang horizontal, maka dibutuhkan kode CSS yang bisa mengelola tampilan label terlihat mendatar.

Membuat Menu horizontal dengan Label atau kategori - Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Tujuannya untuk memberikan Jalan pintas atau shortcut link ke halaman halaman tertentu sesuai yang di inginkan.

Kebanyakan Menu Horizontal linknya di isi secara manual. Sekarang bagaimana memasukkan label/kategori ke menu horizontal agar link yang di tampilkan bisa otomatis mengikuti label yang ada.
Berikut Langkah-langkahnya:

1. Login ke Blogger
2. Pilih Rancangan atau tata letak
3. Pilih Edit Html
4. Untuk mengantisipasi hal yang tak di inginkan, Download template dulu dan save di Pc.
5. Masukkan kode CSS berikut sebelum tag ]]></b:skin>

#menulabel{margin: 0px auto; padding:0; width:100%;background:#045FB4 }
#label{margin: 0px auto; padding: 3px 0; width:1000px;border-bottom:1px solid #000 ; height:20px;background:#045FB4 url() repeat-x top; }
#label ul {float: left; list-style: none; margin: 0px; padding: 0px;}
#label li {float: left; list-style: none; margin: 0px; padding:0 10px;}
#label li a, #label li a:link, #label li a:visited {color: #fff; display: block; margin: 0px; padding: 2px 10px 2px 5px;;font-weight: none;}
#label li a:hover, #label li a:active { color: #fff; margin: 0px; padding: 2px 10px 2px 5px;;text-decoration: underline;font-weight: bold;}

6. Masukkan Kode Html berikut di atas <div id='outer-wrapper'> atau kode sejenisnya 

<div style='clear:both;'/>
<div id='menulabel'>
<b:section class='label' id='label' maxwidgets='1' showaddelement='no'>
<b:widget id='Label12' locked='false' title='' type='Label'/>
</b:section>
</div>

7. Terakhir Simpan Template

Setelah Berhasil masih ada satu langkah lagi yaitu menghapus Angka di belakang label agar lebih rapi. Caranya tinggal di klik pengaturan label dan tidak mencentang nomer jumlah per label. Itu saja.

Sebetulnya label bisa dimuat kedalam menu horizontal bergambung dengan menu sebelumnya. Caranya dengan mengelola CSS seperti di tulisan saya sebelumnya: Membuat Menu Drop Down List. Tapi untuk model yang seperti ini mesti dilakukan secara manual. Meskipun demikian tidak akan sulit dilakukan. Untuk membuat agar menu label bisa bekerja, maka linknya mesti seperti ini:

<a href="/search/label/Variasi Menu">Variasi Menu</a>.

Jika anda membuat seperti ini:

<a href="http://wisencare.blogspot.com/search/label/Variasi Menu">Variasi Menu</a>

tidak akan berhasil. Jadi jika ingin menu lebih indah, menggabungkan kedua cara itu patut dicoba.

Sumber artikel :  http://wisencare.blogspot.com