Cara Membuat Widget Kotak Pencarian Responsive Keren

Tanky Street

Cara Membuat Widget Search (Kotak Pencarian) Keren – Kotak pencarian atau dalam bahasa blogger blogspot dikenal dengan widget search box adalah halaman pencarian artikel pada blog, Widget ini dirasa wajib untuk dipasang diblog. karena dengan tambahan search button ini dapat memudahkan pengunjung atau visitor blog lebih mudah menemukan artikel yang dicari.

Membuat kotak pencarian di blog bukanlah hal yang sulit, anda pasti bisa memasang dengan mudah walaupun tidak mengenal kode html. Widget kotak pencarian yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan berbagai perangkat mobile. hal ini sangat penting karena hampir 50-80% pengunjung saat ini menggunakan perangkat mobile.
Untuk memasang kotak pencarian di blog, anda cukup melakukan dua langkah yaitu memasang kode css dan kode html berikut ini:

• Pasang Kode CSS terlebih dahulu .
• Login Blogger kemudian pilih menu template lalu pilih edit HTML .
• Copy dan pastekan kode dibawah ini tepat diatas < ]]></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}

Terakhir klik SAVE/Simpan

Selanjutnya Pasang Kotak Pencarian Pada Sidebar Blog

1. Masuk akun blogger anda, lalu pilih “Tata Letak”
2. Kemudian tambahkan gadget dan pilih HTML/Javascript.
3. Silahkan masukkan kode dibawah ini pada kolom HTML/Javascript

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

4. Jangan lupa Save/Simpan dan lihat hasilnya.

# Cara Paling Mudah Membuat Kotak Pencarian Keren
Cara yang kedua ini merupakan cara paling mudah yang bisa anda lakukan tanpa edit HTML. jika anda tertarik silahkan ikuti tutorial berikut ini:

1. Login akun Blogger anda.
2. Pilih menu “Tata Letak” kemudian pilih Add Gagdet, lalu pilih “HTML/Javascript”
3. Copy dan Paste kode berikut ini kedalam kolom “HTML/Javascript”

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

4. Selesai, jangan lupa klik Save/Simpan

Catatan:

• background-color: #1a7db7; adalah warna tombol search. jika anda ingin merubah warnanya silahkan ganti kode warna #1a7db7 dengan kode warna pilihan anda.
• Cari Artikel Disini… : Kata-kata dalam kolom pencarian.

Demikian 2 cara membuat kotak pencarian di blog semoga dapat bermanfaat, silahkan untuk praktek di blog pribadi anda.

Selamat Mencoba...

Read Also

Share this post

Get Link Facebook Messenger Whatsapp Whatsapp Twitter Telegram Linkedin Tumblr Pinterest

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://tankystreet.blogspot.com/. Terima kasih.