 |
| Header Melayang |
Cara Membuat Header Melayang Dengan Search Box di Blogger - Selamat Malam..!!
Salam Hangat Buat yang baca.. pada kesempatan malam ini admin mau share cara membuat header melayang pada blogger dengan fitus search Box di blogger screen shot ada di atas klik untuk memperjelas gambar..! oke langsung aja kita ke TK. biar Tutornya cepet selesai..
- Login Ke blogger Sahabat..!
- Masuk ke bagian Template -> Edit Html.
- Cari kode ]]></b:skin> Tekan CTRL + F untuk Mempermudah pencarian
- Copy kode di bawah ini Tepat di atas 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}
5. Kemudian Copy kode di bawah 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=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='''
type='text' value='Search here....'/>
<input
class='searchbutton'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_I_QNDCOq_vxbnNeybKnQ5gPM5wuw5l3Kohs6wDKnBTJR2sQWQcCKpHeDlUURAPlsD93-02NmAk0Kji-cAnU8UYW2hJSPLnBQ9v3zOzcI0saYek1N_HX7TDev3Z7IOk9uqhy-s1cara4/s24/search.png'
style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
<li><a href='http://Maftuhijore.blogspot.com/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHPz2aUkXb4DuUxxGl0l0PYnVe1cDd2y8yz0jGqnJ-gkcQsNwQMTN_7gkmmjH2-07bpxvQS2as4PuZwkJ6OQCnXULQh3k-odwsqlpAzmhznvNnycM3Dz-Y6gwU4aYdXEmOyI67EsCJfbF/s1600/SI5.png' style='padding-top:5px;padding-left:10px;'/></a></li></ul>
</div>
6. Save Template Sobat..!!
dan Lihat apa yang terjadi...
Hore blognya tambah amazing...
NB :
Ganti Texs Berwarna Merah dengan URL blog sahabat..!
ganti Texs berwarna Pink dengan URL Logo/gambar blog Sahabat
Semoga bermanfaat..!
Title : Cara Membuat Header Melayang Dengan Search Box di Blogger
Description : Header Melayang Cara Membuat Header Melayang Dengan Search Box di Blogger - Selamat Malam..!! Salam Hangat Buat yang baca.. pada kese...