Sabtu, 29 Juni 2013

Cara membuat menu navigasi melayang di blogger




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(http://4.bp.blogspot.com/-uFDowi2oBsM/UO1SfU8mj1I/AAAAAAAACOk/jWTMY1BVoJU/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;}
4.) lalu cari kode </head>
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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Pencarian Kata Kunci'/>
<input class='searchbutton' src='http://1.bp.blogspot.com/-N_4TWVUmXv4/UDdKJf5NwCI/AAAAAAAAIgY/AGrKXgwkrTo/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div></div>
</div>
</div>
6.) Simpan Template

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

About the Author

yoga hadi

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Posting Komentar

 
CTR(Computer Tips & Trik © 2015 - Blogger Templates Designed by Templateism.com