Cara Membuat Widget Kotak Pencarian Responsive Keren

Img: pixabay.

Halo Temans Bukandotnet yang berbahagia - Widget kotak pencarian atau widget search box memang cukup bermanfaat jika kita pasang di blog kita, yaitu untuk mempermudah para pengunjung blog (visitor) mencari artikel yang ada di blog kita menurut kata kunci yang mereka ketikan di kolom pencarian search box tersebut

Widget kotak pencarian yang akan kita pasang ini sudah responsive sehingga ukurannya akan menyesuaikan dengan berbagai perangkat yang digunakan secara otomatis

Cara pemasangan widget kotak pencarian ini cukup mudah dan anda pun pasti bisa memasangnya di blog kesayangan sobat yaitu dengan menambahkan kode CSS di bagian Edit HTML dan menempatkan kode HTML di bagian yang di inginkan

Berikut adalah penampakan Widget Kotak Pencarian yang akan kita pasang

Gimana ??? berminat untuk memasangnya ??? yuk simak cara membuat dan memasangnya di blogspot kita

Berikut langkah-langkah Cara Membuat Widget Kotak Pencarian Responsive Keren:

Langkah Pertama, Pasang Kode CSS

1. Masuk akun Blogspot sobat

2. ke menu Theme / Template >> Edit HTML

3. Cari kode ]]></b:skin> kemudian Copy kode dibawah ini dan Paste-kan 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}

NOTE: Kode diatas nantinya bisa sobat edit-edit lagi agar sesuai dengan keinginan sobat, atau biarkan seperti itu saja

4. Save Theme / Template

Langkah Kedua, Penempatan Posisi Widget

1. Pada Dashboard blogger pilih Tata Letak / Layout

2. Klik Tambah Gadget atau Add a Gadget

3. Pilih HTML/JavaScript

4. Masukan kode dibawah ini kedalam kolom HTML/JavaScript tersebut kemudian Save

<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>

Hasilnya seperti gambar dibawah

Jangan lupa di save iya ...Untuk posisinya silahkan sesuaikan dengan keinginan sobat

5. Selesai, silahkan cek penampakannya di blog sobat

Selain cara diatas, ada lagi cara lain yang lebih simpel, kalo mau coba silahkan saja

Berikut cara mudahnya:

1. Pada Dashboard blogger langsung saja pilih Tata Letak atau Layout

2. Pilih HTML/JavaScript

3. Masukan kode dibawah ini kedalam kolom HTML/JavaScript tersebut, kemudian Save

<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>

</div>

Hasilnya seperti berikut:

4. Selesai, selamat mencoba gaess

Demikianlah tutorial blogging ala Bukandotnet kali ini yaitu tentang Cara Membuat Widget Kotak Pencarian Responsive Keren di Blogspot, semoga bermanfaat

Referensi: penaindigo.com