K'ian pada kesempatan kali ini ingin membagi sebuah tips tentang cara membuat menu navigasi pada tampilan Blog. Menu navigasi untuk sebagian blogger master, dapat diartikan sebagai jalan pintas untuk menentukan tujuan kita ketika berada pada blog tsb.
Ada banyak cara untuk membuatnya,mulai dengan menggunakan code HTML standar ataupun dengan menggunakan kode javascript. Untuk kesempatan kali ini k'ian akan membagi satu resep dengan menggunakan Menu dari Template K'ian ini :
- Masuk kedalam account blog kamu..
- klik menu "layouts", -->> pilih "Edit HTML",-->> beri tanda centang / ceklist pada " expand templates wigdet".
- Copy kode dibawah ini dan letakkan didalam ket kode /* page struktur (bagi templates anima / klasik) atau diatas ]]></b:skin>,
kemudian cari kode berikut : <div id='wrapper'> atau kode <div id='outer-wrapper'> , kemudian copy kode dibawah ini tepat dibawahnya:/*Page menu*/
#navigasi{
height:34px;
background:#000000;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu ,#menu ul {
margin: 0px 5px 0px 5px;
padding: 0px;
list-style: none;
height:34px;
}
#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#5D0909;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#DFC3C3;
}
#menu li li a:hover, #menu li li a:active {
background:#971515;width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}
#menu li ul {
position: absolute; width: 150px; left: -999em;
z-index:200;}
#menu li:hover ul {left: auto;
display: block;}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
atau kamu langsung copy kode standart dibawah ini,<!-- navigasi -->
<div id='navigasi'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</div>
</div>
<!-- /navigasi -->
<div class='clear'></div>
nb : tulisan yg berwarna merah menunjukkan alamat link yg harus kamu isi contoh : http://kianhome.blogspot.com , sedangkan yg berwarna hijau adalah judul / nama untuk link yang kamu pasang tadi, contoh : "kianhome" . jika digabung akan jadi seperti ini :<div id='navigasi'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Post RSS'><span>Posts RSS</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'><span>Comments RSS</span></a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul></ul>
</div>
</div>
<!-- /navigasi -->
<div class='clear'/>
<li><a href='http://kianhome.blogspot.com' >kianhome</a></li>
semoga bermanfaat..
Makasih untuk triknya sobat...
makasih sob...!!!
makasih banyak sobat atas sarannya..sudah saya pasang tuh..tapi koq warnanya itam dan tulisannya gak keliatan, gimana cara ganti warnanya ya??
Tutorial yang mantap sobat...
terima kasih..
bro kalo kita mau mengelompokan, misal nya free template seperti punya anda ini yang kalo di klik isi nya ya template semua gitu,, gimana cara nya...??
Mohon di jawab secepat nya ya bro...??
Inilah tutorial yang sy cari, selama ini sy kesulitan bikin menu navigasi..Sy akan mencobanya. Makasih