2 Cara Membuat Kotak Pencarian (Widget Search Box) Terkeren
2 Cara Membuat Kotak Pencarian (Widget Search Box) Terkeren
Beriktu 2 Cara Membuat Kotak Pencarian (Widget Search Box) di Blogger Terbaru
Pagi Sobat jadi kali ini admin
Duniamu38 akan berabagi tutorial bagaimana cara membuat sebuah Kotak Pencarian atau
Search Box yang mana dari fungsi Search Box ini yaitu untuk mempermudah para
visitor ketika akan mencari postingan yang mereka cari dengan hanya mengetikkan
beberapa kata / keyword saja.
Setelah itu ketika habis mereka ketik keywordnya di kotak pencarian tersebut dan setelah itu sobat enter atau klik tombol
search maka semua keyword akan muncul sesuai keyword yang diketiknya tanpa
ribet mencari keseluruhan dalam blog tersebut. Biasanya dari setiap website /
aplikasi-aplikasi yang lain seperti sosmed, wordpress, cms, dan blog serta
website-website lain pasti mereka akan memasang widget search box ini karena
yang bagitu manfaat sekali walaupun tombolnya sangat kecil. Selain dari Search
Box secara default bawaan, sobat juga bisa memasang dari bentuk search box default
biasa , sobat juga bisa pasang widget Search Box yang bermodel-model hanya
dengan pasang kode script html dibawah ini.
Pada dasarnya di Template website-website
sudah terdapat Search Box ini baik di WordPress ataupun Blogspot mereka sudah menyediakan
Widget Navigasi Search Box ini. Disini saya akan kasih tutorial membuat dan
memasang kotak penelusuran ini dengan menggunakan 2 cara yang akan admin bahas yaitu
pertama melalui widget bawaan blog itu sendiri dan kedua menggunakan Script
Widget.
TUTORIAL CARA MEMBUAT DAN MEMASANG KOTAK PENCARIAN KEREN (SEARCH BOX) :
Cara Pertama yaitu Cara Menambah Kotak Pencarian secara Default didalam
Blog.
1. Widget Search Box (Kotak Pencarian) / Default
Ikuti langkah-langkah di bawah
ini :
#1 Silahkan Masuk ke Dashboard Blog > Pilih Menu
“Layout/Tataletak”
#2 Plih Menu “Tambahkan Gadget” dan Klik Tombol (+) “Kotak Penelusuran”
#3 SIlahkan “Save/Simpan” dan Kalian juga widget
default ini di posisi sidebar, header maupun footer.
2. Cara kedua yaitu Cara Menambah Kotak Pencarian Menggunakan Script
HTML/Javascript
Ikuti cara Kedua ini yaitu Menggunakan
JavaScript/html biar tampilan menjadi keren
#1 Silahkan Masuk ke Dashboard Blog > Pilih Menu
“Layout/Tataletak”
#2 Plih Menu “Tambahkan Gadget” dan Klik Tombol (+) “Html/Javascript”
– Berikut kode Scriptnya dan silahkan paste di kotak html sobat:
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-Qi008pkhta4PUfWHT51YosxI_a10NMBjpDAbLRNRBs32dtIImL_CFqbSoz2rfd8QBT0gGqfBoLjTcEafnFx1DBq7nrzkHOgQ5-kkTl5bj1fn6QCsDR0foTW1z775ZrY6Qllc-rJkDGO/s1600/search-box.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXrzAlPLhVKpXAyrR4ZsKUIYM-BKmIHzvJIkytOglxeVUuuUwxqeoyhOqGNTlCCTI5KmvHspLjxTDQRXyXHsAqrZNeV-B8IviSC8GMt0JbU0Y0UkFSYoCeUVwiy6lmSmrmnQ8Hyh7wDv8M/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyl4U8gYm_dBb-y2hebIq3E3fiUESPWIgem5DYWjjU05kdbi1SIuM2FUboDFXYMNjNggufmWM0NtTwvYKBAyMj1JMJkPFHoBsyCMm9q-Y3RIr2csOWJsud8famJ-fNpgdQ7we4LE4jhbRf/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-Qi008pkhta4PUfWHT51YosxI_a10NMBjpDAbLRNRBs32dtIImL_CFqbSoz2rfd8QBT0gGqfBoLjTcEafnFx1DBq7nrzkHOgQ5-kkTl5bj1fn6QCsDR0foTW1z775ZrY6Qllc-rJkDGO/s1600/search-box.png) no-repeat;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXrzAlPLhVKpXAyrR4ZsKUIYM-BKmIHzvJIkytOglxeVUuuUwxqeoyhOqGNTlCCTI5KmvHspLjxTDQRXyXHsAqrZNeV-B8IviSC8GMt0JbU0Y0UkFSYoCeUVwiy6lmSmrmnQ8Hyh7wDv8M/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyl4U8gYm_dBb-y2hebIq3E3fiUESPWIgem5DYWjjU05kdbi1SIuM2FUboDFXYMNjNggufmWM0NtTwvYKBAyMj1JMJkPFHoBsyCMm9q-Y3RIr2csOWJsud8famJ-fNpgdQ7we4LE4jhbRf/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
Catatan Penting !!!
Sobat juga bisa edit kotak pencarian baik dengan mengganti gambar warna / tampilan dengan memodifikasi HTML/JavaScript sendiri.sehingga menjadi lebih menarik dan keren pastinya.
#3 Silahkan “Save/Simpan” dan Kalian juga widget
default ini di posisi sidebar, header maupun footer.
Mungkin itulah sedikit tutorial cara
menambah kotak pencarian ini dengan menggunakan 2 cara. Semoga bermanfaat dan
jangan lupa ikut terus artike terbaru dari duniamu38 ini. Terimakasih
Posting Komentar untuk "2 Cara Membuat Kotak Pencarian (Widget Search Box) Terkeren"
Sebaik-baik manusia adalah yang bermanfaat bagi manusia lainnya