Senin, 18 Juli 2011

Membuat Menu Blog Dari Label



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.

Menghilangkan angka di belakang label

Menghilangkan angka yang ada di belakang label atau category - Membuat Label atau kategori bertujuan untuk mengelompokkan artikel atau posting sesuai dengan jenis atau kategorinya. Secara Default, Tampilan Label seperti pada gambar di samping. Yaitu nama label di ikuti dengan jumlah artikel/posting di dalamnya.

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

0 komentar:

Posting Komentar

 
Design by Free Tips and Trick | Bloggerized by Plengur - Themes | HasanudinSangar