Cara Menciptakan Kotak Pencarian (Search Box) Responsive Di Blog

Cara Membuat Kotak Pencarian (Search Box) 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) alasannya ialah mampu 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 mampu dibilang tidak mobile friendly. Nah disini saya akan menunjukkan untuk anda kotak pencarian (Search box) yang responsive maupun mobile friendly.

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

Cara Membuat Kotak Pencarian (Search Box) Responsive di Blog

1. Pergi ke dashboard blogger anda.

2. Klik tata letak.

3. Add widget, kemudian re-create dan glue aba-aba script yang saya berikan dibawah ini.

4. Paste di add together 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.

Cara Membuat Kotak Pencarian (Search Box) Responsive melalui Edit HTML.

1. Pergi ke Dashboard.

2. Lalu klik template.

3. Edit HTML.

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

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

#search-box{position:relative;margin:0 auto;border:1px enterprise #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.

Cara Membuat Kotak Pencarian (Search Box) Bawaan Blogger.

1. Pergi ke dashboard.

2. Klik tata letak, add together widget.

3. Lalu cari penelusuran.

4. Lalu setting sesuai dengan keinginan anda.

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

Cara Membuat Kotak Pencarian (Search Box) Keren di Blog

1. Pergi ke dashboard.

2. Klik tata letak, add together widget.

3. Copy dan Paste aba-aba 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 push */

.search-wrapper push {

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: enterprise solid enterprise 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 { /* withdraw extra push 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:

• Cara Mudah Memasang Kolom Komentar Disqus di Blog
• 2 Cara Memasang Tombol Share Melayang di Kiri Blog
• Cara Membuat Syntax Highlighter Berwarna di Blog
• Cara Memperbaiki Masalah Cakupan Indeks di Search Console 

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 electronic mail sekarang juga!

Bagikan Artikel ini