Membuat Menu Bar Dan Cara Settingnya
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>
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
}
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
9. Simpan Template dan lihat hasilnya
<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
