Membuat Horizontal Navigasi

Thursday, July 22, 2010

Membuat Horizontal Navigasi

Sebelum anda membuat tombol navigasi, ada beberapa hal yang perlu anda persiapkan, antara lain adalah anda perlu menyiapkan keyword apa yang akan di pasang pada tombol-tombol tersebut, misalkan HOME, DAFTAR LINKS, ABOUT dll, untuk di pasang pada tombol navigasi. Persiapan yang lainnya adalah link-link yang akan anda pasang.
Link yang di pakai bisa berupa link ke alamat blog atau web lain, link ke postingan blog lain atau bisa juga berupa link kedalam posting blog anda sendiri. Sebagai contoh :
Links 1 : http://www.gratistutoriallengkap.blogspot.com
Links 2 : http://www.onoway.blogspot.com
Perlu di ingat sekali lagi bahwa desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang saya terangkan berbeda dengan template yang anda gunakan. Untuk itu saya menyarankan agar anda membuat satu blog percobaan, agar jika terjadi kesalahan tidak merusak blog utama anda, silahkan pilih template white minima yang biasa. ikuti langkah-langkah berikut :
1. Silahkan login ke blogger dengan ID anda
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Cari Kode kode ]]></b:skin>
5. Copy paste kode berikut persis di atas kode]]></b:skin>

/*  navbar  ==================  */  #bg_nav { background: #000000; width: 660px; 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 #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: 440px; 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. Tuju bagian bawah, lalu cari seperti berikut ini :

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

8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Keterngan :
width: 660px; pada background: #000000; width: 660px; menunjukan panjang tab ( ubah sesuai tampilan anda )
<li><a href='http://www.gratistutoriallengkap.blogspot.com/'>home</a></li>
dan
<li><a href='http://www.onoway.blogspot.com/'>daftar links</a></li>
( ganti dengan links anda )
<form action='http://gratistutoriallengkap.blogspot.com/search' id='searchform' method='get' name='searchform'> ( ganti dengan nama website anda )

tuntas dah silahkan di coba......!