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(http://3.bp.blogspot.com/-5n-lfTvX8N8/TjRMdUxVKJI/AAAAAAAAA20/18M5S02hnl0/s1600/search_bg.gif) no-repeat;
margin-right: 5px;
}
.search input.box:focus {
background: #616161 url(http://3.bp.blogspot.com/-5n-lfTvX8N8/TjRMdUxVKJI/AAAAAAAAA20/18M5S02hnl0/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(http://3.bp.blogspot.com/-5n-lfTvX8N8/TjRMdUxVKJI/AAAAAAAAA20/18M5S02hnl0/s1600/search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
background: #fbc900 url(http://3.bp.blogspot.com/-5n-lfTvX8N8/TjRMdUxVKJI/AAAAAAAAA20/18M5S02hnl0/s1600/search_bg.gif) no-repeat bottom right;
}</style>
<!--[if lte IE 7]>
<style>
.search input.box {
background: url(http://3.bp.blogspot.com/-U87LSnf1xVI/TjROQgNvvkI/AAAAAAAAA28/SDUu_DzbAA4/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(http://4.bp.blogspot.com/-239R3H-ONfw/TjRXPkTSusI/AAAAAAAAA3M/pgaoKdDCypg/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(http://1.bp.blogspot.com/-XNPyh_l2WB8/TjRXPfrbJVI/AAAAAAAAA3I/R8Mia0bYtME/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

Implementing Simple jQuery Slideshow in Blogger

Simple jQuery Slideshow is a very basic Image slider plugin.Its main features include ability to cycles through slides at a time interval that we can set. It also has forward and back buttons so we can jump around between slides and each slide has a title, a description and a link associated with it.






Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<style type="text/css"> 
#slideshow #slideshowWindow {
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}

#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:500px;
height:257px;
position:relative;
}

#slideshow #slideshowWindow .slide .slideText {
position:absolute;
top:130px;
left:0px;
width:100%;
height:130px;
background-image:url(greyBg.png);
background-repeat:repeat;
margin:0;
padding:0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color:#ffffff;
text-decoration:none;
}

#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
margin:10px 0 0 10px;
padding:0;
}

/*Navigation*/
.nav {
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}

#leftNav {
bottom:18px;
left:0px;
width:94px;
height:34px;
background-image:url(http://1.bp.blogspot.com/-Iab-OBSmo_g/TjJ8HccSM0I/AAAAAAAAA2E/4luzTVm76s4/s1600/previous.png);
background-repeat:no-repeat;
z-index:999;
}

#rightNav {
bottom:26px;
left:100px;
width:53px;
height:26px;
background-image:url(http://1.bp.blogspot.com/-g7zq7ghqx00/TjJ8G2Dxl2I/AAAAAAAAA2A/pHOd-5VR90Y/s1600/next.png);
background-repeat:no-repeat;
z-index:999;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;

//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);

slides.wrapAll('<div id="slidesHolder"></div>')

slides.css({ 'float' : 'left' });

//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);

$('#slideshow')
.prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');

manageNav(currentPosition);

//tell the buttons what to do when clicked
$('.nav').bind('click', function() {

//determine new position
currentPosition = ($(this).attr('id')=='rightNav')
? currentPosition 1 : currentPosition-1;

//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});

function manageNav(position) {
//hide left arrow if position is first slide
if(position==0){ $('#leftNav').hide() }
else { $('#leftNav').show() }
//hide right arrow is slide position is last slide
if(position==numberOfSlides-1){ $('#rightNav').hide() }
else { $('#rightNav').show() }
}


//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition ;
manageNav(currentPosition);
}
moveSlide();
}


//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
}

});
</script>

If the Template shows error while saving this Code ,then Escape the Code, (Click Here to Escape Code)




2.Go to the Post/Page you want to add Simple jQuery Slideshow and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<style type="text/css"> 
#slideshow #slideshowWindow {
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}

#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:500px;
height:257px;
position:relative;
}

#slideshow #slideshowWindow .slide .slideText {
position:absolute;
top:130px;
left:0px;
width:100%;
height:130px;
background-image:url(greyBg.png);
background-repeat:repeat;
margin:0;
padding:0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}

#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color:#ffffff;
text-decoration:none;
}

#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
margin:10px 0 0 10px;
padding:0;
}

/*Navigation*/
.nav {
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}

#leftNav {
bottom:18px;
left:0px;
width:94px;
height:34px;
background-image:url(http://1.bp.blogspot.com/-Iab-OBSmo_g/TjJ8HccSM0I/AAAAAAAAA2E/4luzTVm76s4/s1600/previous.png);
background-repeat:no-repeat;
z-index:999;
}

