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!

A Cool Music Player for Blogger

There are many ways to add Music to your blog. The most common way is to embed it into your post.In this tutorial I will be using the WordPress Music Player to do the same.

Note:You will be needing a Free Hosting Service like Dropbox to host the SWF file.

Also You will first have to find a music file that is already hosted on the web, or if you have your own music file stored in your computer, upload it into a file host.

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to the Post/Page you want to add the WP Music Player.



3.Now copy the code from below and paste it in the Edit HTML Tab of the respective Post/Page.


<object data="http://dl.dropbox.com/u/27675057/player.swf" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290">  <param name="movie" value="http://dl.dropbox.com/u/27675057/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=URL of Music File">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">
</object>


4.For Adding multiple Players on a page just change the id in 2nd Line and the value in the in the 4th Line just as seen below

<object data="http://dl.dropbox.com/u/27675057/player.swf" height="24" id="audioplayer2" type="application/x-shockwave-flash" width="290">   
<param name="movie" value="http://dl.dropbox.com/u/27675057/player.swf">
<param name="FlashVars" value="playerID=2&amp;soundFile=http://dl.dropbox.com/u/27675057/Maid%20with%20the%20Flaxen%20Hair.mp3">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="wmode" value="transparent">
</object>


← This is the Second Player of this Page

5.Now for changing the appearnace of the code see the following code:

<object data="http://www.mdn.fm/files/87478_pfe4i/player1.swf" height="24" id="audioplayer3" type="application/x-shockwave-flash" width="290">   <param name="movie" value="http://www.mdn.fm/files/87478_pfe4i/player1.swf">
<param name="FlashVars" value="playerID=audioplayer3&amp;bg=0xf8f8f8&amp;leftbg=0xeeeeee&amp;lefticon=0x666666&amp;rightbg=0xcccccc&amp;rightbghover=0x999999&amp;righticon=0x666666&amp;righticonhover=0xffffff&amp;text=0x666666&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0x666666&amp;loader=0x9FFFB8&amp;loop=no&amp;autostart=yes&amp;soundFile=http://dl.dropbox.com/u/27675057/DivBox/music.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

Amazed How the player is playing when the Page just loaded ,This is because I changed the parameter “autostart” to true. Thinking where this autostart Parameter is ??, Scroll to the Extreme Right of this page and You will find it there.(The above code has shifted a little right because no space has to given in the list of parameters)


There is also a loop parameter to play the track non-stop

The Following image will explain the parameters in a more detailed manner.

This Tutorial could not have been possible without MBT ,For more customized Players check out Here.

Just for Knowledge: Google has launched a Project called Google Swiffy whose purpose is to Convert SWF files into HTML5 ,so that even devices not supporting Flash can run those SWFs. I tried to convert the player.swf but it showed some error (The Project is in its early stages) .Check out the their Gallery of Converted items Here.

Implementing Syntax Highlighter in Blogger

Syntax Highlighter is a simple JavaScript which is used to represent your Code in a more sophisticated manner.I have used this in nearly all my previous posts.In this tutorial I will be implementing Version 2.1.364 of SH. It has the ability to copy Code into the Clipboard and also supports 13 different brushes.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to Blogger Dashboard >Design>Edit HTML. First backup your Template (See how to Back it up)



3.Now copy the code from below and paste it just Above/Before </head> tag.


<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>

See only the first Three Line of code is necessary ,rest of the code is dependent on which Brush you want to use .For example if you want to use XML Brush then include only XML related file.

4.Now include the following code just Above/Before the </body> tag.

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>



5.Now for applying this to your code just paste the code in between the following code:

<pre class="brush: BRUSH-NAME">

Paste Your Code Here

</pre>

The “BRUSH-NAME” needs to be changed by the Brush you want to use. Like for example if you want to use xml Brush then change “BRUSH-NAME” with xml. All the code should be Escaped (Visit this Page to make your Code Escaped)

Now some extra features : For Highlighting the code see the following code:

<pre class="brush: xml;highlight: [2,4];">
This Line is Highlighted
This Line is not Highlighted
This Line is again Highlighted
</pre>

To Hide the Toolbar

<pre class="brush: xml; toolbar: false;">

If You observe ,there is no Toolbar

</pre>


             

Implementing Clearbox in Blogger

