Cara Membuat Header melayang Dengan Search Box di Blog

Setia Share - Cara Membuat Header melayang Dengan Search Box di Blog - kali ini saya +helmi junior akan ngeshare tentang Tutorial Blogger, yaitu membuat header melayang plus search box di blog, seperti demo yang diatas blog ini, menu ini tetap melayang walaupun discroll kebawah, langsung saja ini tutorialnya.

Cara Membuat Header melayang Dengan Search Box di Blog

• Buka Blogger.com
• Masuk ke bagian Template -> Edit Html.
• Masukan kode berikut dibawah kode]]></b:skin>

#ss_floating_menu{background: #fff;height:70px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #48d;}
#ss_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ss_floating_menu ul li{float:left}
#_floating_menu ul li a{line-height:37px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;}
.menusearch{width:200px;float:right;margin:0 auto;padding:4px 15px 0 0;}
.searchform {margin-top:17px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;border:1px solid #ddd;}
.searchform input {font:normal 12px Arial;color: rgb(153, 153, 153);line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

• Kemudian masukan kode diberikut ini tepat dibawah kode </head>.

<div id='ss_floating_menu'>
<ul>
<div class='menusearch'>
<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='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg442r3CeV9YyBGQ3ljzglZmFzyKWQEtSKNVQ-fw1VITm-X6Gc3-FGDgmz2HJb7Uc3om5qGKeV8yUOg1jcJ7ziJULoojpv-1CzOY_4gp-a3LemPnV_Vqbnpy5xURrbkdQ9CWtSAbovNhVY/s24/search.png' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
  <li><a href='http://nama-blog.blogspot.com/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIBU90F3_y0Q5WbHhZEoYH10WJ2BcR0sZfH307zrmTQnHitM2NrlVWGvPiBh2K_jeUUof8d51nEomrMeUpw4fokqgJkuG5otZYuWCu6nUUoZA6zixMuPT9nxqw71xwb1jobbLnSHHNxij/s1600/Setia+Share+Logo.jpg' style='padding-top:5px;padding-left:10px;'/></a></li></ul>
</div>

• Simpan Template Sobat.

Notes : 
ganti "http://nama-blog.blogspot.com/" dengan nama blog sobat.
ganti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTIBU90F3_y0Q5WbHhZEoYH10WJ2BcR0sZfH307zrmTQnHitM2NrlVWGvPiBh2K_jeUUof8d51nEomrMeUpw4fokqgJkuG5otZYuWCu6nUUoZA6zixMuPT9nxqw71xwb1jobbLnSHHNxij/s1600/Setia+Share+Logo.jpg" dengan gambar blog sobat.

Selamat berkreasi, terima kasih sudah membaca Cara Membuat Header melayang Dengan Search Box di Blog, jika ada kejanggalan pada artikel diatas silahkan tanyakan pada kolom komentar. Semoga Bermanfaat.