Membuat menu navigasi melayang di blog - Di siang hari ini, saya akan membagi trik membuat menu navigasi menempel di atas blog. Kamu pastinya udah tau dong apa itu menu navigasi?? Sebelum saya membagi trik membuat menu navigasi menempel di atas blog ketika di scroll ini, saya kasih tahu dulu deh pengertiannya. Menu navigasi sangat dibutuhkan bagi para blogger, menu ini dibuat dengan tujuan memudahkan penelusuran bagi pengunjung blog hanya dengan sekali klik.
Nah, untuk melebih mudah kan pengunjung blog menjelajahi blog kamu, Kamu cukup membuat menu navigasi ini menempel di atas blog agar pengunjung tidak susah payah kembali ke atas blog kamu. Contohnya? yaa.. seperti blog saya ini.
Okey, sekarang cara membuatnya, simak baik-baik yaa!!
1. Masuk ke akun Blogger kamu
2. Pilih blog yang diinginkan lalu klik Template lalu Edit HTML
3. Cari kode ]]></b:skin> lalu letakan kode ini tepat di atasnya.
#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/AVvXsEhLlUC81caV0CWiQcW9cuwcj0R7miUUYTxskUmuhLMO3TEZ84-B_3cyOrnjBhGaMbnfFIdNIvk2hh6EGosN5rtzL4Zon783vLWkjNWLBPfUMnO2_YPi_-DqZIEjV9FIqRFEI3bv53LJW6w/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}
4. Oke, langkah pertama selesai, sekarang cari kode <body> lalu letakan kode ini tepat di bawahnya
<div id='top-Nav'> <ul> <li><a href='URL YANG DITUJU' target='_blank' title='MENU1'>MENU1</a></li> <li><a href='URL YANG DITUJU' target='_blank' title='MENU2'>MENU2</a></li> <li><a href='URL YANG DITUJU' target='_blank' title='MENU3'>MENU3</a></li> <li><a href='URL YANG DITUJU' target='_blank' title='MENU4'>MENU4</a></li> <li><a href='URL YANG DITUJU' target='_blank' title='MENU5'>MENU5</a></li></ul> <div class='Navsosial' style='margin:-30px 50px 0 0;'> <a class='rss' href='URL RSS FEED KAMU' rel='external nofollow' target='_blank' title='RSS Link'>
</a> <a class='googleplus' href='URL +GOOGLE KAMU' rel='external nofollow' target='_blank' title='googleplus'> </a> <a class='facebook' href='URL FACEBOOK KAMU' rel='external nofollow' target='_blank' title='facebook'> </a> <a class='twitter' href='URL TWITTER KAMU' rel='external nofollow' target='_blank' title='twitter'> </a> </div> </div>*Keterangan : Ganti tulisan warna biru dengan URL yang dituju apabila menu di klik
Dan ganti tulisan warna hijau dengan nama menunya
Buat yang ingin menghapus salah satu menu atau menambahkannya, tinggal hapus atau tambah kode.
<li><a href='URL YANG DITUJU' target='_blank' title='MENU1'>(namamenu)</a></li>
5. Kemudian tinggal di save :)
Sekian cara membuat menu navigasi menempel saat di scroll mouse kali ini, semoga bermanfaat..
Selamat mencoba dan Good luck !
0 komentar
Post a Comment
Hai, Mohon Komentar Yang Relevan Dan Tidak OOT!