CARA MEMBUAT MENU BAR BLOG

CARA MEMBUAT MENU BAR BLOG

Kali ini saya akan membuat posting tentang blog bagi para pemula blog & tentunya sangat membutuhkan & menginginkan melihat posting saya. Saya akan memberitahu kalian semua ( Para pemula ) tentang cara membuat menu blog di blog klasik yang lumayan rumit.

1. Login pada blog sobat

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 tidak kebingungan, Cari saja <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='Blognya Reggy'>Home</a></li>
<li><a href='http://hshirokuro.blogspot.com/2011/11/daftar-isi.html'>Daftar Isi</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Top Rate'>Top Rate</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Games'>Games</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Program'>Programs</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Tutorial%20Blogspot'>Tutorial Blogspot</a></li>
<li><a href='http://hshirokuro.blogspot.com/2011/11/cara-cepat-meningkatkan-page-rank-dan.html'>Backlink Gratis</a></li>
<li><a href='http://hshirokuro.blogspot.com/2011/11/link-exchange.html'>Link Exchange</a></li>

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

• Ganti tulisan yang berwarna merah dengan link Post / label / link teman macem - macem deh yang penting link
• Ganti juga tulisan yang berwarna biru dengan judul label nya
• Jika sobat ingin menambahkan Postingan di menubar, copy kode yang Bergaris Bawah di bawah kode tersebut 

8. Simpan Template

Sampai disini dulu, Selamat Mencoba!! :D

TAMBAHAN:
Jika ingin membuat submenu, atau menu kebawah (seperti dropdown)
Sobat hanya tinggal menghapus kode </li> dan ganti dengan <ul>. Maka kodenya akan seperti ini

<li><a href='http://hshirokuro.blogspot.com/2011/11/daftar-isi.html'>Daftar Isi</a>
<ul>
<li><a href='http://hshirokuro.blogspot.com/search/label/Top Rate'>Top Rate</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Games'>Games</a></li>
<li><a href='http://hshirokuro.blogspot.com/search/label/Program'>Programs</a></li>
</ul></li>

PESAN  : JANGAN DI CONTEK BLOG SAYA YA!!!!!!!!!!!!!