Selamat Datang Di IMAMKUNBLOG - Hei sobat semuanya sudah beberapa hari ini saya belum update blog ini. Dan pada kali ini saya selaku admin disini kwkwkw akan membagikan sebuah Tutroial Cara membuat Kotak Pencarian yang Responsive di blogger.

Sebenarnya pada saat sobat mengganti theme sudah ada kotak pencariannya tetapi terkadang ada juga yang tidak ada kotak pencariannya. Sebenarnya membuat kotak pencarian itu bukanlah hal yang susuah/sulit itu bisa dibilang gampang dan mudah untuk dterapkan di blog sobat.

Cara Membuat Kota Pencarian Responsive Di Blogger

Mengapa harus memasang widget kotak pencarian di blog? Dengan adanya mesin pencarian di blog sobat, itu akan mempermudah pengunjung untuk mencari artikel-artikel yang ingin dicari oleh sih pengunjung.

Kotak pencarian yang saya bagikan kali ini untuk blogger dan sangat responsive dan sangat didukung perangkat mobile pastinya.

Cara Pemasangan Kotak Pencarian Di Blogger

Cara Pertama : Memasang Lewat HTML Template Blog

• Login ke blogger
• Pada bagian dasbor pilih Theme/Template
• Kemudian cari kode ]]></b:skin> Copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

/*Search Box*/
#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:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}

• Kemudian Klik SAVE/SIMPAN
• Selanjutnya masuk ke menu TATA LETAK
• Kemudian klik Tambahkan Gadget lalu pilih HTML Javascript
• Lalu Copy dan Paste Kode dibawah ini 

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

• Klik Simpan dan lihat Hasilnya

• Log in ke blogger
• Pada dasabor menu pilih Tata Letak
• Kemudian klik Tambahkan Gadget
• Dan klik HTML Javascript

Cara Membuat Kota Pencarian Responsive Di Blogger

• Lalu copy dan pastekan kode dibawah ini dan letakkan di kolom HTML Javascript seperti gambar diatas.

<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: #1a7db7;
-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 Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>