Okay,saya akan bahas disini. Jadi ikuti langkah-langkahnya :
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>
Cara membuat kode CSS untuk menu navigasi
Lihat kode dibawah ini :
#menu
{
margin-bottom: 10px;
height: 29px;
background: transparent ;
padding: 0px 0;
}
Kemudian, 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;
}
Maksudnya dari kode CSS diatas yaitu untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Kemudian, 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 cara-cara membuat Menu Navigasi. Langkah selanjutnya adalah menyimpan di blog kamu. Caranya :
* Masuk edit html
* Jangan kasih centang
* Cari kode ini :
]]></b:skin>
</head>
* Kalau sudah ketemu,kemudian letakkan kode berikut diatas kode HTML yang 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 di-paste,kemudian cari kode berikut
<!-- 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 -->
* Lalu ganti tulisan URL ANDA dengan link yang kamu maksud dan Text Anda diganti dengan nama masing-masing link
Selesai!!
Tinggal di-SAVE . . . .
Monday, January 5, 2009
Label: Panduan Blogger
Subscribe to:
Post Comments (Atom)
Posts
0 komentar:
Post a Comment