Membuat menu Navigasi Horisontal

Ingin blog tampil lebih elegan ?
Tambahkan saja menu navigasi horisontal pada bagian atasnya. Maka tampilan blog akan kelihatan lebih elegan dan profesional.

Caranya ?
Menambahkan script harus agak hati-hati, mengingat bila salah tata letak maka hasil yang didapat tidak maksimal.

Mari kita mulai;

1. Klik Design - Edit HTML
2. Search/cari kata  ]]></b:skin>

3. Tambahkan script dibawah ini tepat di atasnya


#subnavbar { background: #678;
width: 945px;
height: 26px;
color: #FFF;
margin: 0;
padding: 0;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #888;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}



4.  Selanjutnya search b:section
----Note: Pada baris atas b:section tertulis widget id='Header1' dst.
5. Kemudian Copy-paste kan script dibawah ini   tepat  di bawah  </b:section>


<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='http://gratis4downloadfilm.blogspot.com'>Home</a>
</li>
<li>
<a href='#'>Page1</a>
<ul>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/page1.1'>Page1.1</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/page1.2'>Page1.2</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/page1.3'>Page1.3</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/page1.4'>Page1.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>Page2</a>
<ul>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page2.1'>Page2.1</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page2.2'>Page2.2</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page2.3'>Page2.3</a>
</li>
</ul>
</li>

<li>
<a href='#'>Page3</a>
</li>

<li>
<a href='#'>Page4</a>
<ul>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page4.1'>Page4.1</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page4.2'>Page4.2</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page4.3'>Page4.3</a>
</li>
<li>
<a href='http://gratis4downloadfilm.blogspot.com/Page4.4'>Page4.4</a>
</li>
</ul>
</li>
<li>
<a href='#'>Page5</a>
</li>
</ul>
</div>



Selesai.
Silahkan dilihat hasilnya.


:)