Home » Tutorial Blogging » Cara Mudah Membuat Menu Melayang Diatas Header Blogger

Cara Mudah Membuat Menu Melayang Diatas Header Blogger

Cara Mudah Membuat Menu Responsive Melayang Diatas Header Blogspot - Istilah lain dari menu melayang adalah menu floating yaitu dimana menu tersebut ketika kita scroll ke bawah menu tersebut tetap melayang diatas header blog , nah mumpung disuasana liburan sekolah ini saya akan membagikan sebuah widget menu navigasi floating yang dapat dipasang diblog anda.

Sebenarnya untuk memodifikasi sebuah menu dropdown blog menjadi melayang sangatlah tidak terlalu sulit , kita hanya menggunakan fungsi sistem z-index yang berfungsi untuk membuat menu tersebut seolah-olah akan terlihat melayang. Dengan mengubah menu template blog anda menjadi melayang anda dapat mempunyai banyak keuntungan diantaranya yaitu , pageviews anda akan bertambah dua kali lipat dibandingkan sebelumnya , karena pengunjung akan terus tertarik dengan menu yang tersedia di blog anda

Selain menu melayang yang responsive , navigasi kali ini juga support valid html5 namun dalam valid css3 ada mengalamai kesalahan warning sedikit dikarenakan karena ada kode seperti webkit yang tidak support valid css3 , namun itu tak menjadi masalah dan tak perbengaruh pada seo blog sobat. Ok untuk demo menu navigasi silahkan tonton video dibawah ini :

Tutorial Membuat Menu Dropdown Melayang diatas Header

Seperti biasanya , silahkan sobat masuk ke Template => Edit Html
Cari kode <body> Tekan Ctrl + F secara bersamaan untuk mempermudah pencarian

Salin dan tempelkan kode dibawah ini tept diatas kode <body> tersebut

<div id='top-BD'>
<ul>
<li><a href='http://masyadi.com' target='_blank' title='Masyadi'>Masyadi</a></li>
<li><a href='http://masyadi.com' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://masyadi.com' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://masyadi.com' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://masyadi.com' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://masyadi.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+MasyadiBlog' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/AhmadSuyadi.04' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/FicriPebriyana' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div> 
</div>

Jangan di save dulu karena ada css yang harus kita pasang , silahkan pasang kode alien dibawah ini tepat 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(http://1.bp.blogspot.com/-hQKmPzvFCU8/Ue7FWBeCjMI/AAAAAAAABk8/0iFSHsrQijo/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}

Nah yang terkahir anda boleh klik tombol save

Itulah cara gampang Membuat Menu Navigasi yang Bisa Melayang diatas Header Blog Anda , Gimana cukup simple bukan untuk membuat widget semacam itu , nah jika agan tertarik silahkan aja ikuti tutorial diatas dan kemudian pasang di blog anda sekarang juga , semoga bermanfaat tutorial navigasi floating malam ini :D