Cara membuat Menu Bar pada blog ~ MACAM-MACAM ARTIKEL DAN TUTORIAL

Sebelumnya saya membuat postingan tentang Cara Membuat Menubar Pada Template klasik blogger. Bisa dibilang sama dengan postingan sebelumnya, kali ini kita akan membahas tentang "Cara membuat Menu Bar pada blog". Bila pada postingan sebelumnya adalah menubar untuk template klasik. Namun, kali ini untuk semua template yang terdapat kode - kode di bawah ini. Untuk cara pemasangannya, ikuti langkah - langkah di bawah ini :

1. Login pada blog kalian

2. Masuk ke halaman Template

3. Edit HTML lalu Lanjutkan

4. cari kode ]]></b:skin>

5. Copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>

#NavbarMenu
{
background:#DBDBDB;
width:900px;
height:35px;
color:#000000;
font:bold 10px 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:#000000;
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:#ABABAB;
color:#DBDBDB;
margin:0;
padding:11px 9px 8px
}

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

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

#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
}

6. Selanjutnya, Cari kode

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>

Agar lebih mudah dan tidak kebingungan, Cari saja kode <div id='header-wrapper'>

7. Copy kode di bawah ini dan pastekan di bawah kode no 6

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl' title='Saikhu Blog'>Home</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>
<li><a href='URL BLOG KAMU'>JUDUL BLOG</a></li>

</ul>
</div>
</div>