Cara Membuat Menu bar di Blog, Dimana kita lihat tidak semua tamplate yang menyediakan Menu bar ini. Contohnya saja Tamplate bawaan blogger sendiri. Menu bar ini sebenarnya sama saja seperti Menu Label bawaan blogger tetapi bawaan blogger letak nya di belahan sidebar.juga bisa kita lihat menu label bawaan blogger membutuh tempat, kelihatan nya kurang menarik. Nah untuk kalian yang ingin menambah Asesories menu bar ini tentu saja bisa. dengan bantuan kode script ke dalam tamplate kalian. Menu bar ini terletak di atas Header. Mau tau Bagaimana cara Membuat Menu bar nya??? Ikuti cara-cara di bawah ini
Berikut langkah-langkah cara Membuat menu bar di blog anda:
- Login terlebih dahulu ke blogger
- Klik Tata Letak
- Edit HTML
- Cari kode ]]></b:skin>
- Kemudian Copy Paste kode di bawah ini persis diatas kode ]]></b:skin>
#NavbarMenuKemudian cari kode berikut ini :
{
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
}
Agar tidak kebingungan, Cari saja <div id='header-wrapper'> atau </b:section>
<div id='header-wrapper'>Letakkan Kode dibawah ini diatas kode "<div id='header-wrapper'>" atau "</b:section>"
<b:section class='header' id='header' preferred='yes'>
<b:widget id='Header1' locked='true' title='Education (Header)' type='Header'/>
</b:section>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList64' locked='true' title='Top Tabs' type='LinkList'/>
</b:section>
<div id='searchform'><form action='/search' method='get'>
<input class='searchtext' id='s' name='q' type='text' value=''/>
<input alt='Search' id='searchsubmit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4sUE12EHFPpF96j8YwKuDsOdk2h89CdCALVk0-0LwobB9X31pvMOoYCi6Q8J4C4MXS8IXGg2ed8R0moVfUwIYkzc6LmjMj2AjLo8zKPnJBe_aQtnrrayVvQR7B0mbF2UjRJx3JE949A/s1600/spacer.gif' type='image' value=''/>
</form></div>
<div id='rss'><a href='/feeds/posts/default'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4sUE12EHFPpF96j8YwKuDsOdk2h89CdCALVk0-0LwobB9X31pvMOoYCi6Q8J4C4MXS8IXGg2ed8R0moVfUwIYkzc6LmjMj2AjLo8zKPnJBe_aQtnrrayVvQR7B0mbF2UjRJx3JE949A/s1600/spacer.gif'/></a></div>
</div>
<div id='NavbarMenu'>Nah,.. uda selesai. Selamat Mencoba!!!
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a>
<ul>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li></ul></li>
</ul></div>
</div>
Catatan :- Silahkan ganti link dan nama pada kode yang berwarna merah sesuai keinginan anda.
-Pada Kode warna biru silahkan ganti sesuai menu bar keinginan anda separti Home, About Me DLL