#rightNav {
bottom:26px;
left:100px;
width:53px;
height:26px;
background-image:url(http://1.bp.blogspot.com/-g7zq7ghqx00/TjJ8G2Dxl2I/AAAAAAAAA2A/pHOd-5VR90Y/s1600/next.png);
background-repeat:no-repeat;
z-index:999;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;

//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);

slides.wrapAll('<div id="slidesHolder"></div>')

slides.css({ 'float' : 'left' });

//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);

$('#slideshow')
.prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');

manageNav(currentPosition);

//tell the buttons what to do when clicked
$('.nav').bind('click', function() {

//determine new position
currentPosition = ($(this).attr('id')=='rightNav')
? currentPosition 1 : currentPosition-1;

//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});

function manageNav(position) {
//hide left arrow if position is first slide
if(position==0){ $('#leftNav').hide() }
else { $('#leftNav').show() }
//hide right arrow is slide position is last slide
if(position==numberOfSlides-1){ $('#rightNav').hide() }
else { $('#rightNav').show() }
}


//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition ;
manageNav(currentPosition);
}
moveSlide();
}


//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
}

});
</script>

4.Now for adding the images into Simple jQuery Slideshow See the following Markup.




<div id="slideshow">
<div id="slideshowWindow">

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide1.jpg" />
<div class="slideText">
<h2 class="slideTitle">
Slide 1</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide3.jpg" />
<div class="slideText">
<h2 class="slideTitle">
Slide 2</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->

<div class="slide">
<img src="http://www.webchiefdesign.co.uk/blog/simple-jquery-slideshow/slide2.jpg" />
<div class="slideText">
<h2 class="slideTitle">
Slide 3</h2>
<p class="slideDes">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink">
<a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
</div><!--/slideshowWindow-->
</div><!--/slideshow-->



5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!



Implementing jsBloggerLightbox in Blogger

jsBloggerLigthbox is based on jQuery framework and is created by James Simpson of J.S. Blog Stop (A great resource for Blogger Related Tutorials).

The one thing that makes this different from other Lightbox scripts is its easy of integration. Normally when you add a Lightbox in a website ,you have to fiddle with the HTML of  all the elements (Images,iFrame,etc) to which you have to apply the Lightboxing effect but in the case of jsBloggerLightbox you just have to include the script and the rest is taken care by it.

Currently it only supports images.




Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.(Firstly Backup your Template)


3.Now search for the </head> tag and paste the following code just Above/Before it.

<script src='http://code.jquery.com/jquery-latest.js'></script> 
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'></script>

This Lightbox automatically detects images and display them in the overlay window.




2.Go to the Post/Page you want to add jsBloggerLightbox and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<script src='http://code.jquery.com/jquery-latest.js'></script> 
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'></script>
This Lightbox automatically detects images and display them in the overlay window.



4.Now save the Post/Page.

Implementing NuvuShift Lite in Blogger

The NuvuShift jQuery Plugin allows you to animate up to 5 different images or divs within a container when you move the mouse cursor around the document. Each image's movement has a independent range that can be set along with a starting pont.

Features:
>Control the amount of shift per image.
>Lightweight at only 4Kb(Lite) in size.
>Easily set and modify the starting point of each image.




             

Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nuvushift.lite/sample/js/jquery.nuvushift.lite.js"></script>






2.Go to the Post/Page you want to add NuvuShift Lite and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nuvushift.lite/sample/js/jquery.nuvushift.lite.js"></script>


4.Now adding images into NuvuShift Lite is a different process altogether .Below I will discuss the example that is implemented on the main site

Firstly the container for the images a.k.a the HTML Markup.



<div id="divOne">
<img class="img1" src="1.png" />
<img class="img2" src="2.png" />
<img class="img3" src="3.png" />
<img class="img4" src="4.png" />
<img class="img5" src="5.png" />
</div>

Now the CSS code:


<style type="text/css">
#divOne{
width:1200px;
height:500px;
overflow:hidden;
border:1px solid #111;
position:relative;
top:100px;
margin:100px auto;
box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-moz-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-o-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-webkit-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
}
.img1{
position:absolute;
top:-0px;
left:0px;
z-index:1;
}
.img2{
position:absolute;
top:-70px;
left:0px;
z-index:2;
}
.img3{
position:absolute;
top:-70px;
left:0px;
z-index:3;
}
.img4{
position:absolute;
top:-50px;
left:-30px;
z-index:4;
}
.img5{
position:absolute;
top:-120px;
left:-30px;
z-index:5;
}
</style>


And Finally the JavaScript code:

</script>
<script type="text/javascript">
$(document).ready(function(){
$('#divOne').nuvushift(
{
img1yStart : -100, //.img1 vertical starting point
img1xStart : 0, //.img1 horizontal starting point
img1xRange : 100, //.img1 horizontal animation range
img1yRange : 120, //.img1 vertical animation range
img1invert : 'false', //.img1 animation inverted - 'true' or 'false'
img2yStart : -10,
img2xStart : -10,
img2xRange : 650,
img2yRange : 90,
img2invert : 'false',
img3yStart : 0,
img3xStart : 0,
img3xRange : 50,
img3yRange : 180,
img3invert : 'false',
img4yStart : 0,
img4xStart : -300,
img4xRange : 400,
img4yRange : 100,
img4invert : 'true',
img5yStart : 70,
img5xStart : -90,
img5xRange : 100,
img5yRange : 90,
img5invert : 'true',
target: document, // or '#divOne', - to move when mouse hovers over #divOne etc
}); //end nuvushift
}); //end document ready
</script>

A Detailed Explanation of the Options:

  • target This is the element that triggers the movement when mouse moves over it. Set to document to move elements when the cursors moves around the whole browser window. Set to another element within '' example: target : '#divOne' or target : '.divOne',
  • img1xStart This is the x starting point for an element with the class of "img1" - set this to be the same as the "left" css property.
  • img1xStart This is the y starting point for an element with the class of "img1" - set this to be the same as the "top" css property.
  • img1xRange This is how much the element will move from left to right or right to left if inverted.
  • img1yRange This is how much the element will move from top to bottom or bottom to top if inverted.
  • img1invert Invert or reverse the animation behavior. Set to 'true' or 'false'
  • contmove Allows for animating the base container. Set to 'true' or 'false'
  • contxStart This is the x starting point for the base container - set this to be the same as the "left" css property.
  • contyStart This is the y starting point for the base container - set this to be the same as the "top" css property.
  • contxRange This is how much the base container will move from left to right or right to left if inverted.
  • contyRange This is how much the base container will move from top to bottom or bottom to top if inverted.
  • continvert Invert or reverse the base container animation behavior. Set to 'true' or 'false'


This plugin is quite similar to jParallax .Check out jParallax's Implementation in Blogger Here.

5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!



             

Implementing PhotoBoard in Blogger

Want to show off your Photos in a cluttered fashion, then this is the right Plugin for you. Photoboard is based on Mootools framework and gives you the capability to define a space where you can freely Drag your Pictures  (and even move them over each other!).The code is tiny, as it relies heavily on the framework for much of the functionality.







             

Steps to Add it to Blogger:

1.Login to the Blogger account


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/style.css" rel="stylesheet" media="screen"> 
<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4.2-more.js"></script>

Now Search for the </body> tag and Paste the following code Above/Before it.


<script src="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.js"></script> 
<script>
window.addEvent('domready', function() {
var photos = new PhotoBoard('photo-board');
});
</script>







2.Go to the Post/Page you want to add PhotoBoard and then go to Edit HTML tab .



3.Now copy the code from below and paste it there.


<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/style.css" rel="stylesheet" media="screen"> 
<link type="text/css" href="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Photoboard/mootools-1.2.4.2-more.js"></script>


-----------THIS AREA CONTAINS ALL THE PICTURES--------------

<script src="http://dl.dropbox.com/u/27675057/Photoboard/photoboard.js"></script>
<script>
window.addEvent('domready', function() {
var photos = new PhotoBoard('photo-board');
});
</script>



4.Now for adding the images into PhotoBoard ,See the following Markup below.




<div class="span-24 last">
<div id="photo-board" name="PhotoBoard_Controller">

<div class="photo" style="left: -43px; top: 106px;">
<img src="s.jpg"width="500" height="375">
</div>

<div class="photo" style="left: 73px; top: 137px;">
<img src="as.jpg"width="500" height="331">
</div>

<div class="photo" style="left: 37px; top: 36px;">
<img src="e.jpg"width="500" height="375">
</div>

<div class="photo" style="left: 175px; top: 133px;">
<img src="r.jpg"width="500" height="336">
</div>

<div class="photo" style="left: -32px; top: 69px;">
<img src="l.jpg"width="500" height="335">
</div>

<div class="photo" style="left: 88px; top: 147px;">
<img src="n.jpg"width="500" height="375">
</div>

<div class="photo" style="left: 255px; top: 26px;">
<img src="l.jpg"width="434" height="262">
</div>


</div>
</div>

The First Two Div tags are used for linking the pictures with the plugin and the rest of DIV tags act as containers for the Images. A class "photo" is necessary in each of these pictures. The style attribute used in every container defines the initial position of the picture.You can move the pictures in this area freely ,drag them over each other (Tip: To bring a Picture in the background to the foreground, just drag it to the corner most point and then Bring it Back)


Want to change the Dimensions of the Area occupied by the Photoboard ?
For this open photoboard.css and change the height & width attribute of #photo-board .






5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!



             
 
© 2009 Blogger Tips 2013 | Powered by Blogger