06.16
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.
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.
- 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://candratasmin.blogspot.com' target='_blank' title='Candratasmin'>Candratasmin</a></li>
<li><a href='http://candratasmin.blogspot.com' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://candratasmin.blogspot.com' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='candratasmin.blogspot.com' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='candratasmin.blogspot.com' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='candratasmin.blogspot.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+Candratasmin' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/sazka-can-Iqh' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/chandrarepikal' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>
<ul>
<li><a href='http://candratasmin.blogspot.com' target='_blank' title='Candratasmin'>Candratasmin</a></li>
<li><a href='http://candratasmin.blogspot.com' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://candratasmin.blogspot.com' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='candratasmin.blogspot.com' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='candratasmin.blogspot.com' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='candratasmin.blogspot.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+Candratasmin' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/sazka-can-Iqh' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/chandrarepikal' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>
4. 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/AVvXsEiS7H6h_UN5LSQ3vsW5CyJVWzrV1BTFF0Jgm666MwP6EmCPpoXjRW6LFsomRWd7Cay_Ij7dn2_ewc5MhGqExTzB9ypA5q4PMnBcE4lz3qipuOYIPqRM5XuKSOBuXTkEwLfYcXG4kGX5vic/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.
sangat bagus ini untuk menambah tampilan di blogger, bisa lwbih menarik pengunjung, terima kasih ...
BalasHapusdarei kemarin saya mencari info yang seperti ini, bagus untuk menambah menarik pengunjung, terimakasih
BalasHapusinfonya sangat menarik,bisa memercantik tampilan blogq
BalasHapus