Membuat Menu Bar Dan Cara Settingnya

By Albarnation | Membuat Menu Bar Dan Settingnya. Saat saya buka blog dan lihat buku tamu. Saya menemukan Pertanyaan dari sobat blogger saya yang bernama Juli ( Kali aja lahir bulan juli ya, Wakakakak ). Pertanyaannya Begini : 

• Julian: 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-wrapper">

8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>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='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a>

<ul>

<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>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. dan Inilah jawaban dari pertanyaan Julian Silahkan di simak.

PERTAMA

Misalnya seperti Menu Downloader Atau Tutorial saya. Saat Sobat Klik Maka akan tampil 3 Postingan Pertama yang berkaitan dengan Download. Caranya Bagaimana ? Lihat Gambar Ini :

Nah Seperti Yang sobat lihat Saya menulis Tentang Tutorial membuat Membuat Menu Bar dan saya kasi Label Tutorial Blogger. Jika Sudah Klik Terbitkan Entri

KEDUA

Postingan Akan Terbit. Ok selanjutnya : 

Klik Rancangan 

Tambah Gadget

Label

 

 Klik Simpan ( Saya Ubah Tulisan Label dengan kategori )

Dan Hasilnya Akan Seperti Ini 

" Seperti yang Terlihat di tengah Blog saya bagian Kanan "

Klik Label yang sudah Sobat Buat tadi

Dalam Hal Ini Saya Mengklik Label Download

Maka Akan Muncul Tulisan-Tulisan saya yang saya kasi label Download 

 

" Salah Satu Contohnya "

Dan Sobat Copy URL Yang Berada Di Addres Bar

Ini Contoh URL dari Label Download Tadi http://albarnation.blogspot.com/search/label/Download

Lihat gambar

 

TERAKHIR

Silahkan Sobat Ganti URL  http://albarnation.blogspot.com/ Tadi

Contoh 

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://albarnation.blogspot.com/search/label/Download'>Download</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a>
<ul>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
<li><a href='http://albarnation.blogspot.com/'>Ganti Menu</a></li>
</ul></li>
</ul>
</div>

 

Sekian-> Semoga Bermanfaat :D happy Blogging