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:
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;}
#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>
<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
- KUMPULAN APLIKASI FACEBOOK KLIK DISINI
- DOWNLOAD SOFTWARE KLIK DISINI
- TUTORIAL DENGAN VIDEO KLIK DISINI
- WEB JOOMLA KOMUNITAS KLIK DI SINI
- GABUNG KOMUNITAS FaceBook WEBMATRIX KLIK DISINI
- SITUS JEJARING WEB MATRIX KLIK DISINI
- SITUS WEB MATRIX KLIK DISNI
- WEB JOOMLA KOMUNITAS KLIK DI SINI
- GABUNG KOMUNITAS APLIKASI FaceBook FREE KLIK DISINI
- SITUS JEJARING APLIKASI FACEBOOK FREE KLIK DISINI
izin coba di blog saya mas, semoga saya berhasil.
ReplyDeletesilahkan gan
ReplyDelete