Do remember to check out the previous 6 Search Box Designs for your Google Custom Search Box
I am assuming that you have already setup your Google Search Custom search engine. In case you haven't ,then first check this guide for setting it up for your blog .There are many variations Google Custom Search with options of AutoComplete and other features but normally looks something like this
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
Here you can't really see where to apply the styling as the form tag is dynamically added via JavaScript after the page load. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize and also loads faster :
<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> <input name="q" type="text" /> <input value="Search" name="sa" type="submit"/> </form>
In the id "searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your "Search engine ID" which you can find on the Control panel of your search engine.
If you are using the Adsense linked GCS then your search Box should look something like this:
<form action="URL of the page where the Result open id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" />
<input type="text" name="q" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
How to Add it To Blogger:
Either you can install it directly using the One-Click Installer or follow the steps below
1.In Your Blogger Dashboard Click Template > Edit HTML
2. Find the following piece of code : (Press Ctrl+F for a search bar to help find the code )
]]></b:skin>
3. Copy and Paste any one of the CSS code that you like from below Directly just Above
]]></b:skin> .
4. Now go to Layout > Add a Gadget and add the corresponding HTML of the Search Box code into a HTML/JavaScript Gadget
Note: Make sure to insert your own "Search engine unique ID" for the Search box to work.
Design 1
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
.signup {
width: 550px;
}
.signup::before,
.signup::after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
top: 0;
z-index: -1;
background: #fff;
border: 1px solid #ccc;
}
.signup::after {
left: 4px;
right: 4px;
bottom: -5px;
z-index: -2;
-moz-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
-webkit-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}
::-webkit-input-placeholder {
color: #bbb;
}
:-moz-placeholder {
color: #bbb;
}
.placeholder{
color: #bbb; /* polyfill */
}
.signup input{
margin: 5px 0;
padding: 15px;
*width: 518px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.signup input:focus{
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}
.signup button{
margin: 0 0 0 20px;
padding: 15px 8px;
cursor: pointer;
border: 1px solid #2493FF;
overflow: visible;
display: inline-block;
color: #fff;
font: bold 1.4em arial, helvetica;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
background-color: #2493ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-ms-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
}
.signup button:hover{
background-color: #7cbfff;
border-color: #7cbfff;
}
.signup button:active{
position: relative;
top: 3px;
text-shadow: none;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}
HTML<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" class="signup"> <input placeholder="Search for" type="text" name="q" /> <button type="submit">Search</button> </form>
Design 2
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
.form-wrapper {
width: 450px;
padding: 8px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
HTML<form class="form-wrapper" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" > <input type="text" id="search" placeholder="Search for CSS3, HTML5, jQuery ..." ><input type="submit" value="go" id="submit"> </form>
Design 3
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #f9f9f9 !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
HTML<form class="form-wrapper cf" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" > <input type="text" placeholder="Search here..." required><button type="submit">Search</button></form>
Design 4
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
.box.login
{
width:332px;
}
.box input[type=text],
.txtField,
.cjComboBox
{
border:6px solid #F7F9FA;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
margin:3px 0 4px;
padding:8px 6px;
width:205px;
float:left;
display:block;
}
.box input[type=text]:focus,
.txtField:focus,
.cjComboBox:focus
{
border:6px solid #f0f7fc;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
color:#333;
}
.cjComboBox
{
width:294px;
}
.cjComboBox.small
{
padding:3px 2px 3px 6px;
width:100px;
border-width:3px !important;
}
.txtField.small
{
padding:3px 6px;
width:200px;
border-width:3px !important;
}
.box a{color:#999;}
.box a:hover, .box a:focus{text-decoration:underline;}
.box a:active{color:#f84747;}
.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-top: 10px;
float:right;
padding:7px 21px;
}
.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
HTML<form class="box login" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" > <input type="text" tabindex="1" placeholder="Search" > <input type="submit" class="btnLogin" value="Search" > </form>
Design 5
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
.login-form {
width: 300px;
margin: 0 auto;
}
.login-form {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .input {
width: 46%;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .password, .login-form .pass-icon {
margin-top: 25px;
}
.login-form .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
input:focus + div{
left: -46px;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
/* Login button */
.login-form .button {
float:right;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
HTML<form class="login-form" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" > <input name="username" type="text" class="input username" placeholder="Search" /><input type="submit" name="submit" value="Search" class="button" /> </form>
Design 6
Demo
Add using One Click Installer into Blogger
Or add it manually
CSS
#contentz {
width: 400px;
}
#contentz:after,
#contentz:before {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
border: 1px solid #c4c6ca;
content: "";
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#contentz:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg); content: "";
top: 0;
z-index: -1;
}
#contentz:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg); content: "";
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#contentz form { margin: 0 20px; position: relative }
#contentz form input[type="text"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #EAE7E7;
border: 1px solid #C8C8C8;
color: #777; width: 56%;
font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 10px;
float: left;
}
#contentz form input[type="text"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#contentz form input[type="submit"] {
background: rgb(254,231,154);
background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 8px 0 0px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
float:right;
}
#contentz form input[type="submit"]:hover {
background: rgb(254,193,81);
background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#contentz form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
background: rgb(247,249,250);
background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
HTML<div class="container"> <section id="contentz"><form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" > <input type="text" placeholder="Search" id="username" /><input type="submit" value="Search" /> </form></section></div>
Special thanks to Catalin Rosu for designing these search and login forms . Don't hesitate to ask any problem you face while adding these search boxes to your blogs
Find me on
Wow so beautiful. Thanks a lot Prayang Verma for this hard work ^_^
nice ..
Really a awsome tutorial..
Hi Prayag...
Nice work bro...It seems that you have put a lots of effort on this article....gr8 job
Dear Prayag
Thanks for the awesome search buttons. It works fine but the result page some problem. Have any idea? Trever Reznick
For your poll: YOU MUST RUN ADS. You're not Wikipedia, but Wikipedia collects donation every year as per their requirements. The ads amount will give reward for your hard work. Its my opinion.
Thanks for the valuable post.
I checked your blog , there is some conflict with the CSS , add the following CSS to fix it
.gsc-result .gs-title {height: 1.4em !important;}
.gsc-input{position: relative !important;top: -5px !important;}
img.gs-image {
padding: 0px !important;
-goog-ms-box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
-moz-border-radius: 0px !important;
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0) !important;
-webkit-border-radius: 0px !important;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
background: transparent !important;
border-radius: 0px !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}
This should surely help
About the Poll , I will surely heed to your advice as I am myself trying to find ways to earn using this blog
My dear Prayag!
I don’t know how to say thanks in words. You took your precious time for me to fix my css error. Now it is working fine. I really appreciate you. I will promote this site as much I can.
Million Hearty Thanks.
Hi Prayag,
Sorry for going off-topic but i really want to ask how did you manage/make your blogger mobile template (/?m=1) different from other default mobile templates.
Plus one more thing off-topic,sorry once again,my 404 ain't working,i was hoping you could help me out. http://www.themusicrover.com/404
In the Menu for choosing Mobile Template , I have selected the Custom option. Rest of the conversion of my template to mobile is handled by Blogger automatically. Responsive design helps a lot in this case
Just add the following CSS just after the CSS you added for the Picture
#navigation-wrap , #main-wrapper , #footerbg , #header-wrapper { display:none !important;}
Now the image will appear without any other element present
One more thing , you might want to change percentage from 30% to 48% in the background image to make it look more centered
Thanks a ton,worked just fine.
awsome...
creation....
Hey nice designs mate.Can you do the same for WP?
very nice post..keep posting more content..also visit my blog..
Regards,
tricksandteach.blogspot.com
Nice Design i was looking for this
Thanks
Is there a way to add Google Speech to the search box
Simply add x-webkit-speech="x-webkit-speech" to the input field , Did a post about this earlier http://www.stylifyyourblog.com/2011/10/speech-enabled-input-fields-in-chrome.html
Thanks for this write-up. It is helpful for me since I am using blogger and word-press on blogging. Keep it up!
Hi,
At the moment I am using a classic version and would like to switch to your amazing design 5.
I am having some difficulty having the results show.
I want use your design 5, i followed your instructions including adding the CSS manually, but as i run a search it comes up with a page with no results.
Also it's an adsense GCS.
My website is http://www.c2camdaily.com
Regards C2CAMDaily
realy an awesome tuto. thanks man