Cara Membuat Kotak Pencarian Responsive

cara bikin search box responsive valid html 5
Template Responsive saat ini sedang menjadi primadona di kalangan blogger mania. Terlebih setelah pihak google mengumumkan secara resmi akan memprioritaskan situs yang mobile friendly. Meskipun demikian masih banyak sobat blogger yang masih bertahan dengan template lama yang sudah lama menemani mereka.

Tapi yang namanya perubahan lambat laun pasti akan diikuti juga meskipun dalam kurun waktu yang lumayan lama. Inilah yang terjadi pada sobat blogger khususnya di indonesia. Walaupun masih menggunakan template dengan desain lama, ada beberapa fitur yang sudah masuk dalam kategori responsive. Contohnya saja Kotak Pencarian yang bisa menyesuaikan sendiri dengan lebar layar monitor.

Untuk membuat search box responsive ini sebenernya sangat mudah karena kita hanya perlu menggunakan nilai dalam ukuran persentase (%). Untuk lebih jelasnya silahkan ikuti tutorial singkat di bawah ini.

1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Salin kode di bawah ini tepat di atas kode tersebut

#kotak-cari{position:relative;border:1px solid #ccc;width:70%; margin-left:15%;}
#kotak-form{height:40px;background-color:#fff;overflow:hidden}
#kotak-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#kotak-cari input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#kotak-tombol {position:absolute;top:0px;right:0px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;outline:0}
#kotak-tombol:hover{background:#333}

5. Save template
6. Klik tata letak atau layout
7. Klik Add Widget kemudian pilih HTML/JAVASCRIPT
8. Paste-kan kode di bawah ini ke dalamnya

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

9. Save dan lihatlah hasilnya.


Demikianlah tutorial sederhana membuat search box responsive yang bisa anda terapkan dalam semua template. Silahkan sesuaikan kode css yang ada agar sesuai dengan template yang anda gunakan. Semoga artikel ini berguna untuk anda yang sedang memodifikasi template.

Share :

Facebook Twitter Google+

E-Book Bisnis Online

Percaya atau Tidak - Website sederhana ini telah mendatangkan banyak pemasukan ke kantong saya. Bisnis Online itu sebenernya sangat mudah, selama kita tahu caranya. Caranya dapat anda baca di Ebook Strategi Bisnis Online - Membidik Target Tepat Sasaran.
1 Komentar untuk "Cara Membuat Kotak Pencarian Responsive"

Menu search box di atas telah saya implementasikan dalam beberapa template yang aku bagikan secara gratis.

Please Share & Follow US ON Google+

Back To Top