ADS

ADS

Membuat Label menjadi menu Horisontal HTML

Posted by Webb Matrix on Tuesday, January 10, 2012

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>
#catmenu2wrap{margin: 0px auto; padding:0; width:100%;background:#045FB4 }
#catmenu2{margin: 0px auto; padding: 3px 0; width:1000px;border-bottom:1px solid #000 ; height:20px;background:#045FB4 url() repeat-x top; }
#catmenu2 ul {float: left; list-style: none; margin: 0px; padding: 0px;}
#catmenu2 li {float: left; list-style: none; margin: 0px; padding:0 10px;}
#catmenu2 li a, #catmenu2 li a:link, #catmenu2 li a:visited {color: #fff; display: block; margin: 0px; padding: 2px 10px 2px 5px;;font-weight: none;}
#catmenu2 li a:hover, #catmenu2 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='catmenu2wrap'>
<b:section class='catmenu2' id='catmenu2' 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. untuk Menghapus angka di belakang label bisa di baca di sini Menghapus angka di belakang label

  • GABUNG KOMUNITAS APLIKASI FaceBook FREE KLIK DISINI 
  • SITUS JEJARING APLIKASI FACEBOOK FREE KLIK DISINI  


Blog, Updated at: 8:56 AM

2 comments:

GEO CITY

SOSMED SHARE

Powered by Blogger.