CARA MEMODIFIKASI KOTAK PENCARIAN DI BLOG

CARA MEMODIFIKASI KOTAK PENCARIAN DI BLOG - Pada kesempatan kali ini saya ingin membagikan artikel tentang cara membuat search box atau kotak pencarian yang responsif pada blog,seperti yang kita ketahui keberadaan search box sangat penting dan wajib ada pada blog,dengan adanya kotak ini akan memudahkan visitor dalam mencari artikel maupun direktori pada blog kita,mereka dapat menulis kata kunci pada kolom pencarian dan saat itu juga dapat ditampilkan artikel berdasar kata kunci yang mereka ketik.

Blogger sendiri sebenarnya telah menyediakan kotak pencarian atau search box bawaan  dalam template,namun sayangnya bentuknya kelihatan monoton dan membosankan.

Nah bagi kalian yang ingin memodifikasi kotak pencarian bawaan blogger kalian bisa mengikuti step by step cara membuat kotak pencarian melalui artikel yang saya tulis disini.

Kotak pencarian ini murni menggunakan seratus persen CSS sehingga kalian tidak perlu khawatir ini akan mempelambat loading blog kalian ketika di akses,kotak ini dibuat secara responsif yang artinya dapat menyesuaikan dengan perangkat browser visitor blog kalian,tampilannya juga dinamis dan ada sedikit animasi sehingga tidak menjenuhkan dan memanjakan mata.

banyak sekali keuntungan ketika kalian memodifikasi atau mengkustom search box di blog diantaranya adalah

• blog kalian akan terlihat profesional
• dapat ditempatkan di header,sidebar,footer dll
• murni css,tidak ada tambahan java script ataupun image yang akan memperlambat loading situs
• menyesuaikan lebar template / responsife
• terdapat efek ketika di hover,di klika ataupun ketika aktif
• terdapat efek animasi yang akan menambah kesan elegan

Berikut beberapa serach box keren yang bisa kalian pasang di blog kalian

1. SEARCH BOX DENGAN WARNA BIRU PADA TOMBOL AKSI

See the Pen
LYEzzNr by Didin (@Dokupaid)
on CodePen.

Kalian dapat mencopy kode css tersebut kemudian masuk ke blogger - Layout/Tata Letak - kemudian klik tambah gadget/add gadget - pilih HTML/Javascript dan pastekan kode css tadi kesitu kemudian save
jika kode diatas tidak muncul kalian dapat mengcopinya di bawah ini

<style type="text/css">
#hbz-searchbox {
background-color: #D5F3F5;
border: 1px solid #EDEDED;
padding: 5px;
border-radius: 10px;
margin: 50px auto;
min-width: 238px;
max-width: 288px;
}

#hbz-input {
background-color: #FCFAFE;
border: medium none;
font: 20px/20px "HelveticaNeue", Helvetica, Arial, sans-serif;
margin-right: 2%;
padding: 4%;
box-shadow: 2px 1px 4px #999999 inset;
border-radius: 9px;
width: 60.33%;
}

#hbz-input:focus {
outline: medium none;
box-shadow: 1px 1px 4px #0D76BE inset;
}

#hbz-submit {
background: transparent linear-gradient(to bottom, #34ADCC 0%, #2691DC 100%) repeat;
border-radius: 9px;
border: medium none;
color: #FFF;
cursor: pointer;
font: 20px/20px "HelveticaNeue", Helvetica, Arial, sans-serif;
padding: 4%;
width: 28%;
}

#hbz-submit:hover {
background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
}
</style>

<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Ketikan Kata Kunci Disini..." />
<input type="hidden" name="max-results" value="8" />
<input id="hbz-submit" type="submit" value="search" />
</form>

2.SEARCH BOX WARNA MERAH PADA KOTAK AKSI

See the Pen
ExawwEL by Didin (@Dokupaid)
on CodePen.

Kode CSS untuk kotak pencarian di atas

<style type="text/css">
#hbz-searchbox {
min-width: 250px;
margin: 10px auto;
border-radius: 3px;
overflow: hidden;
max-width: 300px;
}

#hbz-input {
width: 59.2%;
padding: 10.5px 4%;
font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
border: none;
background-color: #EEE;
}

#hbz-input:focus {
outline: none;
background-color: #FFF;
box-shadow: 0 0 2px #333333 inset;
}

#hbz-submit {
overflow: visible;
position: relative;
float: right;
border: none;
padding: 0;
cursor: pointer;
height: 40px;
width: 32.8%;
font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
color: #FFF;
text-transform: uppercase;
background-color: #D83C3C;
}

#hbz-submit::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #D83C3C;
top: 12px;
left: -6px;
}

#hbz-submit:focus,
#hbz-submit:active {
background-color: #C42F2F;
outline: none;
}

#hbz-submit:focus::before,
#hbz-submit:active::before {
border-color: transparent #C42F2F;
}

#hbz-submit:hover {
background-color: #E54040;
}

#hbz-submit:hover::before {
border-color: transparent #E54040;
}
</style>

<form id="hbz-searchbox" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="CARI..." />
<input type="hidden" name="max-results" value="8" />
<button id="hbz-submit" type="submit">Search</button>
</form>

Demikian artikel saya mengenai cara memodifikasi kotak pencarian atau search box di blog semoga bermanfaat

Berbagi :