All search box created by using CSS3 and HTML. You can easily customize as your own. So let's get started.
How to Add:
Login>Blogger Dashboard>Layout>Add a Gadget>HTML/Javascript.
box 1
<style type="text/css">
#namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDe6uR-Ijw7uCOTdYknK2KODGWWv8N5WVu5d-vswh3kTsSopFc0xqOFvG6qx0vQ-R1SAZNlyi3DA3s9vOcRIeUUuJeyU32rqheCRzdFUQ0Rq5KDl50VHiB9xVbW4zOvjogsEFy2uCkRJP6/s0/searchbox1-namkna-blogspot-com.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 10px 12px;margin:0;}
form#namkna-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-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...";}'/>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7T78KiRP81IN18IaNK770KZOIhFDXx2IMuMPdefROsDqVkNlcJ5XLBqYGhAIT1Y-j9kPPJojlvRC5NPgxAO1aFiiQXXHh5hFWfxPVIbh_WCEerqQUUc_Cx_OV5DLCrjafK4eqD0R3Gzp/s0/blank.gif" id="sbutton" />
</form>
</div>
<style type="text/css">
#namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielvcC8mKaFo5zpk6uhoOdL66esFbn0oHCem6fZ39WGCYAM4cK1gEbLaERWmCVDOt7XwC1QpoOYNZpbINg3JY7zEoKGkV8ZRM_IEXTM38EmoMq4GUu2TaU0VPXwViC12dTbWpt62Ih6zDb/s0/searchbox2-namkna-blogspot-com.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 10px 12px;margin:0;}
form#namkna-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-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...";}'/>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7T78KiRP81IN18IaNK770KZOIhFDXx2IMuMPdefROsDqVkNlcJ5XLBqYGhAIT1Y-j9kPPJojlvRC5NPgxAO1aFiiQXXHh5hFWfxPVIbh_WCEerqQUUc_Cx_OV5DLCrjafK4eqD0R3Gzp/s0/blank.gif" id="sbutton" />
</form>
</div>
box 3
<style type="text/css">
#namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32wZ0cY1Vh5cjVZ6Ocb-Dn22iGAwT29q8DFqrZVbXyiPy8w_VuEJw0zOCo1j_Ar2eMWcrIaBXYTzFRj51d77wmLA4yBIL_dkAwoLGlj-aQbgas1wFg9zpKjFqjPIUAbiM2iAMXHiQKO67/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#namkna-searchform{display: block;padding: 12px;margin:0;}
form#namkna-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="namkna-searchbox">
<form id="namkna-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7T78KiRP81IN18IaNK770KZOIhFDXx2IMuMPdefROsDqVkNlcJ5XLBqYGhAIT1Y-j9kPPJojlvRC5NPgxAO1aFiiQXXHh5hFWfxPVIbh_WCEerqQUUc_Cx_OV5DLCrjafK4eqD0R3Gzp/s0/blank.gif" id="sbutton" />
</form>
</div>
box 4
<style>
#nbc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#nbc-searchblackbox1
{
padding:10px;
}
#nbc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblack1'>
<form action='/search/max-results=8' method='get' id="nbc-searchblackbox1">
<input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='nbc-searchblacksubmit1' type='submit' value='Search'/>
</form>
</div>
box 5
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSRCG0UUDp_wNYltfCH1NkaiVUBWNgrn_wN1MgjkEGVPAqssPZdwdc8__O5N_oZFmR3frBdf2FJSKjO-nWrpepZAT70uX5yqNeBxpstADM4vJggyB0wnUNG-3WN-YF-9TAmT76XTPD9kpo/s1600/search-box.png) no-repeat;
height: 27px;
width: 202px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ70cc3fUOZHMpwhuRzEgsrLG4vsv32G-tpD8OHvQR64xTDgqdrOPz6agE9nxgGwPHt-V-8n_IbLfGc-nTUdPizrGqcna_fHfSNOju9zuxasnKiUTlIZnu3R9iKSnXEl4CE7zIeTNEIIZB/s1600/search-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBgV3kjFhQmiDyN_QEbbZCdZWFiev0KR221ZTQjM-csTxEcA_Q_g297H_h86El6dbjtsDxqzfQvViLydBbWWMXuRFd530IXNTrk_XzoyXODeb24QRW3tEhQlNFymnyJ2QkMi0A10J0MwR/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>
box 6.
<style>
#searchbox {
width: 240px;
}
#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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiQCheqoMgtVCch_7Vy85PHWEN2mswl44R9G8g0cMXF2crq0omfgq9eBMUwK4cjV-afA3QcECjgaw-qbm8t6o7qZcxXelRgBaFlVRIAlD3iX0q0MBPvco6frX4vHnHTLpTpGveTv4hC6A/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijH7lLBlaaQcAAYEOGQ2-WbiX8J6w91RAhJA3i5fuvaNCksNUDh90kH86qwJgNCgagyM_DE6MseWXzOC-JtK8RGxN6AxptFd6YxLM3z8Bj8ezbrf2I3DZS6qUkn4_YoYFYFoyRIt91P6s0/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</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>
No comments:
Post a Comment