PANDUANEKA

Aneka Panduan & Solusi Anda

12 August 2017

Cara Membuat Widget Search Box/Kotak Pencarian Responsive di Blog

Cara Membuat Search box/Kotak Pencarian di Blog - Search Box atau kotak penelusuran merupakan salah satu unsur navigasi penting yang wajib dipasang di blog, agar pengunjung blog kita mudah mencari artikel atau info yang mereka butuhkan.

Search box ini biasanya diletakkan di sidebar, dimana pengujung bisa melihatnya sehingga dengan bantuan search box bisa memasukkan keyword yang mereka ingin cari dan menemukan artikel yang inginkan.

Pada artikel kali ini saya akan memberikan panduan bagaimana membuat widget kotak pencarian sendiri dengan sedikit modifikasi. Karena hampir 80% pengguna browser saat ini menggunakan smartphone, maka widget search box yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan berbagai perangkat mobile.
Cara Membuat Widget Search Box/Kotak Pencarian Responsive di Blog

Tutorial Membuat Widget Kotak Pencarian Responsive Keren

Membuat kotak pencarian di blog sebetulnya sangat mudah, Anda pasti bisa memasang dengan mudah walaupun tidak mengenal kode html. Bagi Anda yang penasaran cara membuatnya, coba praktekan cara membuat Search Box/ Kotak Pencarian di sidebar blog berikut ini.

Anda bisa memasangnya melalui widget default Blogger yang sudah tersedia, caranya mudah :
1. Silahkan pilih Layout
2. Kemudian klik Tambahkan Gadget
3. Pilih widget Blog Search
Cara Membuat Widget Search Box/Kotak Pencarian Responsive di Blog

Kalau Anda kurang tertarik dengan widget bawaan Blogger, Anda bisa membuatnya sendiri. Untuk memasang kotak pencarian di blog, anda cukup melakukan dua langkah yaitu memasang kode css dan kode html

Pasang Kode CSS terlebih dahulu

1. Login Blogger kemudian pilih menu Template lalu pilih edit HTML.
2. Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>
/*Widget 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}

3. Terakhir klik Save/Simpan

Selanjutnya Pasang Kotak Pencarian Pada Sidebar Blog

1. Masuk akun blogger anda, lalu pilih Tata Letak
2. Kemudian klik 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 klik Simpan

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 > Add Gagdet > HTML/Javascript
3. Copy dan Paste kode berikut ini kedalam kolom HTML/Javascript
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
border: 1px solid #ebebeb;
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: #54a8d0;
cursor: pointer;
}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Enter keyword..." type="text" vk_1c225="subscribed" />
<button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>

atau model 2
<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:
Cara Membuat Widget Search Box/Kotak Pencarian Responsive di Blog
  • background-color: #54a8d0 dan #1a7db7 ; adalah warna tombol search. jika anda ingin merubah warnanya silahkan ganti dengan kode warna pilihan anda.
  • Enter Keyword atau Cari Artikel  Disini… : Kata-kata dalam kolom pencarian, bisa diganti dengan kata-kata Anda sendiri
Demikian panduan 2 cara membuat kotak pencarian di blog yang dapat Anda praktekkan di blog Anda, semoga dapat bermanfaat.

Selamat Mencoba.

2 comments:

  1. sipsss gan sangat membantu.......makasih

    ReplyDelete

  2. Good day! This post could not be written any better! Reading through this post reminds me of my old room mate! He always kept talking about this. I will forward this write-up to him. Fairly certain he will have a good read. Thanks for sharing! paypal credit login

    ReplyDelete

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya