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
Terimakasih agan informasinya sangat membanru :)
ReplyDeletehttp://goo.gl/21T1Mx