Clearbox is a lightbox script based on the jQuery framework. It is capable of displaying image galleries, Flash, Quicktime, Windows Media formats, HTML, inner content, etc.One of its Plus point is that it works BEFORE the page is fully loaded! It is even capable of Rotating the images (not working in Internet Explorer or some other older browsers).It can effectively scale down large images with no comprise in quality and also features a Download button (For Images,MOV,other Media Fromats) as well as a Play button (For Slideshow).

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a Folder options.

             

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 src="http://dl.dropbox.com/u/27675057/Clearbox/clearbox.js" type="text/javascript">
</script>

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

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

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

<script src="http://dl.dropbox.com/u/27675057/Clearbox/clearbox.js" type="text/javascript">
</script>

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

4.Now for adding the images into Clearbox ,Firstly add the image normally using Insert Image Button

Now When you see the codein the edit HTML window it would be something like this

<a title=”1 tes” href=”large3.jpg”><img src=”small3.jpg” /></a>

Make it like this 

<a rel=”clearbox” href=”large3.jpg”><img src=”small3.jpg” /></a>

As you see we only added rel tag namely “clearbox”. 

Now to add Galleries just see the following code:

<a href="2.png" rel="clearbox
"><img src="D.png" /></a>
<a href="9.jpg" rel="clearbox
"><img src="5D.jpg" /></a>
<a href="29.jpg" rel="clearbox
"><img src="7D.jpg"/></a>

As you see we only added rel=”clearbox

” where My Gallery is the name of the Gallery

Now Some Working Example Code:

Divs
<a href="inner#test" rel="clearbox[tnhrf=nopreview,,title=Inner content,,comment=Alike, but not similar to the previous example!]">Inner DIV</a> 

Swf
<a href="http://www.clearbox.hu/test.swf" rel="clearbox[tnhrf=nopreview,,width=600,,height=400,,title=Flash content]">SWF</a> 

YouTube
<a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[tnhrf=nopreview,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]">Youtube</a> 

MOV
<a href="http://handras.hu/insight/media/insight_960.mov" rel="clearbox[tnhrf=nopreview,,title=iNSIGHT (http://handras.hu/insight),,comment=This joy of creation through behind-the-scenes pictures.&lt;br /&gt;&lt;font color=&quot;#ff7700&quot;&gt;QuickTime plugin required!&lt;/font&gt;,,width=960,,height=540]">Quicktime</a> 

MP3
<a href="http://www.clearbox.hu/test.mp3" rel="clearbox[tnhrf=nopreview,,width=500,,height=150,,title=MP3 music,,comment=Windows Media Player plugin is required!]">MP3</a>

Firstly the format is a little different ,you have to get with it.

Secondly the comment in the code represents the Text which is shown below the item

Thirdly to call divs you have to include “inner” in the address before #

If you can’t understand something else please feel free to ask

Now I tried whether Clearbox could open itself in itself(Inspection style).Now there are no official way to do this ,but normally if you iFrame it to a page containing Clearbox then it can Function,In my case I redirected it to my Demo page,See the result for yourself

(Level Three is not Possible)

5.Now save the Post/Page.

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

Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

Thanks to Charlotte for pointing out how to remove the popup messages that appear telling “Clearbox is ready” and stuff.

To disable it go to /clearbox/config/default/cb_config.js

The new code has to be this with “OFF” :
CB_OSD=’off’, // turns on OSD
CB_OSDShowReady=’off’, // when clearbox is loaded and ready, it shows an OSD message

             

Unlimited Bandwidth Image & JavaScript Hosting

Hosting is a vital part of any Website or Blog. In the following tutorial I will be telling you how to host Images (JUST for the sake) and JavaScript files on Blogger platform (with UNLIMITED BANDWIDTH that is). Image hosted on Blogger is no big surprise but the main focus of this tutorial is hosting JS files on Blogger which can be quite useful. The main reason I am doing this post is because ,all the Past posts I have done as well as many of the incoming Future posts that I will do ,use a JS file as their core. This simple trick will do away with all the problem related to hosting JS files on Third Party Servers.

Image Hosting on Blogger

Whenever a image is added into Blogger Blog, it automatically assigns a Picasa album to it .These images can then be used anywhere ,that too with unlimited bandwidth.

Steps to Add Images into Blogger
1. Go to Blogger Dashboard —> NEW POST
2. Click the Compose tab —> Click on Insert Image Icon ()



3. Click the Choose Files button



