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, menciptakan kotak pencarian (search box) itu sangat penting. Dikarenakan, bagi sebuah website atau blog, kita wajib harus mempunyai kotak pencarian (search box) alasannya ialah sanggup 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 sanggup dibilang tidak mobile friendly. Nah disini saya akan menawarkan untuk anda kotak pencarian (Search box) yang responsive maupun mobile friendly.

Anda juga sanggup meletakkan kotak pencarian ini dimanapun yang anda inginkan menyerupai di sidebar, footer ataupun header. Nah, kita pribadi saja ke pada dasarnya 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 copy dan paste instruksi 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.

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

1. Pergi ke Dashboard.

2. Lalu klik template.

3. Edit HTML.

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

5. Lalu pastekan instruksi script dibawah ini sempurna di atas instruksi ]]></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.

Cara Membuat Kotak Pencarian (Search Box) Bawaan Blogger.

1. Pergi ke dashboard.

2. Klik tata letak, add widget.

3. Lalu cari penelusuran.

4. Lalu setting sesuai dengan harapan 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 widget.

3. Copy dan Paste instruksi 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 harapan anda dan lihat hasilnya.

Baca juga:

• Cara Praktis 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 berkhasiat dan jangan lupa untuk mengshare dan berlangganan dengan kami hanya dengan submit via email kini juga!

Bagikan Artikel ini