Cara Membuat Tombol Search Responsive di Blog

Tombol Search berfungsi untuk melakukan pencarian artikel yang ada di website atau Blog sehingga pengguna tidak kesulitan dalam mencari artikel yang di inginkan.

Kotak Pencarian

Berikut adalah cara memasang tombol Search di blog :

Cara Pertama :

1. Masuk dan login ke Blog Anda
2. Klik Tombol Template > Edit Template
3. Tempatkan kode dibawah ini di atas ]]></b:skin>

#search-box{position:relative;
margin:0 auto;border:1px solid #ccc;
padding:5px;
border-radius:4px}
#search-form{height:40px;background-color:#fff;
overflow:hidden}#search-text{font-size:14px;color:#ddd;
border-width:0;
background:transparent;
line-height:15px}#search-box input[type="text"]{width:90%;
padding:10px 0 5px 1em;
color:#333;
outline:none}#search-button{position:absolute;
top:5px;right:5px;
height:40px;width:80px;
color:#fff;text-align:center;
border-width:0;
background-color:#8a9ac5;cursor:pointer;
text-transform:uppercase;
border-radius:3px;
outline:0}#search-button:hover{background:#333}

4. Save Template Anda
5. Kemudian Anda Tambah Gadget dengan cara Pilih Tata Letak > Tambah Gadget
6. Paste kode dbawah ini di kotak HTML :

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search....' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>

7. Kemudian SAVE

Cara kedua :

1. Plih Tata Letak kemudian klik Tambah Gadget
2. Paste semua kode dibawah ini di kolom HTML

<style type="text/css">
#search-box{position:relative;
margin:0 auto;border:1px solid #ccc;
padding:5px;
border-radius:4px}
#search-form{height:40px;background-color:#fff;
overflow:hidden}#search-text{font-size:14px;color:#ddd;
border-width:0;
background:transparent;
line-height:15px}#search-box input[type="text"]{width:90%;
padding:10px 0 5px 1em;
color:#333;
outline:none}#search-button{position:absolute;
top:5px;right:5px;
height:40px;width:80px;
color:#fff;text-align:center;
border-width:0;
background-color:#8a9ac5;cursor:pointer;
text-transform:uppercase;
border-radius:3px;
outline:0}#search-button:hover{background:#333}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search....' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>

Catatan :
*Yang membedakan cara kedua dan pertama adalah:
- Cara pertama menggunakan Edit Template untuk menempatkan kode CSS
- Cara kedua menggunakn Gadget dimana kode CSS di gabung dengan kode Form Search
- Pilih yang Anda anggap mudah

Sekian terimakasih semoga bermanfaa......