Kita akan
BIKIN MENU DENGAN MENGGUNAKAN CSS.Sebelum adanya nama kode
CSS, dulunya dipakai kode HTML untuk membuat aplikasi-aplikasi web/blog.
Menu pun juga begitu,Baik itu secara horizontal ataupun vertikal. 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.........
Bikin Menu dengan menggunakan CSS
Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode
CSS di blog yaitu harus diantara tag
<head> dan
</head>. Langsung saja, copy paste kodenya diatas kode dibawah ini:
Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Buat dulu pengaturan untuk tag menu navigasi, seperti dibawah ini :
#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
|
Setelah itu, bikin kode CSS untuk memperindah tampilan menu navigasi, 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 tata letak margin dan paddingnya. 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;}
|
Kode kode diatas adalah Tutorial mebuat kode CSS menu navigasi. Untuk menyimpan kode tersebut di blog anda, ikuti langkah dibawah ini :
* Login ke Blogger lalu pilih layout kemudian edit HTML
* Sebagai jaga jaga, atau untuk amannya, backup dulu template anda sekarang.
* Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
* Cari kode berikut :
>>> Kalau dah ketemu. Kopas (copy paste ) kode dibawah ini ke kode HTML tadi :
#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;
}
|
>>> Setelah itu, cari kode dibawah ini:
<div id='content-wrapper''> |
>>> Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi
<!-- Awal Menu -->
<div id='menu'>
<div style='display:none;'>
<img alt='preload' src='menuon.png'/>
</div>
<ul>
<li><a href='URL ANDA' target='_blank">TULISKAN TEXT ANDA</a></li>
<li><a href='URL ANDA' target='_blank">TULISKAN TEXT ANDA</a></li>
<li><a href='URL ANDA' target='_blank">TULISKAN TEXT ANDA</a></li>
<li><a href='URL ANDA' target='_blank">TULISKAN TEXT ANDA</a></li>
</ul>
</div>
<!-- Akhir Menu --> |
Catatan Penting :
1. Ganti
URL ANDA (yang berwarna merah) dengan link yang anda maksud dan
TULISKAN TEXT ANDA (berwarna biru) dengan nama dari masing - masing link.
2. Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.
Kalo sudah selesai, save template. Dan bisa anda per-indah dengan selera anda sendiri.
Selesai sudah tutorial untuk
Bikin menu dengan Menggunakan CSS.
Terima kasih
