Kurang berkenan dengan tampilan menu search atau kotak pencarian versi blogger? Ini dia alternatif Kotak Pencarian Menu Search di Blogspot yang dikumpulkan dari berbagai sumber dan sudah ditest satu-satu.
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.
Contoh 1
<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
Kode di atas ini yang dipake CB Blogger.
Contoh 2
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6gH6Sm5-ibyDEuHBAXn6aomKwtI6Bj4qEZbw9pUfoSUAMWfq8loTg0dA6r-DUm0lvMAYCswxBH-TnIMYxMbQpIzxmnXO3aTI4tZPUFpev5_rTTLcLwh9p59qewRg0sTD774DllwcaUxf/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>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6gH6Sm5-ibyDEuHBAXn6aomKwtI6Bj4qEZbw9pUfoSUAMWfq8loTg0dA6r-DUm0lvMAYCswxBH-TnIMYxMbQpIzxmnXO3aTI4tZPUFpev5_rTTLcLwh9p59qewRg0sTD774DllwcaUxf/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 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/AVvXsEgVzRzMqvtGqYdaMtm7fXxC9lFtCNE8d2wq1YzIjjcqRweMsn96L6C073LsIVnXYWTkuZyJ_-dZ71uo4aYtnXlemyqbxOyoefmUvIi_k9pG6d6dDkEnFE_sitVewLQCo3Zr4JAjL2Kem3k/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
<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/AVvXsEgVzRzMqvtGqYdaMtm7fXxC9lFtCNE8d2wq1YzIjjcqRweMsn96L6C073LsIVnXYWTkuZyJ_-dZ71uo4aYtnXlemyqbxOyoefmUvIi_k9pG6d6dDkEnFE_sitVewLQCo3Zr4JAjL2Kem3k/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Contoh 4
<style type="text/css">#mediablogger-searchbox { border-radius:
5px; background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVnhohzvVAFcM7WlwpuH8lzLZavUrBpDAbh04AvVbWTo2TpM1gSkoC130jFInt656WaUIgAZzLAHCZge1MOwO2f6eiyk7Yzq8AI0iDXgThiX6i-DPFRiLdDHf2rfq83bJOSRCbaFQrcHG/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 5
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkETtjvJtCc7RrAkwn-BxUmucLydz7Unk9-cnMgkMOg2YaVR2Z78OdGIzT2mkUpqyzAhf8vrbCdd0k5CH5qZcSlCA4hjFcTl2jSa-KD3d2Vv7oGrMx0NGSRHjZJpGv3XYxzZxYe0A6Yvnm/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>
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkETtjvJtCc7RrAkwn-BxUmucLydz7Unk9-cnMgkMOg2YaVR2Z78OdGIzT2mkUpqyzAhf8vrbCdd0k5CH5qZcSlCA4hjFcTl2jSa-KD3d2Vv7oGrMx0NGSRHjZJpGv3XYxzZxYe0A6Yvnm/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 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>
0 Response to " Membuat Kotak Pencarian Menu Search di Blogspot"
Post a Comment