Cara Membuat Menubar Melayang Diatas Header.
Kali ini saya akan menjelaskan bagaimana
Cara Membuat Menubar Melayang Diatas Header. Seperti pada penjelasan postingan sebelumnya di pembasan
Cara Membuat Menubar Pada Blog, saya akan menerangkan kembali apa itu yang disebut dengan
Menubar. Menubar
adalah sebuah kotak atau bar yang berisikan sebuah navigasi link. Fungsi dari Menubar
yaitu untuk menyimpan berbagai link-link penting pada suatu blog, agar blog tampil lebih rapih dan menarik, dan juga agar mempermudah para pengunjung untuk mengakses halaman-halaman utama pada blog tersebut. Berikut adalah contoh Gambar
Menubar melayang pada blog yang akan saya pakai pada pembahasan kali ini.
 |
| Contoh Menubar Melayang |
Cara Membuat Menubar Melayang Diatas Header sebetulnya hampir sama dengan
Cara Membuat Menubar Pada Blog, hanya saja berbeda pada bagian kode-kode script tertentu.
Berikut adalah
Cara Membuat Menubar Melayang Diatas Header seperti pada Gambar Menubar diatas :
- Masuk / Login ke blogger.com dengan menggunakan akun blog Anda.
- Masuklah pada halaman Template.
- Lalu klik Edit HTML kemudian Lanjutkan.
- Cari kode ]]></b:skin> menggunakan tombol pintas pada keyboard dengan menekan tombol " Ctrl + F " .
- Copy code skript di bawah ini :
/*Floating Menu*/
#obray_floating_menu_blue {
background: -moz-linear-gradient(bottom, #0BF 40%, #8CF 60%);
box-shadow: 0px 1px 3px rgba (0,0,0,0.4);
height:34px;
width:100%,min-width:1000px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #0ff;
}
#obray_floating_menu_blue ul {
list-style:none;margin:0 auto;width:1000px;
}
#obray_floating_menu_blue ul li {
float:left
}
#obray_floating_menu_blue ul li a {
line-height:34px;padding:0 15px;color:#fff;font-size:15px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0ff;display:block;text-decoration:none;border-right: 1px solid #0ff;
}
#obray_floating_menu_blue ul li a:hover {
background: -moz-linear-gradient(bottom,#0ff 5%, #0BF 10%, #008 85%)
}
- Kemudian taruh kode tersebut tepat diatas kode ]]></b:skin> .
Untuk lebih jelasnya lihat gambar dibawah ini :
 |
| Menubar Melayang |
- Jika sudah, tinggal mencari kode </head> menggunakan tombol pintas pada keyboard dengan menekan tombol " Ctrl + F " .
- Lalu copy dan taruh kode script berikut tepat dibawah kode </head> .
<!--Floating Menu-->
<div id='obray_floating_menu_blue'>
<ul>
<li>
<a href='
http://infogadget-bandung.blogspot.com/' title='
Beranda'>
Beranda</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
Belajar elektro dan informatika'>
Belajar elektro dan informatika</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
ResepMakanan'>
Resep Makanan</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
Otomotif'>
Otomotif</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
Download'>
Download</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
Jual Kucing Persia'>
Jual Kucing Persia</a></li>
<li><a href='
http://obray-inisetut.blogspot.com/' title='
Kontak Admin'>
Kontak Admin</a></li>
</ul>
</div>
- Tulisan berwarna merah bisa diganti dengan link url yang akan Anda gunakan pada menubar tersebut.
- Tulisan berwarna biru bisa diganti dengan nama tampilan menu yang Anda inginkan pada menubar tersebut
Agar lebih jelas cara menaruh kode scriptnya perhatikan gambar di bawah ini:
 |
| Menubar Melayang |
- Jika sudah menaruh kode script seperti pada Gambar diatas, Kemudian klik " Pratinjau template " terlebih dahulu agar tidak terjadi hal-hal yang tidak diinginkan.
- Jika sudah sesuai yang diinginkan, dan tidak terjadi hal yang tidak diingikan, silahkan klik " Simpan template " .
Demikian bagaimana
Cara Membuat Menubar Melayang Diatas Header yang saya sampaikan. Semoga dapat dimengerti dan dipelajari oleh Anda.
Semoga bermanfaat
.
Sekian Artikel Tentang Cara Membuat Menubar Melayang Diatas Header Cara Membuat Menubar Melayang Diatas Header yang bisa disajikan oleh Obray-inisetut.blogspot.com "(4.0)"
