Kamis, 04 September 2014

Cara membuat menu navigasi menempel di atas blog

Top Navigation
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(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}
.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.
Good Luck "Watch your thoughts; they become words. Watch your words; they become actions. Watch your actions; they become habits. Watch your habits; they become character. Watch your character; it becomes your destiny." LaoTzu
Share this article

0 komentar:

Posting Komentar

 
Copyright © 2014 Clickme More • All Rights Reserved.
Clickme More | Template Design by BTDesigner • Powered by Blogger
back to top