Cara Membuat Kotak Pencarian Menu Search di Blogspot sangat mudah. Tinggal klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Penelusuran". Save!
Tapi kali ini saya akan membagikan Membuat Kotak Pencarian Menu Search yang keren.
Pertama kita pergi ke Setelah "Add a Gadget", pilih "HTML Javascript", dan pilih salah satu kode Kotak Pencarian atau Menu Search berikut ini. Dicoba saja satu-satu, lihat hasilnya, dan pilih yang menurut Anda bagus.
Kode Kotak Pencarian Menu Search Blog #1
<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Ganti tulisan berwarna merah dengan link blog sobat dan yang berwarna biru ganti dengan angka berapa yang sobat inginkan karna itu akan menjadi ukuran panjang kolom tersebut.
kalau sudah silahkan klik simpan dan lihat hasilnya di blog sobat.
Contoh kolom search #1
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJ01ayueJd0FOdWarzdmtvp3tZ3faJSXdUeleu4fAQa2ZwTQe4Q71_winnB7oFcLbbCNGcAzXZ4WzS9ff2oHIkPnyM6Bt7rp3ZErF_8VLa8aHffv4rpuF0YkVWlwMQ1l-rZZ6vGmeeHCx/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 Here..." 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>
</span>
Contoh Kolom Search #2
Kode Kotak Pencarian Menu Search Blog #3
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</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: 300px;
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/AVvXsEh5TL2cqMxspRZ9VOvEM9tvO4EkXCOIOl92clMYlMg5EKMqAVTmATeBciEQXE7AxygdZBaEln6IVOQECNvg1Lrt0kqmV-2unzyDLf_SWe3DiHNJgwavkkwl56pihMXmO8VSNZD3M-lYpxA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Contoh Kolom Search #3
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1yh7Bv0aKUYcQjklFPVpK3-OXj83dbUvPtjAjPFMcgjIERDWfM6pqguQzQT5ZYBq5At3AjEsB_YQv19VAvDypKaEzh9R-ze96m2lMXlno8MwbH3E-LaGOIzdy6o686cDSmddMYQslfpw/s1600/impoint.blogspot.com-green.png) 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>
Contoh Kolom Search #4
Kode Kotak Pencarian Menu Search Blog #5
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-D2VwWM2AReJ-mOpWpfir0VNXJNcOYTXeXP7bued-DIg2tQG2HUo2-Pyc539Rov0LXHjC8Ip80STJ9mHoRtScpcXajNaUHmnklHg2qRYnFredxRra05Fea552LDQssewnLdTJlKaV6WC/s1600/lostsector-search-box-blue.png) 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>
Contoh Kolom Search #5
Kode Kotak Pencarian Menu Search Blog #6
<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>
Contoh Kolom Search #6