Cara Gampang Menciptakan Sajian Melayang Diatas Header Blogger
Cara Praktis Membuat Menu Responsive Melayang Diatas Header Blogspot - Istilah lain dari hidangan melayang yakni hidangan floating yaitu dimana hidangan tersebut dikala kita scroll ke bawah hidangan tersebut tetap melayang diatas header blog , nah mumpung disuasana liburan sekolah ini aku akan membagikan sebuah widget hidangan navigasi floating yang sanggup dipasang diblog anda.
Sebenarnya untuk memodifikasi sebuah hidangan dropdown blog menjadi melayang sangatlah tidak terlalu sulit , kita hanya memakai fungsi sistem z-index yang berfungsi untuk menciptakan hidangan tersebut seakan-akan akan terlihat melayang. Dengan mengubah hidangan template blog anda menjadi melayang anda sanggup memiliki banyak laba diantaranya yaitu , pageviews anda akan bertambah dua kali lipat dibandingkan sebelumnya , alasannya yakni pengunjung akan terus tertarik dengan hidangan yang tersedia di blog anda
Selain hidangan melayang yang responsive , navigasi kali ini juga support valid html5 namun dalam valid css3 ada mengalamai kesalahan warning sedikit dikarenakan alasannya yakni ada isyarat menyerupai webkit yang tidak support valid css3 , namun itu tak menjadi problem dan tak perbengaruh pada seo blog sobat. Ok untuk demo hidangan navigasi silahkan tonton video dibawah ini :
Sebenarnya untuk memodifikasi sebuah hidangan dropdown blog menjadi melayang sangatlah tidak terlalu sulit , kita hanya memakai fungsi sistem z-index yang berfungsi untuk menciptakan hidangan tersebut seakan-akan akan terlihat melayang. Dengan mengubah hidangan template blog anda menjadi melayang anda sanggup memiliki banyak laba diantaranya yaitu , pageviews anda akan bertambah dua kali lipat dibandingkan sebelumnya , alasannya yakni pengunjung akan terus tertarik dengan hidangan yang tersedia di blog anda
Selain hidangan melayang yang responsive , navigasi kali ini juga support valid html5 namun dalam valid css3 ada mengalamai kesalahan warning sedikit dikarenakan alasannya yakni ada isyarat menyerupai webkit yang tidak support valid css3 , namun itu tak menjadi problem dan tak perbengaruh pada seo blog sobat. Ok untuk demo hidangan navigasi silahkan tonton video dibawah ini :
Tutorial Membuat Menu Dropdown Melayang diatas Header
- Seperti biasanya , silahkan sahabat masuk ke Template => Edit Html
- Cari isyarat
<body>Tekan Ctrl + F secara bersamaan untuk mempermudah pencarian - Salin dan tempelkan isyarat dibawah ini tept diatas isyarat
<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 alasannya yakni ada css yang harus kita pasang , silahkan pasang isyarat alien dibawah ini sempurna 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/AVvXsEhA-cCcZTdmJDUtoIYKborvrN1fun1dBcoilkKhDsTUHe8_shcny3GRy_5XU0g2hemFyyAITiYC4jiMHGGoOAgmFF71ME3wZit0zhQaMNbo_HBtxFbjGUv2mThQG83PvjcDgxGEoyVRWGo/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