Membuat Menu Bar Dan Settingnya

03.54    



gimana cara biar menu bar itu bisa diiisi beberapa artikel. contoh nih di menu bar ente kan ada downloader nah pas diklik bukan satu artikel aja tetapi ada 3 artikel itu gmn caranya. makasih jawabanny. 
Nah dari pertanyaan di atas saya akan menjelaskan dari Step awal Hingga Step Akhir semoga saja penjelasan saya ini Cukup memuaskan : D


Pertama : Membuat Menu Bar

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id='content'>
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7


<div id='menubar'>
<ul>
<li><a expr:href='http://efrizzah.blogspot.com'>Home</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
</ul>
</div>



9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='http://efrizzah.blogspot.com'>Home</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a>
<ul>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
<li><a href='http://efrizzah.blogspot.com/search/label/Ganti Menu'>Ganti Menu</a></li>
</ul></li>
</ul>
</div>

Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Ganti Menu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
Ke Dua :  Cara Settingnya :

Di Menu Keterangan sebenarnya sudah cukup jelas. Seperti yang saya kasi warna Ungu. tapi alangkah baikknya saya menjelaskan secara lebih detail.Silahkan di simak.

Postingan Akan Terbit. Ok selanjutnya : 
  • Klik Rancangan 
  • Tambah Gadget
  • Klik Label
Oh ya jangan lupa untuk di setiap postingan di beri label supaya postingan tertata di setiap menu barnya
caranya klik postingan/artikel lalu klik label (yang ada di sebelah kanan di bawah "setelan entri")
lalu klik Label dan tulis judul menu bar yang sesuai dengan keinginan sobat
DAN SELESAI


sekian dan Terima kasih