Cara Membuat Menu Bar

Uda tau apa ntu menu bar kan sob? Kalo belom coba perhatikan gambar di bawah ini!





Di bawah header-nya ada tulisan HOME, ABOUT, GALLERY……. Nah ntu yang namana menu bar. Atau bisa juga diatas header seperti punya gw (BERANDA, LIRIK LAGU, WO XINYANG…). Sebenernya di blogspot sendiri ada yang namanya laman, fungsinya sih lumayan sama dengan menu bar, tapi sayangnya dalam 1 laman Cuma bisa untuk 1 postingan, terus posisinya juga ada disamping (sidebar), jadi keliatannya kurang menarik.


Ada satu lagi, label namanya. Kalo label/kategori ini juga bisa berfungsi sebagai menu bar. Tapi lagi-lagi, karena posisinya bukan diatas header jadi keliatannya g seru gitu.

Nah kalo di blog lo mo ditambahin menu bar, ada neh caranya.
Login dulu ke blogger
Klik Rancangan
Pilih Edit HTML

Back up template lo, buat jaga-jaga.
Beri tanda centang pada EXPAND TEMPLATE WIDGET
Cari kode ]]></b:skin>
Catatan: nyarinya g usah ditelusuri satu persatu, rebet. Cukup tekan CTRL+F atau tekan F3, trus masukkan kode yang dicari di kotak pencarian (posisinya ada paling bawah), dan tekan ENTER
.

Kemudian copy paste kode di bawah tepat di atas kode ]]></b:skin> tadi

#NavbarMenu
{
background:#ccc;
width:968px;
height:32px;
color:#FFF;
font:bold 8px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{

width:955px;
float:left;
margin:0;
padding:0
}

#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}

#nav li a,#nav li a:link,#nav li a:visited
{
color:#fff;
display:block;
text-transform:capitalize;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}

#nav li a:hover,#nav li a:active
{
background:#ccc;
color:#FFF;
text-decoration:none;
border-right:1px solid #296204;
border-bottom:1px solid #296204;
border-left:1px solid #296204;
margin:0;
padding:12px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#ccc;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font:normal 14px Georgia, Times New Roman;
margin:0;
padding:7px 10px
}

#nav li li a:hover,#nav li li a:active
{
background:#184303;
color:#fff;
padding:7px 10px
}

#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}

#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}

#nav li ul a
{
width:140px
}

#nav li ul ul
{
margin:-75px 0 0 171px
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
left:-999em
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
left:auto
}

#nav li:hover,#nav li.sfhover
{
position:static
}

#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}

#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}

#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}

#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}

*,#nav,#subnav
{
margin:0;
padding:0
}

Cari lagi kode


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>


Keyword-nya ini aja <div id='header-wrapper'>


8. Kemudian Copy Paste kode di bawah ini tepat diatas kode diatas.
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'><b>Beranda</b></a></li>
<li><a href='http://buatbagibagi.blogspot.com/search/label/lirik%20lagu'><b>lirik lagu</b></a></li>
<li><a href='http://buatbagibagi.blogspot.com/search/label/inspirasi'><b>inspirasi</b></a></li>
<li><a href='http://buatbagibagi.blogspot.com/search/label/wo%20xinyang'><b>wo xinyang</b></a></li>
<li><a href='http://buatbagibagi.blogspot.com/search/label/ngeblog'><b>Ngeblog</b></a></li>
<li><a href='http://buatbagibagi.blogspot.com/search/label/gallery'><b>gallery</b></a></li>
</ul></div>
</div>


9. Ganti tulisan berwarna biru dan hijau di atas sesuai link punya lo dan judul/kategori menu bar yang lo pengen.


10. Terakhir, klik pratinjau. Kalo uda sesuai dengan keinginan, klik simpan template dan lihat hasilnya.


Catatan:
Tulisan yang berwarna biru adalah link buat menu bar lo. Yang ijo buat judul/kategori menu bar.


*penambahan dan pengurangan


Kalo mo nambahin 1 judul lagi tinggal tambahin aja 1 lagi.
Contohnya gini:
Di atas kan cuma ada 6 (Beranda, Lirik Lagu, Inspirasi, Wo X inyang, Ngeblog dan Gallery), kalo mo jadi 7 atau lebih tinggal tambahin
<li><ahref='http://buatbagibagi.blogspot.com/search/label/gallery'><b>gallery</b></a></li>
</ul></div>


terus ganti lagi deh yang warna biru dan ijony. oiya...Link, judul, sama posisinya tbisa diganti-ganti kok, erserah lo aja. Begitu juga kalo mo dikurangi, tinggal apus yang mo diilangin.


*buat link menu bar


Biasanya kalo lo mo bikin menu bar, lo bakal bingung ngisi linknya (tulisan berwarna biru diatas).


Ada 2 kategori:


Lo uda punya label:
Misalkan lo pengen bikin menu bar dengan judul/kategori “kesehatan”. Lo harus punya label kesehatan dulu. Terus lo klik label kesehatan lo, dancopas (copy paste) aja link label kesehatan lo ke link buat menu bar lo (yang warna biru diatas). Udah deh.


Lo belom punya label:
Bikin label dulu aja ya sob sebelum bikin menu bar, hehehe, biar g rebet. Kalo udah, ikutin cara buat kategori pertama. Kalo belom tau caranya, lo bisa klik di sini


kalo masih ada yang kuran jelas, tanya aja ya...
Selamat mencoba…!!!