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
9 Komen Cara Mudah Membuat Menu Melayang Diatas Header Blogger
Menarik tutorial menu melayang nya Mas. saya ambil ya Mas makasih
silahkan diambil kang saud :D
Manteb mas yadi, ijin praktek ya biar blog saya melayang-layang he he he
Di coba kang thanks
wih...kayaknya mantep nih menu navigasi kayak gini, izin nyoba install ke template ya gan, makasih :)
makasih banyak teman, thanks for sharing :D
Jika di buka di hp apakah akan sama
test a
admind ajg :v
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish