Customize Google Custom Search Box

Google Custom Search is one of those tools whose list of Plus points is nearly endless. From providing super relevant search results  to options for On-Demand Indexing. GCS is a boon for all Blog and Website Owners.But the one thing that doesn't fit in place is its exceedingly over simple Search Form ,that again with Google Watermark. In this post I will be telling you how to change the Look of your GC Search Box with a CSS3 search Box.





I am assuming that you have already setup your Google Search Custom search engine if you haven't then check this tutorial. There are many variations GCS but normally the code contains a <script> tag , and it 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. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize :

<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 value="FORID:11" name="cof" type="hidden"/> 
  <input id="q" style="width:150px;" name="q" size="70" type="text" /> 
  <input value="Search" name="sa" type="submit"/> 
</form> 

In the id "searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your "Search engine unique 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="hidden" name="cof" value="FORID:10" /> 
    <input type="hidden" name="ie" value="ISO-8859-1" /> 
    <input type="text" name="q" size="21"  /> 
    <input type="submit" name="sa" value="Search"  /> 
  </div> 
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script> 
  

(If you want to remove the default styling then exclude the script tag above and also remove id="cse-search-box" from the 1st Line)

How to Add it To Blogger:

Please Back Up Your Template Before You Make Changes 


1.In Your Blogger Dashboard Click Design > 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 Above / Before   ]]></b:skin> .

4. Now go to Design > Page Elements and add the corresponding Search Box code into the Sidebar,etc

Note:Make sure to insert your own "Search engine unique ID" for the Search box to work.


In this tutorial I will implement 6 different CSS3 Search boxes. Don't Forget to check Part 2 of this series Now lets get started:

First:
This Search box is created by Catalin Rosu and you can check out the original tutorial Here.

Now the CSS markup for this search box 

#searchbox{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;            
width: 250px;
height: 35px;
padding: 10px;
margin: 10px auto 10px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#search
{
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
 border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
        }
#submit
{  
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
#submit:hover
  {  
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  } 
#submit:active
  {  
            background: #95d788;
   outline: none;
           
             -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;  
  }
 
  #submit::-moz-focus-inner
  {
    border: none;
  }  
  
  /* ----------------------- */
        
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.


<form id="searchbox" 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 value="FORID:11" name="cof" type="hidden"/> 
  <input id="q" style="width:150px;" name="q" size="70" type="text" id="search" placeholder="Type here"  /> 
  <input value="Search" name="sa" type="submit" id="submit" /> 
</form> 

In 1st Line I added a Id="searchbox", this applies the external rounded edges to the box
In 4th Line I added id="search" & placeholder="Type here" ,Here placeholder is the text which appears if Search box is empty.This applies the  rounded edges to the Text Field
In the 5th Line I added id="submit". This is related to the Button Styling


View Demo Button


Second:


This Search box is created by Nick La and you can check out the original tutorial Here.

Now the CSS markup for this search box 

/* search form 
-------------------------------------- */
.searchform {
 display: inline-block;
 zoom: 1; /* ie7 hack for display:inline-block */
 *display: inline;
 border: solid 1px #d2d2d2;
 padding: 3px 5px;
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 box-shadow: 0 1px 0px rgba(0,0,0,.1);
 
 background: #f1f1f1;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top,  #fff,  #ededed);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
 font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
 background: #fff;
 padding: 6px 6px 6px 8px;
 width: 202px;
 border: solid 1px #bcbbbb;
 outline: none;
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
 color: #fff;
 border: solid 1px #494949;
 font-size: 11px;
 height: 27px;
 width: 27px;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 
 background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
 background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

<form class="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
<input value="FORID:11" name="cof" type="hidden"/> 
<input  id="q" style="width:150px;" name="q" size="70" type="text" class="searchfield" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> 
<input name="sa" class="searchbutton" value="&rArr;" type="submit"  /> 
</form>

In 1st Line I added class="searchform" which applies the Search box styling.
In 4th Line I added class="searchfield" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" , which applies styling to the Text Field and also tells which text has to be shown when Search Field is empty
In 5th Line I added class="searchbutton" which applies the styling to the Button



View Demo Button


Third:



This Search box is created by Cameron Baney and you can check out the original tutorial Here.

Now the CSS markup for this search box

#search-form {
 background: #e1e1e1; /* Fallback color for non-css3 browsers */
 width: 365px;

 /* Gradients */
 background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
 background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

 /* Rounded Corners */
 border-radius: 17px;
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;

 /* Shadows */
 box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
 background: #fafafa; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
 background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

 border: 0;
 border-bottom: 1px solid #fff;
 border-right: 1px solid rgba(255,255,255,.8);
 font-size: 16px;
 margin: 4px;
 padding: 5px;
 width: 250px;

 /* Rounded Corners */
 border-radius: 17px;
 -webkit-border-radius: 17px;
 -moz-border-radius: 17px;

 /* Shadows */
 box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
 -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
 -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
 outline: none;
 background: #fff; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
 background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
 background: #44921f;/* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
 background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

 border: 0;
 color: #eee;
 cursor: pointer;
 float: right;
 font: 16px Arial, Helvetica, sans-serif;
 font-weight: bold;
 height: 30px;
 margin: 4px 4px 0;
 text-shadow: 0 -1px 0 rgba(0,0,0,.3);
 width: 84px;
 outline: none;

 /* Rounded Corners */
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;

 /* Shadows */
 box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
 -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
 -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
 background: #4ea923; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
 background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
 background: #4ea923; /* Fallback color for non-css3 browsers */

 /* Gradients */
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
 background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
  

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

<form id="search-form" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
<input value="FORID:11" name="cof" type="hidden"/> 
<input  id="q" name="q" size="70" type="text" /> 
<input name="sa" type="submit"  value="Search" /> 
</form>

Just added id="search-form" in the 1st Line and the rest of the styling is automatic.



View Demo Button


Fourth:



This Search box is created by Soh Tanaka and you can check out the original tutorial Here.

Now the CSS markup for this search box

<style>fieldset.search {
 border: none;
 width: 243px;
 margin: 0 auto;
 background: #222;
}
.search input, .search button {
 border: none;
 float: left;
}
.search input.box {
 color: #fff;
 font-size: 1.2em;
 width: 190px;
 height: 30px;
 padding: 8px 5px 0;
 background: #616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxdqMPTnYBw2IH81RdwB3rhQ2vps47kcmTau6mjrJSwmfkcfJ-q1fDzn2dXdllbBco6omu44RI77OH3jzF_3j1H89HKKcfw_uJKeOcMGRg9rvm1Ykpfh2r6pYHglmGkjT2c9upe9aTQAr/s1600/search_bg.gif) no-repeat;
 margin-right: 5px;
}
.search input.box:focus {
 background: #616161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxdqMPTnYBw2IH81RdwB3rhQ2vps47kcmTau6mjrJSwmfkcfJ-q1fDzn2dXdllbBco6omu44RI77OH3jzF_3j1H89HKKcfw_uJKeOcMGRg9rvm1Ykpfh2r6pYHglmGkjT2c9upe9aTQAr/s1600/search_bg.gif) no-repeat left -38px;
 outline: none;
}
.search button.btn {
 width: 38px;
 height: 38px;
 cursor: pointer;
 text-indent: -9999px;
 background: #fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxdqMPTnYBw2IH81RdwB3rhQ2vps47kcmTau6mjrJSwmfkcfJ-q1fDzn2dXdllbBco6omu44RI77OH3jzF_3j1H89HKKcfw_uJKeOcMGRg9rvm1Ykpfh2r6pYHglmGkjT2c9upe9aTQAr/s1600/search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
 background: #fbc900 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxdqMPTnYBw2IH81RdwB3rhQ2vps47kcmTau6mjrJSwmfkcfJ-q1fDzn2dXdllbBco6omu44RI77OH3jzF_3j1H89HKKcfw_uJKeOcMGRg9rvm1Ykpfh2r6pYHglmGkjT2c9upe9aTQAr/s1600/search_bg.gif) no-repeat bottom right;
}</style>
<!--[if lte IE 7]>
<style>
.search input.box {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoOLCIdT5Ta1NMsPVE5RLJb5vIkL3OF2s4tYI5ll_T__ceGZFb4bxBeEi7UE6yeYkFm55ko9OaLg_8nmFCVN_c_yvJV7taiDFJVaY2F_1oZWprbthtgxXit_8w_d288XAHP1hX1PKAnV9/s1600/search_bg_ie.gif) no-repeat right bottom;
}
</style>
<![endif]-->


Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

<form id="searchform" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">
<fieldset class="search">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
<input value="FORID:11" name="cof" type="hidden"/> 
<input  id="q" name="q" size="70" type="text" class="box" />  
<button class="btn" type="submit" title="Submit Search">Search</button>
</fieldset>
</form>

In the 1st Line added id="searchform" ,and then added a fieldset tag in between starting and ending of form tag.
In the 4th line added class="box" ,to apply styling to the box
The 5th Line is totally different for the functioning of this Search.(type="submit" is necessary )


View Demo Button



Fifth:

This Search box is created by Bharani M and you can check out the original tutorial Here.

Now the CSS markup for this search box


#main {
 width: 400px;
 height: 50px;
 background: #f2f2f2;
 padding: 6px 10px;
 border: 1px solid #b5b5b5;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

input[type="text"] {
 float: left;
 width: 230px;
 padding: 15px 5px 5px 5px;
 margin-top: 5px;
 margin-left: 3px;
 border: 1px solid #999999;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
 -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
 box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;
}

input[type="submit"].solid {
 float: left;
 cursor: pointer;
 width: 130px;
 padding: 8px 6px;
 margin-left: 20px;
 background-color: #f8b838;
 color: rgba(134, 79, 11, 0.8);
 text-transform: uppercase;
 font-weight: bold;
 border: 1px solid #99631d;
 
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 
 text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); 
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;

 -webkit-transition: background 0.2s ease-out;
}
 
input[type="submit"].solid:hover, input[type="submit"].solid:focus {
 background: #ffd842;
  
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;
}
 
input[type="submit"].solid:active {
 background: #f6a000;
 position: relative;
 top: 5px;
 border: 1px solid #702d00;
 
 -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
 -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
 box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;
}


Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

<section id="wrapper">    
        <div id="main">  
            <form  id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL Of the Page Where the Result Appear">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
<input value="FORID:11" name="cof" type="hidden"/> 
<input  id="q" name="q" size="70" type="text" id="search" /> 
<input name="sa" type="submit" class="solid" /> 
</form>
        </div>
    </section>

Firstly wrapped the form tag in between a section and div tag and also added a id="search" in the 6th Line and class="solid" in the 7th line.

View Demo Button


Sixth:

This Search box is created by Rethnaraj Rambabu and you can check out the original tutorial Here.

Now the CSS markup for this search box
#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2sFoNsA00ycgC5Xil-X6LXAz_wxpH2B99RIIYWnEk5zsZ9J318odOOIVv7JnszQaTIuzkfR7TaWGmPqM-WMH9-Iyet9pkMtlJSNhBhqfCT1O_NqaN9c0-Q5nOPZR3Kx-pD_Oa10OAcxrA/s1600/search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -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;
    }

#search input[type="text"]:focus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhcp8YUepRGsANSSwyRk4wvu3sw0UO0ceronI80_eoW2z1UL-BCYuFJdAfJZsdwbqQ1z5VmD6UYbDhCOfKZ1jL_89QM0U4_ADNInrgr6_dWtxkU-rVEfSKazeTM4kK6df_8_mbrG6wHco/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Now Do the following changes to your GCS Code to make it look like the Above CSS3 Search Box.

<form  id="search" method="get" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where Result has to be Shown">
<input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
<input value="FORID:11" name="cof" type="hidden"/> 
<input  id="q" name="q" size="70" type="text"  placeholder="Search..." /> 
</form>


This is a little differently done, see the button code has been deleted and in-place a method="get" tag has been introduced. 


View Demo Button


Having problems ,please feel free to ask

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Admin said...

Hi there thanks for sharing this here.

omr said...

(I'm not a lawyer or legal expert; this post is not legal advice.)

See section 2.3 ("Attribution") in the Custom Search Terms of Service:

http://www.google.com/cse/docs/tos.html

See also this note from documentation:
> "Note: To use your own search box for a standard free custom search engine, you must use the Google branding."
Quoted from:
http://code.google.com/apis/customsearch/docs/ui.html#layout

See also this example on how to use "your own search box":
http://googlecustomsearch.appspot.com/element/layoutdemo/results-only_form.html
Excerpt: "Google custom search branding is required for [the] standard [free] edition."

@omrYou are right in saying that but till now there has been no problems

Thanks a lot!!!

This tips has helped me a lot in designing my own search box on my website at http://www.comingsoonlive.com

Ben said...

Thank you so much. I have been looking everywhere for a way to use my own search box with google cse and found nothing useful until I found this.

+++++++ I love you

I am glad that it helped

is there a way or a tutorial how to customize the search result page of the blogspot/blogger blog?

Or how do I customize title, looks, size and layout of "This Blog" page or abc.blogspot.com/#uds-search-results

It would be possible as there is a search type in Blogger documentation. I will confirm it fully and do a detailed tutorial about it.

As far as changing the normal search box in Blogger ,thats possible and will only require a bit of change in the above CSS

to make myself clear, I am talking about the SEARCH RESULT PAGE or "This Blog" page or abc.blogspot.com/#uds-search-results

I am not talking about changing the normal search box in Blogger

lunaticg said...

Thanks.., that cool. I had been searching for this before but I don't know what I must type in Google to find it. Already bookmark it for later viewing.
PS: I also want to know if they're tutorial for search result page.

What exactly are you looking for in the tutorial for the search result page , please explain a bit so that I can make one

Anonymous said...

Hi,

I can't make it to work for me! Maybe I make mistake, could you help? Here's my GCS id: "007586913721386042342:ntdd5xsdgb0"

Anonymous said...

Here's my code:

<!-- Block search module TOP -->
<div id="search_block_top">
<div id="cse-search-form" style="width: 100%"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<form action="http://mysite.com/result.html" id="searchbox">
<input type="hidden" name="cx" value="007586913721386042342:ntdd5xsdgb0">
<input type="hidden" name="cof" value="FORID:11">
<input type="text" placeholder="Type here" size="70" name="q" style="width:150px;" id="search">
<input type="submit" id="submit" name="sa" value="Search">
</form>
</div>
<!-- /Block search module TOP -->

This code should work:

<form id="searchbox_007586913721386042342:ntdd5xsdgb0" action="http://mysite.com/result.html">
<input value="007586913721386042342:ntdd5xsdgb0" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:150px;" name="q" size="70" type="text" />
<input value="Search" name="sa" type="submit"/>
</form>

And place the CSS for the 1st Search box in your template

Anonymous said...

Hi,

I played with the code a little and it works now. But a small problem is still there. After Enter Key work to search, the results are displayed on google page! But on this page there's no Keyword input field! So that user can't make more search.

Anonymous said...

Here is my code:

<div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<form id="search" method="get" id="searchbox_007586913721386042342:ntdd5xsdgb0" action="http://google.com/cse">
<input value="007586913721386042342:ntdd5xsdgb0" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" name="q" size="70" type="text" placeholder="Search..." />
</form>
</div>

This is happening because you have selected the Google-hosted Search result type. To change this go to the Control Panel of your Search Engine and under the Look and Feel tab and select a Two Page layout or any other that you choose

Anonymous said...

No, I know the settings already, I'd like to display the results on google page. "Keyword Input Field" I have mentioned is the Key work in put field of "Google Search Result page". Any idea?

Can you provide the URL where it is implemented , that way I can help you faster

Anonymous said...

I am testing it on Localhost; but wait a moment I'll try to put it on my live site and will send url here maybe in 5mins later.

Okay, no problems

Anonymous said...

Hi,

Here is my URL please check: http://musicshow.vn/vi/

Anonymous said...

Here's the result page I've mentioned: http://www.google.com/cse?cx=007586913721386042342%3Antdd5xsdgb0&cof=FORID%3A11&q=hanoi#gsc.tab=0&gsc.q=hanoi&gsc.page=1

There's no Key Word Input Box to make more search.

I checked the source , there is one thing peculiar that a inline CSS ( display:none; ) has been added to the Search Box div ( #cse-search-form )

When I remove that CSS (using Inspect Element) it displays the Search box just fine. Can you alter the CSS on this Page?

Anonymous said...

It's google! I don't know how to!

Anonymous said...

Yeah, I see that code! Do you think there is an option for this in GCR setting page or somewhere else?

Got the problem, remove this line from the search Box


<input value="FORID:11" name="cof" type="hidden"/>

is there a way or a tutorial how to customize the search RESULT page of the blogspot/blogger blog?

http://torontoelectrical.blogspot.com/

pls enter a word INDUSTRIAL into a search box and hit Search

you will get a RESULT page http://torontoelectrical.blogspot.com/#uds-search-results for the word INDUSTRIAL


How do I customize title, looks, size and layout of that RESULT page

or

how do I customize the title "This Blog" of http://torontoelectrical.blogspot.ca/#uds-search-results for any other word?

thx

Anonymous said...

Hi,You're great! It works like a charm!

Anonymous said...

Thank you very much for helping me!

Its possible, will do a post about it by tonight

Glad to help you, In the process I learnt a new thing too :)

One thing more, remove the background from #search_block_top , the search box will look much better

Unknown said...

Can I customise blogger default search box with this tutorial ?? You can see the search box on top right corner of my blog. - http://www.androidmarketguru.blogspot.com/

Febrianto said...

then what do i write in my search.php? I cant get it working. The styling is ok but the form doesnt generate results.

Aakash said...

This is great prayag very creative will implement soon!

ManOfGod said...

Thank you so much. This make my site search look a lot cooler ....

Anonymous said...

This code has some troubles, when search query is with UTF, but pages in older codepage. I've got URL with some «%32%42%». Can you help me to resolve this problem? Result page & page with search-field has windows-cp1251 codepage.

thank you!

thanks bro, that's cool :)
keep blogging !

Paige Howarth said...

Thanks, this is exactly what I needed! Regards, Paige

Tate said...

Hi, this looks great. Is there a way to add this to thesis theme using wordpress?

Anonymous said...

Is there a way to direct the results to another window or, perhaps better, another frame on the current window?

Anonymous said...

Btw, for the record, I've been trying to get google's branded gizmo to work on my webpage but when you go to the page, the screen goes blank (white). Couldn't find a resolve.. thought this might be a better approach.

wikisoft said...

Strong tutorial thank you watch a demo: Megastuces.com

Unknown said...

Nice Information dude thanks for sharing this valuable info i was searching it for long time.
SEO Tips:
8 SEO Tips to Boost Your Blog Traffic

Rabin said...

Great tutorial..Thanks for the CSS..I will be using it in my WP Blog.

E said...

i can add Search bar to my Tumblr site, but where & how can i add search Results on my Tumblr site?


my codes:




HackMon said...

Hello!
My site is hosted on Weebly.
When I add CSS and add the HTML code in my page than a very simple searchbox renders.

Anonymous said...

Forgive me for probably asking this question but do we take out the original javascript that the google custom search generated and where exactly do we put the new form code u talk about in all these tutorials? Meaning removing the javascript and putting the form over the javascript? Where exactly?

Unknown said...

good search bars, I really like it...

What a cool tips.

I have questions regarding sixth search control:
how to delete the search button and add get method in form tag?
The only code I obtained is in javascript. I can't find the tag form.

Thanks in advance

Problogger said...

Thanks for this great looking search box. I was just looking forward for adding search box and search result page in blogger. Unfortunately I didn't find any. However the posts in your blog are awesome.
More Blogger Tools

Thanks for above great looking search box.
Blogging Tips & Tricks

Admin said...

Thanks for great Tutorial. But just want to know does it follow Google Adsense policy too.

Unknown said...

This tutorial wont help you customize the blogger search box. BUT it IS possible. Its actually not too difficult. Although you do need to know a little about css if you want a custom style.

The code below will change the area where you type in Blogger search:

#CustomSearch1_form input[type="text"]{
float:left;
-webkit-appearance: none;
background: white;
border: 1px solid black;
height: 10px;
margin-right: -15px;
padding: 12px 15px;
color: white;
}

This will remove the goldish outline in Chrome Browsers:

input[type="text"]:focus{
outline: none;
}

And this will change the button:

#CustomSearch1_form input[type="submit"]{
-webkit-appearance: none;
border: 1px solid black;
height:36px;
background: black;
color: white;
float: left;
}

I made it pretty basic, and also I used words instead of HEX for the colors so if you don't know anything about CSS you can just change the color names if thats all you want. I hope this helped at least a little.

Anonymous said...

Hello Prayab,
What an awesome article. This is exactly what I have been looking for THANK YOU! However, as I tried to implement it on my "static html" website after following the instructions for the "Cameron Baney" one it isn't rendering.
By the way is this only for blogs? I'd like to put this right at the very end of my menu bar, but it isn't working.
Same questions as Anonymous up there: Do you replace the Javascript code provide by Google and add the form code or combine them?

Thanks in advance for your help!

Anonymous said...

Hi guys,
Can someone shed some light regarding weather to use the script or the form code or both? THANKS!

Nice collection of CSE styles , I am going to use one of them ,
Keep it up !

JrrMaster said...

Great!!
Another question, how to costumize custom search box on overlay results?

Will adsense detect the customization?, Since many blogger told me that we are not allowed to change nor alter any code generated by their system.

Unknown said...

Nice....Thanks...this is what i 'm looking for....

Deepak said...

i have used google custom search css in http://www.vasaivirarproperty.in/advancesearch.php

/* Use a different font family for search results */
.gs-title, .gs-snippet {
font-family: courier;
}

/* Add a border between individual search results */
.gs-webResult {
border: 1px solid #eee;
padding: 2px;
}

/* Do no display the count of search results */
.gsc-result-info {
display: none;
}

/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}

/* Hide the thumbnail images in search results */
.form .gsc-thumbnail {
display: none;
}

/* Hide the snippets in Google search results */
.gs-snippet {

}

/* Change the font size of the title of search results */
.gs-title a {
font-size: 14px;
}

/* Change the font size of snippets inside search results */
.gs-snippet {
font-size: 12px;
}

/* Google Custom Search highlights matching words …

the one problem with that method is that the autocomplete feature won't work anymore

Faniso said...

Hi! Thanks for sharing this.