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
}
<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'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Download%20Software'><b>Download Software</b></a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Antivirus' title='Antivirus'>Antivirus</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Hack' title='Hack'>Hack</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Delta%20Net' title='Delta Net'>Delta Net</a></li>
</ul></div>
</div>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Download%20Software'><b>Download Software</b></a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Antivirus' title='Antivirus'>Antivirus</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Hack' title='Hack'>Hack</a></li>
<li><a href='http://www.deltanetkabunan.com/search/label/Delta%20Net' title='Delta Net'>Delta Net</a></li>
</ul></div>
</div>
Selamat mencoba......
11 comments:
makasi brow. da berhasil. kunjungi blog saya ya. tlg kasi saran. maklum baru pertama. www.fajranblog.blogspot.com
yg biru gntinya pke ap?
Diga@
kode yang Biru isi dg judul menu
kode yang merah isi link anda yang menuju ke menu anda
Gan aku pake template standar yang simple white ngak ada itu div id='header-wrapper'
jadi di letakkan dimana tuh code...???
Makasih Gan
ediap@ silahkan ganti template anda dulu gan, gampang kok, tinggal download gratis, ntar pasti ada code yang saya maksud
wah menarik nich, saya coba ya...
sip bjuga tu brow..???
boleh COPAS gak tu..???
:D
kunjungi blog gue brow..???
www.dlerist.blogspot.com
mas,,,thanks ya info nya,,,,saya akan coba.
www.immanueladmin.blogspot.com,,,tukeran link mas
Nice info sahabat..!!! Mantap dah tutorialnya, tapi kodenya terlalu bnyak, ini akan membuat Template semakin loading nya lama,!!
salam "Blogadexme".
Thanks!
Nice info sahabat..!!! Mantap dah tutorialnya, tapi kodenya terlalu bnyak, ini akan membuat Template semakin loading nya lama,!!
salam "Blogadexme".
Thanks!
kayak nya gak ada
Posting Komentar