MEMBUAT NAVIGASI HORIZONTAL PADA BLOG

Buat sobat t'Net yang belum tahu cara membuat navigasi(barisan menu) header blog, dan ingin memasangnya pada blog gampang. Kali ini saya akan memberikan trikya.
Sebenarnya dalam membuta navigasi ini kita bermail lagi dengan kode HTML.


Caranya gimana??
1. Login ke account blogger.
2. Pilih Tata Letak > Edit HTML > centang "Expand Template Widget".
3. Cari Kode kode ]]> < /b:skin>dan Copy-Paste (copas) di atas kode.tersebut

/* navbar
================== */

#NavbarMenu {
background: #555 ;
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/images/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#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: -32px 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;
}

Catatan: 1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna Merah dan hijau.
2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog sobat t'Net

4. Kemudian cari kode berikut ini :

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

</b:section>
</div>

5. copy paste kode HTML berikut tepat dibawah </b:section> atau </div><ul 

id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Techknowl.com</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div>

<div id='NavbarMenuright'>
&lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
</div>
</div>

Catatn:

tulisan yang berwarna hijau anda ganti sesuai dengan keinginan anda

Dan simbol seperti ni '#' anda ganti dengan situs yang anda ikuti

SELAMAT MENCOBA YAHHHHHH


.