Cara Membuat Kotak Pencarian Responsive di Blog

Cara Membuat Kotak Pencarian (Search Box) Responsive di Blog – Bagi seorang blogger atau pemilik blog, membuat kotak pencarian (search box) itu sangat penting. Dikarenakan, bagi sebuah website atau blog, kita wajib harus memiliki kotak pencarian (search box) karena dapat memudahkan pengunjung mencari artikel apa yang mereka cari.

Cara Membuat Kotak Pencarian di Blog – Sebenarnya, situs blogger sudah menyediakan sistem widget pencarian default (Search box), tetapi widget pencarian tersebut tidak responsive atau bisa dibilang tidak mobile friendly. Nah disini saya akan memberikan untuk anda kotak pencarian (Search box) yang responsive maupun mobile friendly.

Anda juga bisa meletakkan kotak pencarian ini dimanapun yang anda inginkan seperti di sidebar, footer ataupun header. Nah, kita langsung saja ke intinya dan ikuti tutorial Cara Membuat Kotak Pencarian Responsive di Blog.

1. Pergi ke dashboard blogger anda.

2. Klik tata letak.

3. Add widget, lalu copy dan paste kode script yang saya berikan dibawah ini.

4. Paste di add widget html/java script.

<div id=’search-box’>

    <form action=’/search’ id=’search-form’ method=’get’ target=’_top’>

    <input id=’search-text’ name=’q’ placeholder=’Search…‘ type=’text’/>

    <button id=’search-button’ type=’submit’><span>Search</span></button></form></div>

5. Ganti warna merah dengan kata-kata yang anda inginkan. Lalu klik simpan, simpan template dan lihat hasilnya.

1. Pergi ke Dashboard.

2. Lalu klik template.

3. Edit HTML.

4. Lalu cari kode ]]></b:skin> (Gunakan CTRL + F agar pencarian lebih mudah).

5. Lalu pastekan kode script dibawah ini tepat di atas kode ]]></b:skin>

#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:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}

6. Lalu klik simpan template dan lihat hasilnya.

1. Pergi ke dashboard.

2. Klik tata letak, add widget.

3. Lalu cari penelusuran.

4. Lalu setting sesuai dengan keinginan anda.

5. Save, Save template. Selesai dan lihat hasilnya.

1. Pergi ke dashboard.

2. Klik tata letak, add widget.

3. Copy dan Paste kode script dibawah ini.

<style>

.cf:before, .cf:after{

    content:””;

    display:table;

}

.cf:after{

    clear:both;

}

.cf{

    zoom:1;

}   

 /* Form wrapper styling */

.search-wrapper {

width: 220px;

margin: 45px auto 50px auto;

box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);

}

/* Form text input */

.search-wrapper input {

width: 138px;

height: 20px;

padding: 10px 5px;

float: left;

font: bold 15px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;

border: 0;

background: #EEE;

border-radius: 3px 0 0 3px;

}

.search-wrapper input:focus {

    outline: 0;

    background: #fff;

    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}

.search-wrapper input::-webkit-input-placeholder {

   color: #999;

   font-weight: normal;

   font-style: italic;

}

.search-wrapper input:-moz-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}

.search-wrapper input:-ms-input-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}   

/* Form submit button */

.search-wrapper button {

overflow: visible;

position: relative;

float: right;

border: 0;

padding: 0;

cursor: pointer;

height: 40px;

width: 72px;

font: bold 15px/40px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;

color: white;

text-transform: uppercase;

background: #D83C3C;

border-radius: 0 3px 3px 0;

text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);

}

.search-wrapper button:hover{    

    background: #e54040;

}  

.search-wrapper button:active,

.search-wrapper button:focus{  

    background: #c42f2f;

    outline: 0;  

}

.search-wrapper button:before { /* left arrow */

    content: ”;

    position: absolute;

    border-width: 8px 8px 8px 0;

    border-style: solid solid solid none;

    border-color: transparent #d83c3c transparent;

    top: 12px;

    left: -6px;

}

.search-wrapper button:hover:before{

    border-right-color: #e54040;

}

.search-wrapper button:focus:before,

.search-wrapper button:active:before{

        border-right-color: #c42f2f;

}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

    border: 0;

    padding: 0;

}   

</style>

<form action=”/search” class=”search-wrapper cf”>

        <input type=”text” method=”get” name=”q” placeholder=”Search here…” required=”” />

        <button type=”submit”>Search</button>

    </form>

4. klik Save, Save Template.

5. Ganti warna merah sesuai dengan keinginan anda dan lihat hasilnya.

Baca juga:

Cukup sekian untuk Cara Membuat Search Box Responsive di Blog. Semoga bermanfaat dan berguna dan jangan lupa untuk mengshare dan berlangganan dengan kami hanya dengan submit via email sekarang juga!