Membuat Menu Navigasi Horizontal

23.11 ---
Belakangan ini banyak banget para pengguna blogger yang ingin membuat menu navigasi horizontal. Biasanya navigasi menu ini hanya terdapat pada hack template langsung jadi. Namun kali ini bagi pembaca Alprablog™ kalian tidak usah repot - repot mencari hack template yang menyediakan navigasi menu horizontal. Karena saya akan membagikan tutorialnya. Sebelumnya mari kita lihat screen shotnya :



Langkah - langkahnya :

1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML.
3. Cari kode ]]></b:skin>. Gunakan F3 agar lebih mudah.
4. Pastekan kode berikut tepat di atasnya.
5. Contreng Expand Template Widget.

#bg_nav {
background: #000000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin:0 auto;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
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: 740px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
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: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
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;
}

6. Cari kode berikut.

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

7. Paste kode berikut tepat di bawahnya.

<div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://alprablog.blogspot.com/'>home</a></li>
    <li><a href='http://alprablog.blogspot.com/2011/06/backlink-gratis-link-exchange.html' target='_blank' title='Link Exchange'>Link Exchange</a></li>
    <li><a href='http://alprablog.blogspot.com/2011/05/contact-me.html' target='_blank' title='Contact Me'>Contact</a></li>
    <li><a href='http://alprablog.blogspot.com/2011/06/guest-book.html' target='_blank' title='Guest Book'>Guest Book</a></li>

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

    <div id='navright'>

    <form action='/search' id='searchform' method='get' name='searchform'>
    <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

        </div>

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

Keterangan : Ganti text yang berwarna merah sesuai keinginan Anda.

8. Simpan Template.

Adapun beberapa kode - kode yang harus di ubah sesuai template Anda. Di anatarnya kode di bawah ini. Silahkan ganti text yang berwarna biru dengan ukuran lebar yang sesuai dengan tempate Anda.

#bg_nav {
background: #000000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin:0 auto;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
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;
}

Ubah kode berikut sesuai template Anda.

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

Sekian tutorial dari saya, Selamat Mencoba !

0 komentar:

Posting Komentar