Menu navigasi sangat dibutuhkan di dalam sebuah situs web manapun, karena dengan adanya menu navigasi maka akan mempermudah pengunjung menjelajahi website tersebut, sehingga pengunjung tersebut tidak akan tersesat di dalam menjelajahi sebuah website, lalu langsung pergi karena bingung, Kadang kita sendiri jengkel ketika mejelajahi senuah situs untuk mencari artikel tetapi situs terbut tidak menyediakan menu navigasi, nah berikut trik cara membuat menu navigasi floating di bagiatan atas blog agar mempermudah pengunjung menjelajahi blog atau situs kita, selamat mencoba:
Letakan kode dibawah berikut tepat di atas ]]></b:skin>
#top-Nav{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-Nav ul{margin:0 auto;width:970px;list-style-type:none;height:30px}
#top-Nav ul li{float:left}
#top-Nav 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-Nav ul li a:hover{color:#fff;border-top:3px solid #aaa}
.Navsosial a{display:block;height:50px;width:50px;padding:0 4px;float:right;background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcHrEbEtF0CK___Z_EvmQ6dGsx-vMgGt_yb5hbjE1zaHAytdGdisKdmzfFvTEDgQ6qwWnv-OFCewJrK6N2stiz-tIv0j-A15p72KIZwE8fOcQDjcsGrEo5zbz7nhMVoEe66FO0zeFewvI/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}
.Navsosial a.googleplus{background-position:0 -58px}
.Navsosial a.googleplus:hover{background-position:0 0}
.Navsosial a.twitter{background-position:0 -290px}
.Navsosial a.twitter:hover{background-position:0 -232px}
.Navsosial a.facebook{background-position:0 -406px}
.Navsosial a.facebook:hover{background-position:0 -348px}
.Navsosial a.rss{background-position:0 -174px}
.Navsosial a.rss:hover{background-position:0 -116px}
Lalu letakan kode berikut di bawah kode; <body>
<div id='top-Nav'>
<ul>
<li><a href='http://antoncabon4u.blogspot.com/' target='_blank' title='antoncabon4u'>Antoncabon4u</a></li>
<li><a href='http://antoncabon4u.blogspot.com/' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://antoncabon4u.blogspot.com/' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://antoncabon4u.blogspot.com/' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://antoncabon4u.blogspot.com/' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='Navsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://antoncabon4u.blogspot.com/' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+antoncabon' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/antoncabon' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/antoncabon' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>
Kemudian Save.
Demikianlah Artikel Cara Membuat Menu Navigasi Menempel di Atas Blog
Sekian Artikel Cara Membuat Menu Navigasi Menempel di Atas Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Androkomp.net kali ini semoga bisa bermanfaat.
Anda sedang membaca artikel Cara Membuat Menu Navigasi Menempel di Atas Blog dan artikel ini url permalinknya adalah https://trajumas11.blogspot.com/2015/02/cara-membuat-menu-navigasi-menempel-di.html Semoga artikel ini bisa bermanfaat.
Tag : Tips Blogger,