-->
MASIGNCLEAN101

Cara Membuat Kotak Pencarian (Search Box) Responsive di Blog

Bantu Klik Subscribe Teman-teman!

Cara Membuat Search Box 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) 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.

Cara Membuat Kotak Pencarian (Search Box) 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, 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.

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

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.

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 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 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!
Bantu Klik Subscribe Teman-teman!
Share This :

iWasOtaku

Seorang Blogger Yang Menyukai Hal Tentang Budaya Jepang

avatar

klo search google bisa gn ?

November 18, 2016 at 10:09 PM
avatar

Keren hasilnya gan, responsive dan smooth ketika di klik. desainnya simple tapi bagus. Tidak seperti kotak pencarian bawaan blogger. :d yang lain wajib coba nih :)

November 18, 2016 at 10:12 PM
avatar

terimakasih gen, ini yang baru saya cari....

November 18, 2016 at 10:19 PM
avatar

Mantap gan... (h) untuk box pencarian karen di blog ane udah ada, ane absen disini aja dulu deh.. :d

November 19, 2016 at 5:28 AM
avatar

Saya ambil untuk tutorialnya gan. Search boxnya bisa dikasih warna lain?

November 19, 2016 at 8:42 AM
avatar

Work nih,tampilanya keren,dari kemarin nyoba di web tetangga,penjelasan kurang jelas

November 19, 2016 at 8:44 AM
avatar

Kotak pencarian menjadi hal yang wajib untuk dipasang disebuah blog untuk memudahkan pengunjung. Jadi mantap banget ni desainnya karena saya pernah buat tapi tidak mobile fndly. Kita coba dulu min..

November 19, 2016 at 8:50 AM
avatar

Wah sewaktu waktu saya coba tutorial dari agan ini

November 19, 2016 at 9:12 AM
avatar

IZIN NYOBA BANG..KAYANYA WIDGETNYA BAGUS TU

November 19, 2016 at 9:17 AM
avatar

keren gan tampilannya, gak seperti search bar bawaan dari blogger hehehe

November 19, 2016 at 9:24 AM
avatar

makasih gan, ijin comot dulu ya gan. ou y gan, kalo menggunakan search GSE, caranya gimana ya gan?

November 19, 2016 at 11:00 AM
avatar

Wah tutorialnya lengkap banget. Terus berkarya gan.

November 19, 2016 at 11:57 AM
avatar

ane coba dlu gan.. mudah2 an joss!

January 16, 2017 at 1:19 AM
avatar

bagus dan keren hasilnya.. tapi tolong bantu saya bgimana caranya agar kata dalam website yang dimaksukkan kedalam search box itu bisa di buka?? krn sampai saat ini kata yng dimasukkan dalam search box tidak ditemukan / laman not found..terima kasih sebelumnya.. oh iya disini yang saya gunakan website builder dari hostinger..

February 12, 2017 at 8:16 AM
avatar

keren dan bagus search boxnya. tolong donk saya saya di banu untuk di beri info mengenai bagaimana agar kata yang di masukkan dalam search box website saya bisa terbaca?? krn selalu laman not found..terima kasih sebelumnya

February 12, 2017 at 8:20 AM
Syarat & Ketentuan Berkomentar

1. Jangan cantukan link mati maupun hidup
2. Gunakan bahasa yang dapat dimengerti
3. Jangan spam link
4. Koment yang relevan sesuai dengan topik yang di bahas
5. Jangan copy psate artikel, jika ingin dihargai maka hargailah orang