Cara Menciptakan 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, semoga pengunjung blog kita gampang mencari artikel atau gosip yang mereka butuhkan.

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

Pada artikel kali ini saya akan memperlihatkan panduan bagaimana menciptakan widget kotak pencarian sendiri dengan sedikit modifikasi. Karena hampir 80% pengguna browser dikala ini memakai smartphone, maka widget search box yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan banyak sekali perangkat mobile.

Tutorial Membuat Widget Kotak Pencarian Responsive Keren

Membuat kotak pencarian di blog gotong royong sangat mudah, Anda niscaya sanggup memasang dengan gampang walaupun tidak mengenal isyarat html. Bagi Anda yang ingin tau cara membuatnya, coba praktekan cara menciptakan Search Box/ Kotak Pencarian di sidebar blog berikut ini.

Anda sanggup memasangnya melalui widget default Blogger yang sudah tersedia, caranya gampang :
1. Silahkan pilih Layout
2. Kemudian klik Tambahkan Gadget
3. Pilih widget Blog Search

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

Pasang Kode CSS terlebih dahulu

1. Login Blogger kemudian pilih hidangan Template kemudian pilih edit HTML.
2. Copy dan pastekan isyarat dibawah ini sempurna 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, kemudian pilih Tata Letak
2. Kemudian klik Tambahkan Gadget dan pilih HTML/Javascript.
3. Silahkan masukkan isyarat 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 Praktis Membuat Kotak Pencarian Keren

Cara yang kedua ini merupakan cara paling gampang yang sanggup Anda lakukan tanpa edit HTML. jikalau Anda tertarik silahkan ikuti tutorial berikut ini:

1. Login akun Blogger anda.
2. Pilih hidangan >Tata Letak > Add Gagdet > HTML/Javascript
3. Copy dan Paste isyarat 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:

• background-color: #54a8d0 dan #1a7db7 ; ialah warna tombol search. jikalau anda ingin merubah warnanya silahkan ganti dengan isyarat warna pilihan anda.
• Enter Keyword atau Cari Artikel  Disini… : Kata-kata dalam kolom pencarian, sanggup diganti dengan kata-kata Anda sendiri

Demikian panduan 2 cara menciptakan kotak pencarian di blog yang sanggup Anda praktekkan di blog Anda, semoga sanggup bermanfaat.

Selamat Mencoba.

Share this post