Cara Membuat Kotak Pencarian SEO, Responsive dan User Friendly

Sobat. Menyambung artikel cara membangun blog berkualitas kemarin, kali ini akan Ane bagi tips cara membuat kotak pencarian SEO, responsive dan user friendly. Tentu sobat blogger tidak asing lagi dengan tampilan kotak pencarian yang sudah ada pada bawaan blogger atau bawaaan template hasil download, seperti bawaan template SEO, fast loading wuss dan responsive terbaik tahun 2015 ini. 

Apa sih hubungannya dengan judul artikel ini, kok pembahasannya malah jadi panjang lebar? Maksud saya begini Gan. Yang namanya blog berkualitas terdiri dari banyak komponen dasar, yang tersusun menjadi satu-kesatuan. Dalam hal ini sesuai dengan judul, adalah bagaimana membuat kotak pencarian, namun bisa membuat blog menjadi SEO, kenceng banget loadingnya (seperti di blog SL ini) dan tentu user friendly.

Selain daripada itu, artikel ini juga ada kaitannya dengan judul artikel sebelumnya di blog SL (Ingat kemaren blog SL posting apa?). Ini dah saya ingatkan dengan screen shot kecepatan loading blog SL:

Oleh karena itu, blog SL mau berbagi (hasilnya sama persis dengan blog SL)  tentang hal ini. Tidak lain supaya blog rekan-rekan juga wuss kenceng seperti blog SL.

Cara membuat Kotak Pencarian SEO, fast loading wuss dan user friendly
Langsung saja mari kita awali dengan berdo'a dulu. Selanjutnya:
1. Masuk akun blogger > layout/tata letak > Tambahkan gadget/widget > HTML/Java Script
2. Copy dan pastekan kode HTML berikut di dalam widget tadi

<!-- SEARCH BOX ALA BLOG SL -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form{height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text{font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Tips dan Template...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->

4. Save template
5. Baca Hamdallah

***.Note: 
1. Untuk modifikasi dalam bentuk lain, silakan buka artikel berikut [maaf, sudah waktunya rehat jadi agak tergesa-gesa].
2. Hasil kotak pencarian ini sesuai dengan di blog SL

Good luck!
(http://sahilluqman.blogspot.com/)