salam
gays..lgi mencari link atau cara memasang kotak pencarian di blog
mu,jangan pusing,di bawah ini adalah link kotak pencarian dengan
berbagay gaya dan bentuk
cara memasang nya gampang bro silakan ikuti cara di bawah ini
1.masuk kedalam blog mu
2.pilih tata letak
3.klik tambah gadget
4.pilih java scrip
5.lalu copi paste code dibawah ini dan save
gaya kotak pencarian 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>
gaya kotak pencarian 2
<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>
gaya kotak pencarian 3
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2stfwODs5wQqS67CDBT-xgB6q67tt5OWOaYfyawtp8NLXRXM7RsC3yl7eGm87gXwP4mOuXJjMyj7ak0kZLeLkHTQdhSG9_8QjwrBACSoDaBlHPk1LRwDy1I79WuuIDJRGl8ZqaNaIOy5_/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/AVvXsEi2stfwODs5wQqS67CDBT-xgB6q67tt5OWOaYfyawtp8NLXRXM7RsC3yl7eGm87gXwP4mOuXJjMyj7ak0kZLeLkHTQdhSG9_8QjwrBACSoDaBlHPk1LRwDy1I79WuuIDJRGl8ZqaNaIOy5_/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>
gaya kotak pencarian 4
<style type="text/css">#mediablogger-searchbox { border-radius:
5px; background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRVzCxHPv4DkHpQODYwHmFAR-obq2MbBkpLR2I_BGkfYJHbgHzNIaOu_2j9WkOAQNeEi-dxldyXrZSEMfRhx6HHcMGgXSNjrgrtcCKOOXnm-fGeiDmP3iPQ8x0yfmZTtShmPRhbpY7cc5/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>
gaya kotak pencarian 5
<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/AVvXsEgfFmyt7No-HjFsjx5O2WnPCRjlr7fnJ8RPfMG1rlpICFmGZgNHU0MYLA3J-WAZV3ACeEUDJ8L04OOtj0mcnBtnC10EHlsf80ZGk6Ulbuu3gm5ldmD02yeq4m1r736Sasm4wrzw9elWKME/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/AVvXsEgfFmyt7No-HjFsjx5O2WnPCRjlr7fnJ8RPfMG1rlpICFmGZgNHU0MYLA3J-WAZV3ACeEUDJ8L04OOtj0mcnBtnC10EHlsf80ZGk6Ulbuu3gm5ldmD02yeq4m1r736Sasm4wrzw9elWKME/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
gaya kotak pencarian 6
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-D-LPdkPzuo8kIkIaBMXKrxbS9VWqPOr6uEeDZyqNy3pGFhaPXylFktb_ct3EugyejbRFu9Q6QMLHB50xyN_3heRUWdOWKhnf6txd4xPAQDyuMS8nhGOkHp1Vrz6u-8piLwQVvOYcxVGn/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/AVvXsEg-D-LPdkPzuo8kIkIaBMXKrxbS9VWqPOr6uEeDZyqNy3pGFhaPXylFktb_ct3EugyejbRFu9Q6QMLHB50xyN_3heRUWdOWKhnf6txd4xPAQDyuMS8nhGOkHp1Vrz6u-8piLwQVvOYcxVGn/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>
Tidak ada komentar:
Posting Komentar