Assalamualaikum Wr Wb. Kali ini saya akan berbagi mengenai cara membuat menu navigasi melayang / floating menu navigation on top. Yang dimaksud menu navigasi melayang yang saya maksudkan adalah menu yang selalu berada diatas tampilan header blog, bahkan saat kita menscroollnya kebawah, menu ini akan tetap berada di bagian atas tampilan blog kita. Contoh sederhana yang menggunakan menu ini adalah Kaskus dan termasuk blog saya sendiri.
Gambar diatas adalah preview menu melayang yang akan saya share disini. Sebenarnya untuk membuat menu / widget melayang sangatlah mudah, hanya menambahkan kode position:fixed pada bagian CSS html blog.
Okelah, langsung saja kita bahas cara membuat menu melayang satu ini
1.) Masuk ke Dashboard Blogger > Template > Edit Html
2.) Cari kode ]]></b:skin>
3.) Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
.toppic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_fVpQsKg4JPUQ0DzpwvrDzb_KXHyDTYK7-NTXOtqZ9QgGMzs5Cpw0eY4cjTgCoTsmIWzJuwr5XTA5aFxdAx8_vfwDjkjxDF4RmR5VHOMKGs5_ZW1Xmp-3LcKwZeTy4wStuRIkiSmUbOCn/s1600/toppic.png) repeat-x bottom;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;}
.topnav{width: 960px;height:47px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }
.fixmenu{color:#fff;font:bold 14px Verdana;float:left;padding-top:8px;}
.fixmenu a{color:#fff;margin-left:15px;}
.fixmenu a:hover{color:#101D2D}
.menusearch{width:240px;float:right;margin:0 auto;padding:0 auto}
.searchform {margin-top:0px;display: inline-block;zoom: 1;*display: inline;border:1px solid #333;padding:0;background:#fff;width:240px;height:24px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.searchform input {font-size:12px!important;font-weight:normal;font-family:Arial, Helvetica, sans-serif;color:#111;line-height:24px;height:24px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 195px;height:24px;border:0px;outline: none;line-height:24px;}
.searchform .searchbutton {border:none;margin:0;padding:0;font-size:12px;height:22px;width:24px;}
5.) Letakkan kode dibawah ini diatas kode </head>
Kode
<div class='toppic'>
<div class='topnav'>
<div class='fixmenu'>
<a href='#'>Menu 1</a>
<a href='#'>Menu 2</a>
<a href='#'>Menu 3</a>
</div>
<div class='menusearch'>
<div style='float:right;padding:5px 8px 0 0;'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Pencarian Kata Kunci'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HWVbhO_7TOvhLVWVwa7Lc-YEN40MZTZetQk_5Mz_Knhx7ODIvLYhtpX-PDXIkR3vMBn8zfkOPnKn5ZKXv6uHgYbjth3XX4-HX0ldF3di5_3_rMmKQk5byzLHnc6WLQVNreFX5-Co7SA/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div></div>
</div>
</div>
Tambahan :
1.) Anda dapat merubah Menu 1,2,3 dengan Nama Menu yang ingin anda tampilkan
2.) Anda dapat merubah # dengan Url / alamat link yang ingin anda sisipkan dalam menu
Semoga Berhasil dan bermanfaat
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Cara membuat menu navigasi melayang di blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
Related Posts
Cara Menampilkan Foto Profil di Hasil Pencarian Google
Dalam langkah ini sobat harus memberitahu Google bahwa sobat adalah Pemilik/Penulis Blog/Situs yang sobat huni sekarang.
Sobat harus menambahkan link profil Google + (Plus) ke dalam template ... [readmore]
Cara Membuat Floating Share Button Pada Blogger
Tidak
dapat di pungkiri bahwa share button baik itu facebook sahare, google
buzz, maupun yang lain turut andil dalam mempromosikan artikel blog
kita. Kali ini saya akan berbagi cara mema ... [readmore]
Cara Verifikasi Blog di Technorati
kali ini WN Update akan sedikit berbagi info mengenai Cara Verifikasi atau Claim Blog di Technorati. Technorati merupakan sosial bookmark atau salah satu situs search engine ... [readmore]
Membagi Widget Label Menjadi 2 atau 3 Kolom
Assalamu Alaikum Warahmatullahi Wabarakatuh. Kali ini saya akan Beragi cara membuat, Widget label yang sering kita gunakan untuk mengkelompokkan
posting. Terkadang tampilan widg ... [readmore]
Cara Membuat Artikel Terkait (Related Post)
Kali ini saya akan berbagi informasi mengenai Cara Membuat Artikel Terkait (Related Post).Pasti banyak yang bertanya-tanya, "apa sih untungnya buat Artikel terkait di blog ?"Nah ... [readmore]
No comments:
Post a Comment