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
Menghilangkan angka di belakang label
Banyak yang menganggap angka di belakang label mengganggu pemandangan. Apalagi jika jumlah posting yang di tampilkan berdasar label tersebut masih sedikit. Tapi banyak juga yang menganggap kalau angka di belakang label justru akan mempengarui pengunjung untuk mengekliknya.
Jika di anggap menggangu,dapat di hapus yaitu dengan cara sbb:
- Login ke Blogger
- Masuk ke tata letak atau Rancangan
- Pilih Edit Html
- Contreng Expand Template Widget
- Cari kode berikut <span dir='ltr'>(<data:label.count/>)</span> (gunakan Ctrl + F)
- Delete kode tersebut


02.20
Achmad Nur Hidayatullah
Posted in: 

0 komentar:
Posting Komentar