Cara Membuat Kotak Pencarian Keren di Blog

Bloging >> Chamber of Secret. Kotak Pencarian merupakan widget yang wajib di pasan pada blog, menurut saya agar pengunjung blog bisa lebih mudah dalam mencari sesuatu pada blog tersebut, berikut saya meu sedikit share tentang kotak pencarian atau yang sering disebut search box ini. saya punya beberapa koleksi yang saya copas dari blog sebelah. Langsung saja seperti biasa Check This Out !

Kotak Pencarian 1

1. Pertama pasinya login dulu ke akun blogger kamu.
2. Masuk ke menu tata letak.
3. Pada element klik tambahkan gadget.
4. Lalu pilih "Kotak Penelusuran"
5. Setting sesuai keinginanmu.
6. Terakhir klik simpan. dan lihat blog.

Kotak Pencarian 2

1. Hampir sama seperti cara di atas Login >> Tata Letak >> Tambahkan Gadget
2. Kalau pada cara ke 1 kamu pilih tambahkan "kotak Penelusuran" kali ini pilih "HTML/javascipt"
3. Dan copy paste kode HTML berikut :

<style type="text/css"><form action="http://amix24.blogspot.com/search"method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

catatan : ganti http://amix24.blogspot.com dengan nama blog kalian. Angka 40 menujukkan panjang kotak pencarian. sesuaikan panjang kotak sesuai selera kamu.

Kotak Pencarian 3 Caranya sama seperti pada Kotak Pencarian 2 hanya saja gunakan kode yang ini :

<span style='float:right;'> <style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-Hq8DjOYxj_yhpzEy8_WiK4C4smBS_VPCvYsL2TuVMN36K7flcnAp8MA5_3vfm2dcN-txEm9c60JcBMLbNe-wwVDotjAYQbPxaXnklQ99TIxAiYhXkqTg54AqTb-8yyTpqjRUr_ZsKd-/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"> <form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "URL BLOG KAMU") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form> </div> </span>  Dan hasilnya akan seperti ini :

Kotak Pencarian 4

Caranya tetap sama dan berikut kode yang dipakai :

  <form action="/search" style="display:inline;" method="get"> <input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/> </form> <style> #s { margin: 0 auto; -webkit-appearance: none; -moz-appearance: none; padding: 12px 48px 12px 12px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 200px; height: 16px; color: #3a4449; border: none; outline: none; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); position: relative; z-index: 2; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkNHNQF2d05lm2QN8IILn7VqZiOaKb6og4wIOfL3QjXIgn4lfcTsoh4DZErWjHLUihfH92FaAyOAkFGpPEshGzZhUicnZxYgTapUDzhmTyoeAZTghn8y4k8gHIMrLH7gDJ332oL_-9Gic/s1600/Search.png) center right no-repeat; } #s::-webkit-input-placeholder, #s:-moz-placeholder { color: #607078; } </style> Dan berikut hasilnya :

Catatan : ganti tulisan "Cari Artikel disini" dengan tulisan sesuka kamu.

Kotak Pencarian 5

Tetap cara yang sama, berikut kodenya :

<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(URL GAMBAR) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /></form> </div>

catatan : ganti tulisan "URL GAMBAR" dengan url gambar yang kamu inginkan. Atau bisa juga copy paste url gambar berikut :

Kotak Pencarian 6

<style type="text/css"> #a-searchbox{ background:url(Url Gambar) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <center> <div id="a-searchbox"> <form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form> </div> </center>

catatan : ganti tulisan "Url Gambar" dengan url gambar anda atau bisa juga copy paste di sini :

...............................Selamat Mencoba.........................

Anda sedang berada pada artikel tentang Cara Membuat Kotak Pencarian Keren di Blog dengan url https://kenkyona.blogspot.com/2015/08/cara-membuat-kotak-pencarian-keren-di.html,Boleh copy paste tapi sertakan Cara Membuat Kotak Pencarian Keren di Blog sebagai sumbernya.