4. Select the Files and Click the Open Button 

Wait for a while till the image is finished uploading.

5. Select the Uploaded image and Click the Add Selected button.



6. Click on the Edit HTML tab 



7. You will see the two image Urls, but u pick Original image URL after the href tag like below. 

Use the image any where you want with unlimited bandwidth

JavaScript Hosting on Blogger
Blogger allows external JS files to be accessed using the script tag like this:

<script src='http://Your-Hosting-Service-Url/Jquery.js' type='text/javascript'/>
But this is well and good until you have Good Hosting Service.There are many free Hosting services Like DropBox and Google Code(Quite Good indeed) but why call it from a external source when you can easily embed it in Blogger itself! To do that observe the following code:
<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

Just in place of “<–Paste all code here from .js file –>” line in above code ,copy the whole content of your JS file(Open the JS File in NotePad and do the Plain Old CTRL+A , followed by CTRL+C ,Then go the place where you have the above code and CTRL+V in the place of the highlighted line [Remove the highlighted line] ).And your javascript codes are now Ready which are now hosted on Blogger itself !

Here I want to make a special mention of the CDN a.k.a. Content Distribution Network whose most common example is googleapis.These CDN are like Super-Duper fast servers which reduce access time with their dedicated bandwidths.

The following is a example of jQuery Framework hosted on GoogleAPIS:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

It is your personal choice whether you want to host your JS file on Blogger or get it through these CDN services or Locally. I personally prefer that these framework be accessed through the Googleapis and the JS file of the Plugin be hosted on Blogger.

Whats Your Take on this ?,feel free to share it.

Implementing CSS Lightbox in Blogger

You have read it right, this is a purely CSS based lightbox with the ablitly to show images only (That is quite understandable).This marvel of a lightbox can be found at www.w3css.co.uk, but I am unable to find its real author.The major plus point about this Lightbox over others is that, you only have to include a CSS code for it to work, with no dependencies on a JavaScript (But there is a tiny exception).It has some minor bugs ,that I will discuss later in the tutorial.

             

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.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://dl.dropbox.com/u/27675057/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>

That JavaScript file  html5.js is needed for smooth working in Internet Explorer 9(But the Lightbox continues to work even without it ,but but I recommend you include it)

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


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

<link href="http://dl.dropbox.com/u/27675057/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>t ,but but I recommend you include it)

Now include the below JavaScript file inside the </head> tag, For that Go to Design Tab > Edit HTML and copy it Above/Before </head> tag

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

4.Now adding the images into this CSS Lightbox is a little tricky affair ,Firstly  I will give you full code then explain how it works.

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

</div>

The 2nd and 10th Line contains the address of the image ,former being the one shown on the Page and the later in the Lightbox


From Line 3 onwards to the 2nd last line, is the code which makes the Lightbox effect work.Every class tag is self explanatory ,just keep this Markup handy for adding images into this lightbox


For adding multiple files into the lightbox just see the Markup below:

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>&nbsp;<a class="thumb b2" href="#x" tabindex="2"><img alt="" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p2">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" alt="" />
<p>
Image 2 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>
</div>


The bug that I was talking about in the beginning ,is that the images are reloaded again into the Lightbox every time you Minimize the Page or switch between the Pages of your Browser.



5.Now save the Post/Page. 


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

             

Implementing Slides in Blogger

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.Slides is compatible with all modern web browsers and jQuery versions 1.4.4+.

             

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>
/* 
 Resets defualt browser settings
 reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
 Page style
*/
body { 
 font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
 letter-spacing:0;
 color:#434343;
 padding:20px 0;
 position:relative;
 text-shadow:0 1px 0 rgba(255,255,255,.8);
 -webkit-font-smoothing: subpixel-antialiased;
}

#container {
 width:310px;
 padding:10px;
 margin:0 auto;
 position:relative;
 z-index:0;
}

#example {
 width:330px;
 height:350px;
 position:relative;
}

#ribbon {
 position:absolute;
 top:-3px;
 left:-15px;
 z-index:500;
}

#frame {
 position:absolute;
 z-index:0;
 width:469px;
 height:341px;
 top:-3px;
 left:-80px;
}

#slides {
 position:absolute;
 top:15px;
 left:4px;
 z-index:100;
}

/*
 Slides container
 Important:
 Set the width of your slides container
 Set to display none, prevents content flash
*/

