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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRPbSLH-HJ9fqs79jJd6bFMBN26YeMceAyvz_03rg2v9uDELHSlIw-v_hTy-JrurzLfA62W8bRxiRcKJXYfIwSORsdYC0TjwfcyW_aUrDc2orIentHDLWcaxit_sgzlAPtBo95N2PpTw/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
0 Comments