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.






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 :

1. Masuk / Login ke blogger.com dengan menggunakan akun blog Anda.
2. Masuklah pada halaman Template.
3. Lalu klik Edit HTML kemudian Lanjutkan.
4. Cari kode  ]]></b:skin> menggunakan tombol pintas pada keyboard dengan menekan tombol " Ctrl + F " .
5. 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%)
}

     6.  Kemudian taruh kode tersebut tepat diatas kode ]]></b:skin> .
          Untuk lebih jelasnya lihat gambar dibawah ini :





      7.  Jika sudah, tinggal mencari kode </head> menggunakan tombol pintas pada keyboard dengan          menekan tombol " Ctrl + F "
       8.  Lalu copy dan taruh kode script berikut tepat dibawah kode  </head> .

     

<!--Floating Menu-->
<div id='obray_floating_menu_blue'>
<ul>
<li>
  <a href='http://produkjepara.blogspot.com/' title='Beranda'>Beranda</a></li>
<li><a href='http://produkjepara.blogspot.com/' title='Belajar elektro dan informatika'>Belajar elektro dan informatika</a></li>
<li><a href='http://produkjepara.blogspot.com/' title='ResepMakanan'>Resep Makanan</a></li>
<li><a href='http://produkjepara.blogspot.com/' title='Otomotif'>Otomotif</a></li>
<li><a href='http://produkjepara.blogspot.com/' title='Download'>Download</a></li>
<li><a href='http://produkjepara.blogspot.com/' title='Jual Kucing Persia'>Jual Kucing Persia</a></li>
<li><a href='http://produkjepara.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
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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://produksijepara.blogspot.com/2014/08/cara-membuat-menubar-melayang-diatas.html. Terima kasih sudah singgah membaca artikel ini.