Cara Membuat Menubar Melayang

Cara Membuat Menubar Melayang - Kali ini saya akan memberikan tutorial Cara Membuat Menubar Melayang seperti Blog Mas Sugeng. Ok langsung saja dipraktikkan:

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas 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;
}

7. Selanjutnya cari kode <body>
8. Pasang kode di bawah ini di dibawah kode yang bercetak tebal pada no 7

<div id='top-nav'>
<ul>
<li><a href='/' title='Kembali ke Beranda'>Home</a></li>
<li><a href='/?m=1' rel='nofollow' title='Lihat Tampilan Versi Mobile'>Versi Mobile</a></li>
<li><a href='https://plus.google.com/112437625353652429272/about' title='Tentang Dream Artver'>About</a></li>
<li><a href='http://www.dariku.net/2013/02/daftar-isi-darikunet.html' title='Daftar Isi Lengkap'>Sitemap</a></li>
<li><a href='#' title='Kebijakan Privasi'>Privacy Policy</a></li>
<li><a href='#' title='Sanggahan'>Disclaimer</a></li>
<li><a href='#' title='Pasang Iklan Murah'>Pasang Iklan</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Keterangan:

Ganti tulisan yang berwarna Merah dan tanda # dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
Ganti tulisan berwarna Biru dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
Untuk mengubah panjang menubar bisa sobat ganti tulisan yang berwarna Hijau menjadi ukuran wrapper yang sobat gunakan.

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku