<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
{
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 selesai copy paste nya, cari kode berikut :
<div id='content-wrapper''>
- Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi
<!-- 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 -->
- Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
- Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.
Lucu Gambar Smilenya :-L
BalasHapusSetuju Bos....
BalasHapusTerima kasih,
BalasHapussudah saya coba siip banget
masih pemula
AQ Udh coba Cara Buat Menu Navigasi CSS, tapi selalu muncul tulisan begini :
BalasHapusYour template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".
(Maklum Pemula):))
Apa Yang salah Ya?
Atau AQ belum paham dengan Kata-katanya Ye:)
Mas,,,
BalasHapusKata
"Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi"
Maksudnya diatas gimana ya?
Apa Mesti diletakkan diatasnya atau dibawahnya?
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif hehehehe
BalasHapussusah
BalasHapusboz aku dah coba pasang di blog aku tapi ada pesan berikut
BalasHapus"Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character."
aku dah copy paste semua css nya sesuai dengnan yang tertulis di atas mohon pencerahanya di endinaku@gmail.com
trims
mas...bleh ga minta kirimin tutorial cara mempercantik blog....yg detail n lengkap..
BalasHapustlong ya mass,,,,karna saya awam skali dalam mmbuat blog.....
email saya: the_rickey@yahoo.co.id
kok saya coba ga bisa2 ya
BalasHapusKeren mas...thanks ilmunya..
BalasHapusmas kode div id=content-wrapper gak ada di template ku, jadi solusinya gmn???
BalasHapusmaklum masih pemula
Maz Mizwar saya mau coba yang ini tapi saya masih bingung yang dimaksud navigasi itu apa???maklum masih baru!!!!!
BalasHapusMKSH boz..ku tunggu saran laenya...
BalasHapusMakasih ya infonya ntar gw coba dech
BalasHapusMakasih infonya, segera meluncur....
BalasHapusmohon maaf sebelumnya saya ingin bertanya:
BalasHapusbagaimana sih caranya membuat menu seperti yang ada diwebsite seperti ada home,galery,dll yang ada diatas halaman blogspot kita...
mohon penjelasannya ya mas
Salama
Yusandra_sangkut@yahoo.com
seblum saya bertnya saya mnta maaf...
BalasHapusgimana mas caranya buat menu navigasi... k' saya coba g' bisa????
ohy tunjukkan yang jelas biar mengerti...
salam saya : jaka_kebal@yahoo.co.id
boz aku dah coba pasang di blog aku tapi ada pesan berikut
BalasHapus"Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character." Sama pertanyaannya dengan komentar sebelumnya juga ngak jalan. Solusinya gimana mas. Harap diperbaiki tutorialnya. emal : w_arita@yahoo.com
gak bisa bang.... mohon diperbaiki lagi.. trims...
BalasHapuswww.Sedot-Go.blogspot.com
Salam ziarah. Nice blog Mirwa. Sila visit http://tip-buat-blog.blogspot.com untuk berkongsi ilmu navigation / drop menu menggunakan css3
BalasHapusGIMANA YAH MAS WAKTU PAS DISIMPAN TEMPLATE, ADA TULISAN KAMI TIDAK DAPAT MENYIMPAN TEMPLATE ANDA
BalasHapusmakasih banyak mas,,saya sudah coba, alhamdulillah bisa, walau masalahnya sama seperti yang dihadapi temen-temen di atas (Pesan error XML: The value of attribute "target" associated with an element type "null" must not contain the '<' character." ).setelah di ubah-ubah dikit ternyata bisa juga. solusi dari masalah itu ternyata pada kode tanda petik dua (") setelah '_blank, diganti menjadi tanda petik satu ('). jadi hasilnya '_blank'>
BalasHapusPesan error XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
BalasHapusbuat menu masih bingung soale baru pemula banget...
BalasHapusthanks tutorialnya
BalasHapuswahyu agung peraih diamond 20juta
WWW.TABUNGANFINANSIAL.CO.CC
aku dah nyoba, tapi kok error terus ya?
BalasHapusalhamdulilah saya udah pasang menu di blog iseng2 saya, makasih ya kang . maju terus..
BalasHapuskang saya amat newbie.. tolonglah kang.. saya tanya beda kode " dengan ' itu apa dan gimana menutup xml dengan baik ?? bisakah html digabungkan dengan hml ?? apa eda html dengan hml ?? mohon banget bos admin kerna saya adalah pemula baru banget
BalasHapusapakah harus ditimpa HTML nya ato langsung copy paste aja...
BalasHapusmaklum baru pemula,,,
Jalan2 sob...
BalasHapusTuker Link yuw ^_^
Ini ada contoh horizontal menu, vertical menu atau dropdown menu, tinggal download ajaa
BalasHapuswww.designedmenus.blogspot.com