Update : Tutorial ini khusus pagi anda yang masih memakai template
klasik Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.
Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:
Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.
Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.
Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :
Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :
http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif
http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif
<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span><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;
}
<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>
<a class="unyil" href="http://rohman-freeblogtemplate.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"> | </span>
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/rohman24/tombol_03.gif
http://i162.photobucket.com/albums/t253/rohman24/tombol_06.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/rohman24/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;
} <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://rohman-freeblogtemplate.blogspot.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>
Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.
Sumber:Kang Rohman
Lokasi » Home »
Blogger Pemula
» Menu Navigasi dengan CSS
Menu Navigasi dengan CSS
Langganan:
Posting Komentar (Atom)
12 komentar:
Kalo di blogku mungkin jelek hasilnya yah????
kalo saya sukanya navigasi horizontal :D
hehe
wahh ,,, kayaknya saya lebih cocok yang horizontall .. hahaha
kalo boleh sedikit kasih saran nih ya mas ...
kan artikel ini copy paste kann ?? kalo bisa , mas baca dulu artikel asli nya ... lalu simpulkan sendiri .. dengan kata kata mas sendiri juga pula .. dengan gitu , blog mas lebih terlihat menarik ..
saya dulu juga suka copy paste kayak gini .. tapi sekarang sudah tidak copy lagi ...
** jangan di masukkan hati ya mas kalo tersinggung .. kan saya cuma kasih saran ...
------------------------
kalo bersedia komen balik di blog saya yaa ..
http://fattah-blog.blogspot.com
@fattah assalamualaikum,iya nih sob hehe,ane copas dari kang rohman forever,sebenernya ane ini maksud utama bikin blog ini adalah ingin mengikuti kang rohman ato bisa juga di sebut duplicate nya blog kang rohman,antum bisa liat di setiap artikel ada sumbernya,thnx berat sarannya ya
@danuakbar assalamualaikum,tuh bisa sob comment di t4 saya hehe,pamit yahh assalamualaikum
Postingan yang sangat bermanfaat sob..... khususnya bwat saya yg newbe blogger ini.... keep posting terus...
wah keren yah bisa menu navigasi menggunakan css jadi terlihat lebih user friendly yah
makasih mas
informatif dan menarik sobat... salam kenal
Cocok ni buat referensi, apalagi banyak yg masih menggunakan template klasik kesulitan untuk membuat menu navigasi ini.
Saya belum sempat mempelajarinya sob. tapi kelihatannya menarik sih.
Waktu Luang
yg horisontal ada g sob???
Wah kerennnn!!! mantapp gann
Posting Komentar