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:
</head> |
Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Buat dulu pengaturan untuk tag menu navigasi, seperti dibawah ini :
{ 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
{ 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 :
{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 :
</head> |
>>> Kalau dah ketemu. Kopas (copy paste ) kode dibawah ini ke kode HTML tadi :
{ 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:
>>> Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi
<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
Sekilas tentang admin
Saya Ridho Hawali, salah seorang siswa yang mengadu nasib di ibukota provinsi Riau, yang bersekolah di SMK Labor Pekanbaru, salah satu sekolah swasta yang memang betul-betul memberikan saya begitu bermanfaatnya ilmu teknologi untuk masa kedepannya.Jurusan yang saya ambil tentunya Teknik Komputer danJaringan atau TKJ, karena basic saya sejak kecil sudah mengarah untuk berhadapan dengan hardware-hardware serta materi pendukungnya.
Facebook | Twitter | distroleenux | info lebih lengkap dari admin
Thanks infonya gan.. bermanfaat banget
BalasHapus