Cara Membuat Kota Pencarian Responsive Di Blogger

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.

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

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

&amp;lt;div id=&amp;#039;search-box&amp;#039;&amp;gt;
&amp;lt;form action=&amp;#039;/search&amp;#039; id=&amp;#039;search-form&amp;#039; method=&amp;#039;get&amp;#039; target=&amp;#039;_top&amp;#039;&amp;gt;
&amp;lt;input id=&amp;#039;search-text&amp;#039; name=&amp;#039;q&amp;#039; placeholder=&amp;#039;Cari Artikel Disini ...&amp;#039; type=&amp;#039;text&amp;#039;/&amp;gt;
&amp;lt;button id=&amp;#039;search-button&amp;#039; type=&amp;#039;submit&amp;#039;&amp;gt;&amp;lt;span&amp;gt;Search&amp;lt;/span&amp;gt;&amp;lt;/button&amp;gt;&amp;lt;/form&amp;gt;&amp;lt;/div&amp;gt;

Klik Simpan dan lihat Hasilnya

Cara Kedua: Langsung menambahkan ke Gadget

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.

&lt;style&gt;
#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=&quot;text&quot;]
{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;}
&lt;/style&gt;
&lt;div id=&#039;search-box&#039;&gt;
&lt;form action=&#039;/search&#039; id=&#039;search-form&#039; method=&#039;get&#039; target=&#039;_top&#039;&gt;
&lt;input id=&#039;search-text&#039; name=&#039;q&#039; placeholder=&#039;Cari Artikel Disini...&#039; type=&#039;text&#039;/&gt;
&lt;button id=&#039;search-button&#039; type=&#039;submit&#039;&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/button&gt;
&lt;/form&gt;

Klik SAVE/SIMPAN

NOTE: Tulisan yang berwarna biru bisa kalian Edit sesuka hati kalian, dan kode #1a7db7; adalah kode untuk merubah warna korak pencariannya.

Nah bagaimana mudah dan tidak ribet,kan? cara membuat dan memasang kotak pencarian yang responsive dan support Mobile. Sekian untuk tutorial kali ini semoga bermanfaat.

Happy Blogging!!