Popular Post

Popular Posts

Posted by : Alwi Fauzi Sunday, March 27, 2011

1. Login ke Blogger
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari Kode kode ]]></b:skin> (Tekan Ctrl + F biar mudah dicari)
5. Copy Paste kode berikut diatas kode ]]></b:skin> :

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

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}

#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px soli #ffffff;
}

#nav a:hover {
background: #c06000;
color: #000000;
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: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#nav li li a:hover, #nav li li a:active {
background: #c06000;
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;
}

Note:
Ganti ukuran menu sesuai dengan yang anda inginkan (teks warna biru)
Ganti warna background/teks/warna saat pointer diarahkan (teks warna hijau)


6. Cari kode </b:section>
7. Copy paste kode berikut diantara </b:section> dan </div>

<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://AlamatBlogKamu.blogspot.com/'>Home</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
<li><a href='URL Menu'>Menu</a></li>
</ul>
</div>
</div>
</div>

Note: Teks warna biru = link yang dituju --- Teks warna hijau = nama tampilan pada menu

8. Simpan template

Jika ingin menambahkan elemen pencarian disamping menu tambahkan kode berikut sebelum kode </div> pada kode diatas :

<div id='navright'>
<form action='http://AlamatBlogKamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>

Simpan template kembali

Sumber: Kang Rohman

{ 1 comments ... read them below or add one }

  1. mantap kang, ijin coba dan follow blog ini.

    diharapkan bisa follback

    ReplyDelete

- Copyright © 2013 Blog Kang Alwi - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -