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:
- Login ke Blogger
- Pilih Rancangan atau tata letak
- Pilih Edit Html
- Untuk mengantisipasi hal yang tak di inginkan, Download template dulu dan save di Pc.
- 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;}
- 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>
- 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.
read more : http://wisencare.blogspot.com/2011/04/cara-membuat-label-s-menjadi-menu.html
Anda telah membaca artikel tentang Cara Membuat Label s Menjadi Menu Horizontal dan anda juga bisa menemukan artikel Cara Membuat Label s Menjadi Menu Horizontal ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/cara-membuat-label-s-menjadi-menu.html.Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Label s Menjadi Menu Horizontal ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.
