Membuat Horizontal Navigasi

Langsung saja to the point tentang cara membuat horizontal navigasi seperti yang ada di wow-sip.blogspot.com. Gambarnya adalah seperti ini :


Kali ini saya menggunakan template dari :

Blogger Template Style
Name :Simple
Designer : Josh Peterson
URL : www.noaesthetic.com

Langkah-langkahnya adalah sbb :

1. Silahkan login ke blogger dengan ID anda
2. Klik Rancangan
3. Klik Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Silahkan klik Download Template Lengkap, ini untuk berjaga-jaga kalau nanti kita melakukan kesalahan edit, kita masih punya back-up data original untuk mengembalikan setelan awal.
6. Cari Kode kode ]]></b:skin
7. Copy paste kode berikut persis di atas kode ]]></b:skin

/* navbar

================== */

#bg_nav {

background: #000000;

width: 851px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #FFFFFF;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #00FF00;

border-bottom: 1px solid #00FF00;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 570px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 230px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #000000;

color: #BDBDBD;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #0A0A2A;

color: #2EFE2E;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #333333;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #666666;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

8. Tuju bagian bawah, lalu cari seperti berikut ini. ( tiap template mungkin berbeda, namun intinya adalah bagian header )

    <header>

    <div class='header-outer'>

    <div class='header-cap-top cap-top'>

      <div class='cap-left'/>

      <div class='cap-right'/>

    </div>

    <div class='fauxborder-left header-fauxborder-left'>

    <div class='fauxborder-right header-fauxborder-right'/>

    <div class='region-inner header-inner'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Marsam&apos;s Blog (Header)' type='Header'/>

</b:section>

    </div>

9. Copy paste code berikut ini persis di bawah kode yang tadi :


<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://wow-sip.blogspot.com/p/home.html'>Home</a></li>
<li><a href='http://wow-sip.blogspot.com/p/about-me.html'>About</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Tutorial Blogger</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Dunia Fitnes</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Komputer</a></li>
<li><a href='http://wow-sip.blogspot.com/p/contact-us_25.html'>Contact Us</a></li></ul>
</div>
</div>
<div id='navright'><form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}' onfocus='if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this blog...'/>
<input alt='' class='' name='' src='' type='submit' value='Go'/></form> </div>

</div><!-- akhir bg_nav -->

10. Klik tombol Simpan Template 
11. Selesai.


Catatan :

1. Anda bisa merubah lebar Horizontal Navigasi dengan merubah nilai yang saya beri warna merah seperti dibawah ini

/* navbar
================== */
#bg_nav {
background: #000000;
width: 851px;
height: 29px;
font-size: 11px;

2. Apabila jumlah Menu Horizontal anda banyak , maka kemungkinan besar tidak akan ditampilkan karena keterbatasan lebar template anda. Untuk mengatasinya rubah nilai seperti yang saya beri warna merah dibawah ini

#navleft {
width: 570px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 230px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}


3. Nama Menu yang saya beri warna hijau bisa anda sesuaikan dengan kebutuhan anda sedangkan link-nya ini saya beri warna merah rubah sesuai dengan link yang anda punya. Contohnya seperti yang dibawah ini.


<li><a href='http://wow-sip.blogspot.com/p/home.html'>Home</a></li>
<li><a href='http://wow-sip.blogspot.com/p/about-me.html'>About</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Tutorial Blogger</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Dunia Fitnes</a></li>
<li><a href='http://wow-sip.blogspot.com/'>Komputer</a></li>
<li><a href='http://wow-sip.blogspot.com/p/contact-us_25.html'>Contact Us</a></li></ul>

Tutorial ini saya tulis kembali seperti yang di sampaikan oleh Kang Rohman dan mengalami sedikit modifikasi. Terimakasih buat Kang Rohman.