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 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/AVvXsEjBbMDIUeI1HMgcE3nRJKjoSxdupgn0NIahrnvvBkN9WncbvPl1Dpev25Ga4lHURQ2s0dKuu-mZOZJePbnZUhwkOTF1RBsK9v3cUvou1-U2l3sqU_YUzAgc8viqBCDBD1eWDU4U-rTBT7M/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>
3 komentar
cek for comment....
wew keren templatenya seperti punya kang Ismet ya???
Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kbagi.com untuk info selengkapnya.
Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)
Komentar yang menyertakan
link aktif iklan atau titip linkakan dimasukan ke folder SPAMUntuk pertanyaan di luar topik artikel silahkan klik OOT.
Konversi Kode OOT