.slides_container {
 width:300px;
 overflow:hidden;
 position:relative;
 display:none;
}

/*
 Each slide
 Important:
 Set the width of your slides
 If height not specified height will be set by the slide content
 Set to display block
*/

.slides_container div.slide {
 width:300px;
 height:270px;
 display:block;
}


/*
 Next/prev buttons
*/

#slides .next,#slides .prev {
 position:absolute;
 top:107px;
 left:-39px;
 width:24px;
 height:43px;
 display:block;
 z-index:101;
}

#slides .next {
 left:315px;
}
/*
 Pagination
*/

.pagination {
 margin:26px auto 0;
 width:100px;
}

.pagination li {
 float:left;
 margin:0 1px;
 list-style:none;
}

.pagination li a {
 display:block;
 width:12px;
 height:0;
 padding-top:12px;
 background-image:url(http://1.bp.blogspot.com/-Nl5EYzENLjY/Ti7MbcfSgLI/AAAAAAAAAxo/-ljrbpuaFco/s1600/pagination.png);
 background-position:0 0;
 float:left;
 overflow:hidden;
}

.pagination li.current a {
 background-position:0 -12px;
}

/*
 Caption
*/

.caption {
 z-index:500;
 position:absolute;
 bottom:-35px;
 left:0;
 height:30px;
 padding:5px 20px 0 20px;
 background:#000;
 background:rgba(0,0,0,.5);
 width:270px;
 font-size:1.3em;
 line-height:1.33;
 color:#fff;
 border-top:1px solid #000;
 text-shadow:none;
}
/*
 Footer
*/

#footer {
 text-align:center;
 width:270px;
 margin-top:9px;
 padding:4.5px 0 18px;
 border-top:1px solid #dfdfdf;
}

#footer p {
 margin:4.5px 0;
 font-size:1.0em;
}

/*
 Anchors
*/

a:link,a:visited {
 color:#599100;
 text-decoration:none;
}

a:hover,a:active {
 color:#599100;
 text-decoration:underline;
}
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script> 
<script> 
  $(function(){
   $('#slides').slides({
    preload: true,
    preloadImage: 'http://3.bp.blogspot.com/-rUp0q1yOdRA/Ti7MbHaT2jI/AAAAAAAAAxk/Sygb-pLtS5E/s1600/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true,
    animationStart: function(current){
     $('.caption').animate({
      bottom:-35
     },100);
     if (window.console && console.log) {
      // example return of current slide number
      console.log('animationStart on slide: ', current);
     };
    },
    animationComplete: function(current){
     $('.caption').animate({
      bottom:0
     },200);
     if (window.console && console.log) {
      // example return of current slide number
      console.log('animationComplete on slide: ', current);
     };
    },
    slidesLoaded: function() {
     $('.caption').animate({
      bottom:0
     },200);
    }
   });
  });
 </script> 

This plugin interferes with the CSS of the Blogger Templates so please implement with care.

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


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


<style>
/* 
 Resets defualt browser settings
 reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }

/*
 Page style
*/
body { 
 font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
 letter-spacing:0;
 color:#434343;
 padding:20px 0;
 position:relative;
 text-shadow:0 1px 0 rgba(255,255,255,.8);
 -webkit-font-smoothing: subpixel-antialiased;
}

#container {
 width:310px;
 padding:10px;
 margin:0 auto;
 position:relative;
 z-index:0;
}

#example {
 width:330px;
 height:350px;
 position:relative;
}

#ribbon {
 position:absolute;
 top:-3px;
 left:-15px;
 z-index:500;
}

#frame {
 position:absolute;
 z-index:0;
 width:469px;
 height:341px;
 top:-3px;
 left:-80px;
}

#slides {
 position:absolute;
 top:15px;
 left:4px;
 z-index:100;
}

/*
 Slides container
 Important:
 Set the width of your slides container
 Set to display none, prevents content flash
*/

.slides_container {
 width:300px;
 overflow:hidden;
 position:relative;
 display:none;
}

/*
 Each slide
 Important:
 Set the width of your slides
 If height not specified height will be set by the slide content
 Set to display block
*/

.slides_container div.slide {
 width:300px;
 height:270px;
 display:block;
}


/*
 Next/prev buttons
*/

#slides .next,#slides .prev {
 position:absolute;
 top:107px;
 left:-39px;
 width:24px;
 height:43px;
 display:block;
 z-index:101;
}

