Kali ini saya beruntung telah menemuakan sebuah tutorial yang saya cari-cari selama ini dan akhirnya ketemu juga di blog tetangga dengan judul "Membuat Kotak Search Blog Seperti Google". dan kaali ini saja juga akan membagikannya kepada sobat blogger semuanya tutorialnya Membuat Kotak Search Blog Seperti Google ini.
Langkah - langkah Membuat Kotak Search Blog Seperti Google :
1. Masuk ke Blogger dan login
2. Masuk kemenu Template lalu Edit Html
3. Cari kode ]]></b:skin>
4. Lalu Copy Scrip dibawah ini dan Pastekan tepat diatas code ]]></b:skin>
#search {background: #fff;border-radius: 2px;}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
Warna Merah itu ukuran lebar
5. Kemudian, copy kembali kode berikut, dan pastekan di HTML/Gedget.
<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinObyIRfIZTZToXezDIn-eWlPIWrXZ6IqIbXD1r7SDy2tvMFP-LWnMIrTfv_eFbc_XFGzUNxs7rzBOAXSkbBpR2iY59WAfAfAbX_fim4BtpY958GgwMNsjHPv2bz9VnJbscmavZ4NwVfXO/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinObyIRfIZTZToXezDIn-eWlPIWrXZ6IqIbXD1r7SDy2tvMFP-LWnMIrTfv_eFbc_XFGzUNxs7rzBOAXSkbBpR2iY59WAfAfAbX_fim4BtpY958GgwMNsjHPv2bz9VnJbscmavZ4NwVfXO/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>
6. Injoyyy...
^_^ Semoga Membantu......
0 Response to "Membuat Kotak Search Blog Seperti Google"
Post a Comment
Para pengurus Blog AHMADSHARED Tidak selalu Online untuk memantau Komentar yang Masuk, Jadi tolong berikan Komentar Anda dengan Pantas dan Layak dikonsumsi oleh Publik. No SARA, SPAM dan Sejenisnya.