Tutorial | Navigasi Horizontal ala Galoga

Sepertinya banyak sekali yang bertanya tentang cara membuat Navigasi Horizontal seperti milik saya. Sebenarnya gampang saja membuat sperti ini. Tapi yang ribet adalah mempostingnya karena saya bingung bagaimana menjelaskannya hehehe. Oke langsung saja tanpa panjang lebar Step.By.Step !!!

1. Log in ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut di atas kode tadi

#navigasi {
text-transform : uppercase;
background : #3b5998; <---- Warna background navigasi
font : bold 12px Verdana;
float : left;
width : 100%;
height : 41px;
}
#navigasi ul {
margin : 0 10px;
padding : 0;
list-style : none;
}
#navigasi li {
display : inline;
margin : 0;
padding : 0;
}
#navigasi a {
float : left;
margin : 5px;
padding : 0;
}
#navigasi a span {
-moz-border-radius:8px 8px 8px 8px;
background:#627aad; <---- Warna background tulisan
color:white;
display:block;
float:left;
padding:8px;
}
#navigasi a:hover span {
-moz-border-radius:8px 8px 8px 8px;
-moz-box-shadow:0 0 10px red inset;
background:#6d86b7; <---- background tulisan saat di sentuh
color:white;
display:block;
float:left;
padding:8px;
}
#navigasi a:hover {
color : #fff;
text-decoration : none;
}
#navigasi a:hover span {
background : #d8d8d8;
color : #fff;
text-decoration : none;
}
#searchbox {
float : right;
background : #fff url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2-4.jpg) no-repeat left center;
width : 220px;
height : 20px;
color : #333;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
margin : 7px 0 8px 3px;
padding : 2px 2px 3px 25px;
border : 1px solid #111;
display : inline;
}

5. Letakan kode berikut di bawah kode <body> atau bisa juga dengan ditambahkan ke gadget baru

<div id='navigasi'>
<ul>
<li><a class='current' expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' type='text' value=''/>
</form>
</div>
</ul>
</div>

Keterangan : Ganti # dengan alamat URL anda Edit Me ganti dengan judul URL anda. Kode yang bercetak tebal bisa di tambahkan sesuai banyak link yang anda inginkan.

6. Save Templates.
Sekian dari saya, saya akhiri wassalam

5 komentar:

DenBaGas, 22 November 2010 at 07:26 | [Reply]: Salam
Wah, nice tutorial nih kawan...
Ijin save dulu ya..

Salam kawan
Jana Virananda, 22 November 2010 at 11:54 | [Reply]: Wah, akhirnya ada juga nih tutorial, coba ah :D
Johnson Manurung, 22 November 2010 at 17:51 | [Reply]: ijin save sahabat untuk dipelajari, salam
Muhammad Chandra, 23 November 2010 at 01:48 | [Reply]: okee bos..
makasih bnyak nih , akhirnya di kasih tau juga cara membuat nyaa..

terimakasih sekali !
Dimas Abi Galoga, 23 November 2010 at 03:57 | [Reply]: @all sama-sama. makasih komen dan kunjungannya

galoga

Tutorial | Navigasi Horizontal ala Galoga

5 komentar:

Post a Comment

{Labels}

{Fan on Facebook}

{Blog Friend}

{Followers}