Menu Navigasi dengan CSS 

Bagaimana sudah dengan posisi PW hahaha (alay) tapi walaupun alay kita ikuti yuk petunjuk masuk surga eh salah heheheehe.petunjuk

Menu Navigasi dengan CSS :

Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini

.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :

1. Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.
.unyil{ text-align:left; display:block; width:180px; height:20px; background:#f0f0f0; padding:3px 4px 3px 8px; margin:7px 10px 7px 0; } .unyil:hover{ background:#97A4B9; text-decoration:none; }
2. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :
<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span> <a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> <a class="unyil" href="http://designrumahdanbaju.blogspot.com">Free Blog Templates</a><span class="hide"> | </span> <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide">

biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

Bagaimana sudah jelas? mudah-mudahan jelas.



Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :


Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

.cuplis{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
text-decoration:none;
}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

<a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

<a class="cuplis" href="http://designrumahdanbaju.blogspot.com/.com">Free Blog Templates</a><span class="hide"> | </span>

<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

  

kalo mau lebih lengkap lagi klik ke http://kolom-tutorial.blogspot.com

semoga brmanfaat buat bloger's semuanya oke oke oke

Posted in: