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.........Membuat menu blog menggunakan CSS
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 :
* Login ke Blogger lalu pilih layout kemudian edit HTML
* Sebagai kemanan silahkan download dulu template anda
* Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
* Cari kode berikut :
]]></b:skin>
</head>
* Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode HTML tadi
#menu* Setelah selesai copy paste nya, cari kode berikut :
{
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''>
* Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi
<!-- MULAI MENU -->Catatan Penting :
<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 -->
1. Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
2. Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.
Kalo sudah selesai, save template.
Good Luck.....
0 comments: