Okelah, kali ini saya akan menjelaskan bagaimana cara membuat menurbar melayang pada blog anda. seperti yang saya lakukan pada blog saya, sebenarnya tujuan saya membuat menurbar lagi, karena menubar pada template bawaan saya sudah penuh :D, oke langsung saja liat tutorialnya:
Cara membuat menubar melayang:
1. Login terlebih dahulu kedalam akun blogger anda.
2. Masuk pada halaman Template lalu Edit HTML
3. Klik centang pada Expand Template Widget
4. Cari kode ]]></b:skin> gunakan tombol kombinasi CTRL+F untuk mempercepat pencarian
5. Copy dan Paste kode dibawah ini tepat diatas kode ]]></b:skin>
/* NAVIGASI */
#top-nav {
background:#333;
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
height:28px;
width:100%;
min-width:970px;
position:fixed;
top:0;
left:0;
z-index:9999;
overflow:hidden;
border-bottom:1px solid #000;
}
#top-nav ul {
margin:0 auto;
width:970px;
}
#top-nav ul li {
float:left;
}
#top-nav ul li a {
line-height:28px;
padding:0 15px;
color:#aaa;
font-size:13px;
text-shadow:0px -1px 0px #000;
display:block;
text-decoration:none;
}
#top-nav ul li a:hover {
color:#fff;
}
#top-nav {
background:#333;
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
height:28px;
width:100%;
min-width:970px;
position:fixed;
top:0;
left:0;
z-index:9999;
overflow:hidden;
border-bottom:1px solid #000;
}
#top-nav ul {
margin:0 auto;
width:970px;
}
#top-nav ul li {
float:left;
}
#top-nav ul li a {
line-height:28px;
padding:0 15px;
color:#aaa;
font-size:13px;
text-shadow:0px -1px 0px #000;
display:block;
text-decoration:none;
}
#top-nav ul li a:hover {
color:#fff;
}
Catatan : warna hijau bisa anda rubah sesuai yang anda inginkan, warna hijau menandakan ukuran dari menubarnya
6. Selanjutnya cari kode <body>
7. Copy dan paste kode dibawah ini dibawah kode <body>
<div id='top-nav'>
<ul>
<li><a href='#' title='Kembali ke Beranda'>Home</a></li>
<li><a href='#' title='Kebijakan Privasi'>Tukar Link</a></li>
<li><a href='#' title='Pasang Iklan Murah'>Pasang Iklan</a></li>
</ul>
</div>
<ul>
<li><a href='#' title='Kembali ke Beranda'>Home</a></li>
<li><a href='#' title='Kebijakan Privasi'>Tukar Link</a></li>
<li><a href='#' title='Pasang Iklan Murah'>Pasang Iklan</a></li>
</ul>
</div>
Catatan :
- Tanda # yang berwarna orange ganti dengan URL link menubar yang di inginkan
- Tulisan berwarna merah ganti dengan title yang anda inginkan
- Tulisan berwarn biru bisa anda ganti dengan judul menu bar yang anda inginkan
Referansi : http://blogdari-ku.blogspot.com/2013/02/cara-membuat-menubar-melayang.html
No comments:
Post a Comment