Cara Membuat Menu Melayang Diatas Header

Istilah lain dari menu melayang adalah menu " Floating". Sebenarnya untuk memodifikasi sebuah menu dropdown menjadi melayang tidak terlalu sulit, kita hanya menggunakan fungsi sistem z-index yang berfungsi untuk membuat mwnu tersebut seolah-olah akan terlihat melayang. Untuk Membuat Menu Melayang Diatas Header, berikut langkah-langkahnya :

1. Login ke Blogger

2. Pilih Template =>> Edit HTML

3. Cari kode </body>

4. Copas kode dibawah ini diatas kode </body>

<div id='top-BD'>

<ul>

<li><a href='http://hideungmaniz.blogspot.com/'target='_blank' title='Home'>Home</a></li>

<li><a href='http://hideungmaniz.blogspot.com/'target='_blank' title='Sitemap'>Sitemap</a></li>

<li><a href='http://hideungmaniz.blogspot.com/' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>

<li><a href='http://hideungmaniz.blogspot.com/' target='_blank' title='Disclaimer'>Disclaimer</a></li>

<li><a href='http://hideungmaniz.blogspot.com/' target='_blank' title='Contact'>Contact</a></li></ul>

<div class='BDsosial' style='margin:-30px 50px 0 0;'>

<a class='rss' href='http://hideungmaniz.blogspot.com'rel='external nofollow' target='_blank' title='RSS Link'>

</a>

<a class='googleplus' href='https://plus.google.com/113357474463539035604' rel='external nofollow' target='_blank' title='googleplus'>

</a>

<a class='facebook' href='https://www.facebook.com/Rheina.Thea.1480' rel='external nofollow' target='_blank' title='facebook'>

</a>

<a class='twitter' href='https://twitter.com/rheinathea80' rel='external nofollow' target='_blank' title='twitter'>

</a>

</div> 

</div>

5. Selanjutnya cari kode ]]</b:skin>

6. Simpan kode dibawah ini diatas kode ]]</b:skin>

/*Nav Menu*/

#top-BD{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:48px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}

#top-BD ul{margin:0 auto;width:970px;list-style-type:none;height:30px}

#top-BD ul li{float:left}

#top-BD ul li a{position:relative;line-height:28px;border:1px solid;padding:10px 5px;color:#aaa;font-size:13px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none;font-weight:700;text-transform:uppercase;font-family:Geneva,Arial,Helvetica,sans-serif}

#top-BD ul li a:hover{color:#fff;border-top:3px solid #aaa}

.BDsosial a{display:block;height:50px;width:50px;padding:0 4px;float:right;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSiqR8eIB3OhGqFqaQnWFZrD_BvhAw0ttnrVClB-Yhl-pPUNwY7I4D-YSNc4HcJXwLne8zAqC5dq5Otey0FAJof1-PIUprd0qDwZ18lNOcfUiBk_3N2GQxu_JrkarMq8EorOOeOo6ndY/s1600/Sharing+buttons.png) no-repeat transparent;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;transition:all 0.2s ease-in;cursor:pointer}

.BDsosial a.googleplus{background-position:0 -58px}

.BDsosial a.googleplus:hover{background-position:0 0}

.BDsosial a.twitter{background-position:0 -290px}

.BDsosial a.twitter:hover{background-position:0 -232px}

.BDsosial a.facebook{background-position:0 -406px}

.BDsosial a.facebook:hover{background-position:0 -348px}

.BDsosial a.rss{background-position:0 -174px}

.BDsosial a.rss:hover{background-position:0 -116px}

7. Klik Simpan Template

Demikian Cara Membuat Menu Melayang Diatas Header, semoga artikel ini bisa membantu dan bermanfaat, selamat mencoba. Terimakasih...