Dulu sebelum ada yang namanya kode CSS, menu navigasi dibuat dengan menggunakan table dengan kode HTML. Baik itu secara horizontal menu atau vertikal menu. Bahkan, untuk membuat sebuah layout website pun masih pake table. Nah...kalo sekarang udah ga zaman bikin menu navigasi dengan table udah ada cara lain yaitu dengan menggunakan kode CSS. Berikut cara-caranya dan mudah2an dapat dipahami.........
Tutorial Membuat Kode CSS Menu Navigasi
Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja diatas kode]]></b:skin>
</head>
Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Pertama anda harus buat dulu kode css untuk tag pengaturan menu navigasi. Lihat kode dibawah ini :#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
Setelah itu, buat kode CSS untuk merubah format default untuk tag ul dan li#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}
Maksud dari kode CSS diatas adalah untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Selanjutnya, buatlah kode CSS untuk membuat variasi link dari menu navigasi. kodenya :#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background: url(http://i283.photobucket.com/albums/kk315/
meezanx_2008/menu.gif) repeat-x;
background-position:center;
}
#menu ul li a:hover
{
color: white;
}
Nah.....kode2 diatas itu semua adalah Tutorial mebuat kode CSS menu navigasi. Untuk lebih jelasnya dan cara menyimpan kode tersbut di template blog anda ikuti langkah2 berikut :]]></b:skin>
</head>#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
#menu ul
{
margin: 0;
padding: 7px;
height: 29px;
text-align: center;
}
#menu ul li
{
list-style: none;
display: inline;
}
#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
color: white;
margin-bottom:4px;
padding: 13px 7px 13px 7px;
font-size: 1em;
font-family: 'lucida grande', arial, sans-serif;
font-weight: bold;
text-decoration: yes;
background:
url(http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif)
repeat-x;
background-position:center;
}
#menu ul li a:hover
{
color: white;
}<div id='content-wrapper''><!-- MULAI MENU -->
<div id='menu'>
<div style='display:none;'>
<img alt='preload' src='menuon.png'/>
</div>
<ul>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
<li><a href='URL ANDA' target='_blank">Text Anda</a></li>
</ul>
</div>
<!-- AKHIR MENU -->
Kalo sudah selesai, save template.
OK....Selamat mencoba...
Navigasi dengan CSS
Langganan:
Posting Komentar (Atom)
bos, cara diatas sudah sukses.
trus saya sekarang mau tanya, gimana caranya memasukkan tulisan / data / dokumen pada masing2 menu?
trims,
salam,
aweek
ya sama, aku juga mau tanya !! aku udah bisa cara diatas mah, tapi cma satu kendalanya, memasukan postingan ke menu navigasinya itu yang susah, mohon di jawabnya Trims, kalau tidak keberatan di share ke alamat email saya moexty_lucky@yahoo.co.id
makasih banyak ya