#slides .next {
 left:315px;
}
/*
 Pagination
*/

.pagination {
 margin:26px auto 0;
 width:100px;
}

.pagination li {
 float:left;
 margin:0 1px;
 list-style:none;
}

.pagination li a {
 display:block;
 width:12px;
 height:0;
 padding-top:12px;
 background-image:url(http://1.bp.blogspot.com/-Nl5EYzENLjY/Ti7MbcfSgLI/AAAAAAAAAxo/-ljrbpuaFco/s1600/pagination.png);
 background-position:0 0;
 float:left;
 overflow:hidden;
}

.pagination li.current a {
 background-position:0 -12px;
}

/*
 Caption
*/

.caption {
 z-index:500;
 position:absolute;
 bottom:-35px;
 left:0;
 height:30px;
 padding:5px 20px 0 20px;
 background:#000;
 background:rgba(0,0,0,.5);
 width:270px;
 font-size:1.3em;
 line-height:1.33;
 color:#fff;
 border-top:1px solid #000;
 text-shadow:none;
}
/*
 Footer
*/

#footer {
 text-align:center;
 width:270px;
 margin-top:9px;
 padding:4.5px 0 18px;
 border-top:1px solid #dfdfdf;
}

#footer p {
 margin:4.5px 0;
 font-size:1.0em;
}

/*
 Anchors
*/

a:link,a:visited {
 color:#599100;
 text-decoration:none;
}

a:hover,a:active {
 color:#599100;
 text-decoration:underline;
}
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js"></script> 
<script> 
  $(function(){
   $('#slides').slides({
    preload: true,
    preloadImage: 'http://3.bp.blogspot.com/-rUp0q1yOdRA/Ti7MbHaT2jI/AAAAAAAAAxk/Sygb-pLtS5E/s1600/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true,
    animationStart: function(current){
     $('.caption').animate({
      bottom:-35
     },100);
     if (window.console && console.log) {
      // example return of current slide number
      console.log('animationStart on slide: ', current);
     };
    },
    animationComplete: function(current){
     $('.caption').animate({
      bottom:0
     },200);
     if (window.console && console.log) {
      // example return of current slide number
      console.log('animationComplete on slide: ', current);
     };
    },
    slidesLoaded: function() {
     $('.caption').animate({
      bottom:0
     },200);
    }
   });
  });
 </script> 

This plugin interferes with the CSS of the Blogger Templates so please implement with care.

4.Now to implement this, just copy this code wherever you want the Slideshow to appear:

<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-1.jpg" width="300" height="270" alt="Slide 1"></a> 
<div class="caption" style="bottom:0">
<p>
Happy Bokeh Thursday!</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-2.jpg" width="300" height="270" alt="Slide 2"></a> 
<div class="caption">
<p>
Taxi</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-3.jpg" width="300" height="270" alt="Slide 3"></a> 
<div class="caption">
<p>
Happy Bokeh raining Day</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-4.jpg" width="300" height="270" alt="Slide 4"></a> 
<div class="caption">
<p>
We Eat Light</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-5.jpg" width="300" height="270" alt="Slide 5"></a> 
<div class="caption">
<p>
&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-6.jpg" width="300" height="270" alt="Slide 6"></a> 
<div class="caption">
<p>
twelve.inch</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/images-with-captions/img/slide-7.jpg" width="300" height="270" alt="Slide 7"></a> 
<div class="caption">
<p>
Save my love for loneliness</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="http://2.bp.blogspot.com/-IJFK6FGw_bU/Ti7MZ4pmyRI/AAAAAAAAAxc/yehaqhk9BJI/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
<a href="#" class="next"><img src="http://2.bp.blogspot.com/-U4Pd4po17xU/Ti7MZvJ4kpI/AAAAAAAAAxY/HJTWgJuPTno/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 
</div>
<img src="http://3.bp.blogspot.com/-0-CYMaLrTzw/Ti7MapgCAVI/AAAAAAAAAxg/ZUkR86eV2S8/s1600/example-frame.png" width="469" height="341" alt="Example Frame" id="frame">
</div>
</div>


The highlighted lines in the above code are the Slides so you can change them and modify them,give titles,etc

5.Now save the Post/Page.

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

Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Implementing JqZoom Evolution in Blogger

JqZoom allows the user to inspect an image with a small magnifier window

