 |
| Top Navigation |
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUH7I1mJvGEwgto0j6T2-k063N-J52cPkgwOTj7AwKgSt4T54AGpF6t2c98RwaUTjxOC6KraEIseGJjh7rpWIOgehVNVTwUYEL59La8xH6lk1lYu3FJ5ZOs817LB62mXGEfdAU45s8hWw/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 <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.
0 komentar:
Posting Komentar