Menu Navigasi dengan CSS

Menu
Navigasi dengan CSS

Update : Tutorial ini khusus pagi anda yang
masih memakai template klasik

class="Normal__Char" style=" text-decoration: none">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. class="Normal__Char"> 

 

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 :

class="Normal__Char">·  class="fullpost__Char">buatlah dua buah tombol
navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini
di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya
akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk
membuat sebuah tombol, kita bisa menggunakan berbagai program komputer
semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.

class="Normal__Char">·  class="fullpost__Char">Upload gambar tombol-tombol
tersebut pada hosting penyimpan semisal class="Strong__Char">www.photobucket.com class="fullpost__Char"> untuk cara upload
gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa
silahkan klik class="Hyperlink__Char" style="
text-decoration: none;">Di sini class="fullpost__Char">. class="Normal__Char"> 

 

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

 

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif class="Normal__Char"> 

 

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

class="Normal__Char">·  class="fullpost__Char">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 class="HTML_0020Code__Char" style="
   color: #FF0000;"><style type="text/css"> class="Normal__Char"> dan sebelum kode class="HTML_0020Code__Char" style="
   color: #FF0000;"></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> class="Normal__Char"> 
   
    
   
   <a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com class="HTML_0020Code__Char">">Free Blog Templates</a><span class="hide"> | </span> class="Normal__Char"> 
   
    
   
   <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

 

 

biar tidak telalu bingung, sedikit saya uraikan : class="Normal__Char"> 

 

.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. class="Normal__Char"> 

 

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

 

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. class="Normal__Char"> 

 

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

 

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

 

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