It can be modified to display a mask over the image or not to show an magnifier window.

This jQuery plugin helps to embed detailed big images in any website.

The script can be applied to single or multiple images on the same webpage.

             


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 href="http://dl.dropbox.com/u/27675057/JqZoom/css/jquery.jqzoom.css" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>  
<script src="http://dl.dropbox.com/u/27675057/JqZoom/js/jquery.jqzoom-core.js" type="text/javascript">
</script>

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
       jQuery('a#NAMEOFYOURCHOICE').jqzoom();
 
  });
 
  
</script>

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


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


<link href="http://dl.dropbox.com/u/27675057/JqZoom/css/jquery.jqzoom.css" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
</script>  
<script src="http://dl.dropbox.com/u/27675057/JqZoom/js/jquery.jqzoom-core.js" type="text/javascript">
</script>

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
       jQuery('a#NAMEOFYOURCHOICE').jqzoom();
 
  });
 
  
</script>

4.Now for adding the images into JqZoom Evolution ,Firstly add the image normally using Insert Image Button




Now When you see the code in the edit HTML window it would be something like this

<a href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a id=’NAMEOFYOURCHOICE’ href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make sure that the id tag matches with that declared in the snippet 


JqZoom Evolution provides for various options Here is a list of them:

Here are some customized javascript snippets for using various options:

<script type="text/javascript">
 
  jQuery(document).ready(function(){
 
/*Standard Zoom*/
       jQuery('a#demo1').jqzoom();
 
 /*Reverse Zoom*/
                jQuery('a#demo2').jqzoom({
    zoomType: 'reverse'
         });
 
 /*Drag Zoom*/
                jQuery('a#demo3').jqzoom({
             zoomType: 'drag'
         });
 
 /*Inner Zoom*/
                jQuery('a#demo4').jqzoom({
             zoomType: 'innerzoom'
         });
 
 /*Always Zoom*/
                jQuery('a#demo5').jqzoom({
             zoomType: 'standard',
                    alwaysOn : true
         });
 
 /*Customized Zoom*/
                jQuery('a#demo6').jqzoom({
             zoomType: 'standard',
                    alwaysOn : false,
                    zoomWidth: 250,
                    zoomHeight:200,
                    position:'left',
                    xOffset: 30,
                    yOffset:80,
                    showEffect : 'fadein',
                    hideEffect: 'fadeout'
         });
 
 
  });
 
  
</script> 

5.Now save the Post/Page.






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






Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Implementing PhotoViewer in Blogger

PhotoViewer is a Lightbox based on the extremely popular YUI(Yahoo UI) Framework.It is now obsolete.Some of its features are:

>Load your Flickr RSS feed
>Lightbox functionality, modal dialog and auto-centered panels
>Slide show configuration models
>Cross-browser, cross-platform compatibility
>Create galleries using existing HTML
>Create galleries using remote XML files
>Quick set-up time, endless configuration options
>Light weight for the flexibility

             

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 href="http://dl.dropbox.com/u/27675057/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

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


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


<link href="http://dl.dropbox.com/u/27675057/Photoviewer/base-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/fonts-min.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/container.css" rel="stylesheet" type="text/css"></link>
<link href="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base.css" rel="stylesheet" type="text/css"></link>

<script src="http://dl.dropbox.com/u/27675057/Photoviewer/yahoo-dom-event.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/dragdrop-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/animation-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/container-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/connection-min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Photoviewer/photoviewer_base-min.js" type="text/javascript">
</script>
<script src="assets/javascript.cfm?event=demos" type="text/javascript">
</script>

4.Now for adding the images into PhotoViewer ,Firstly add the image normally using Insert Image Button




Now When you see the code in the edit HTML window it would be something like this

<a href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<div id=’SomeName’>
<a class=”photoviewer” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>
</div>

As you see we only added class=”photoviewer” and enclosed it inside a div tag


After this add a snippet to link it to the plugin as following:

<script type="text/javascript">
// config 
YAHOO.photoViewer.config = {
 viewers: {
  "SomeName" : {
   properties: {
    id: "lb1",
    grow: 0.2,
    fade: 0.2,
    modal: true,
    dragable: true,
    fixedcenter: true,
    loadFrom: "html",
    position: "absolute",
    easing: YAHOO.util.Easing.easeBothStrong
   }
  }
 }
};
</script>

5.Now save the Post/Page.




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




Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.