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>
#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
}
{
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
}
Kemudian cari kode di bawah ini:
<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>
<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>
Cari
Berdasarkan <div id='header-wrapper'>
Kemudian
Copy paste kode di bawah ini di bawah kode tersebut<div
id='NavbarMenu'>
<div
id='NavbarMenuleft'>
<ul
id='nav'>
<li><a
expr:href='data:blog.homepageUrl' title='This Blog
Address'>Home</a></li>
<li><a
href='http://andriutama.blogspot.com/search/label/web'
title='web'>web</a></li>
<li><a
href='http://andriutama.blogspot.com/search/label/chemistry'
title='chemistry'>chemistry</a></li>
<li><a
href='http://andriutama.blogspot.com/search/label/search/label/game'
title='game'>game</a></li>
<li><a
href='http://andriutama.blogspot.com/search/label/search/label/literatur'
title='literatur'>literatur</a></li>
</ul></div>
</div>
Ganti Alamat link diatas link yang anda
miliki
Kemudian Simpan tamplate anda dan lihat
hasilnya
Good Luck......
Tidak ada komentar:
Posting Komentar