Blogger Label Widget Style #2

Continuing from my recent post about Blogger Label Widget style , I present another CSS3 powered style. It uses :before and :after selectors extensively & cunningly to manipulate the shapes accompanied with CSS3 transform. CSS3 gradients are used for backgrounds. It also highlights the the count besides each label. It was originally designed by Jakob Cosoroaba , I just converted it into Blogger usable .

 

Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud and also tick the option to display the count.

Demo

CSS3 Label Style

To add this Label Style to your blog, you can use the one click installer

<style type=”text/css”>
/*<![CDATA[*/
.label-size{display: inline-block;padding: 0px 10px;height: 29px;line-height:29px;border-radius: 5px;font-weight:bold;font-size:12px;text-decoration:none;}

.label-size{

border: 1px solid #769e42;

box-shadow: inset 0 1px 0 #c5e59c ;

background-color: #9ed35a;

text-shadow: 0px 1px 1px #6ea23b;

color: #fff;

background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

}

.label-size:hover{

background-color: #b7fa66;

background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);

background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);

background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);

background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);

background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);

}

.label-size:active{

background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

}

.label-size{

display:inline-block;

border-radius: 5px 0 0 5px;

border-right-width:0;

position:relative;

z-index:5;

margin-right: 20px;

margin-bottom: 10px;

}

.label-size:after{

content: ” “;

width: 22px;

height: 22px;

line-height: 18px;

font-size:25px;

border-top: 1px solid #769e42;

border-right: 1px solid #769e42;

box-shadow: inset 0 1px 0 #c5e59c ;

background-color: #9ed35a;

text-shadow: 0px 1px 1px #7eac46;

border-radius: 3px 7px 3px 0;

color: #fff;

background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

position:absolute;

top: 3px;

right: -12px;

z-index:-3;

-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */

-moz-transform: rotate(45deg); /* FF3.5+ */

-ms-transform: rotate(45deg); /* IE9 */

-o-transform: rotate(45deg); /* Opera 10.5 */

transform: rotate(45deg);

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */

M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod=’auto expand’);

zoom: 1;

}

.label-size:hover:after{

background-color: #b7fa66;

background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);

background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);

background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);

background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);

background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);

}

.label-size:active:after{

background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);

}

.label-size:before{

content: ” “;

height:5px;

width:5px;

display:block;

position:absolute;

right:-3px;

top:11px;

background-color: #fcfdf5;

border: 1px solid #83ab52;

border-radius:5px;

box-shadow: 0 1px 0 #b2ddd83;

}

.label-size span{

padding:2px 5px;

border: 1px solid #9e5c26;

border-radius: 5px;

box-shadow: inset 0 1px 0 #f5bf8c;

background-color: #ed943f;

text-shadow: 0px 1px 1px #000;

margin-left: 10px;

background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);

background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);

background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);

background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);

}
#Label1 {height:210px !important;}

/*]]>*/
</style>
<a href=”http://www.stylifyyourblog.com/” >Stylify Your Blog</a>

Or you can add it manually

To do that just add the following CSS to your Blog

.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
  border: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #6ea23b;
  color: #fff;
  background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
  background-color: #b7fa66;
  background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
  background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
  display:inline-block;
  border-radius: 5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right: 20px;
  margin-bottom: 10px;
}

.label-size:after{
  content: " ";
  width: 22px;
  height: 22px;
  line-height: 18px;
  font-size:25px;
  border-top: 1px solid #769e42;
  border-right: 1px solid #769e42;
  box-shadow: inset 0 1px 0 #c5e59c ;
  background-color: #9ed35a;
  text-shadow: 0px 1px 1px #7eac46;
  border-radius: 3px 7px 3px 0;
  color: #fff;
  background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  position:absolute;
  top: 3px;
  right: -12px;
  z-index:-3;
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg);  /* FF3.5+ */
        -ms-transform: rotate(45deg);  /* IE9 */
         -o-transform: rotate(45deg);  /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
  background-color: #b7fa66;
  background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
  background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
  background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
  background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
  content: " ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color: #fcfdf5;
  border: 1px solid #83ab52;
  border-radius:5px;
  box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
  padding:2px 5px;
  border: 1px solid #9e5c26;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f5bf8c;
  background-color: #ed943f;
  text-shadow: 0px 1px 1px #000;
  margin-left: 10px;
  background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}

Here the height in the Line 130 of the CSS above has to be adjusted according to the number of Labels your blog has . If this is not done then the Labels might overlap with other widgets.

Will be publishing one more design in the next week and also a tutorial on how to create the Add to Blogger button as asked my many readers . In case you have any problem implementing this in your Blog, feel free to ask .

Label Widget Style for Blogger

label blogger

Labels are a nice way to organize your content on the blog. It makes grouping posts easier and gives your blog a more systematic look. The default Label gadget provided by Blogger has some customization options but doesn’t provide much control over the Design aspect. Today I will by sharing a CSS3 powered design for the Default Label gadget. I came across them on WebDesignTuts+ and thought that a similar style for Blogger Labels would also look pretty amazing. 

Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud. 

Demo

Tagtastic Tag Cloud 

label style blogger

This design by Luke Spoor has some clever use of CSS3 transformations and :before & :after selectors. For the backgrounds it uses CSS Gradients. 

 To add this Label Style to your blog, you can use the one click installer

<style type=”text/css”>
/*<![CDATA[*/
.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;

font-family:’Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;

color:#996633;
text-shadow:0px 1px 0px rgba(255,255,255,.4);

padding:0.417em 0.417em 0.417em 0.917em;

border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;

-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;

background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#feda71′, EndColorStr=’#feba47′);

-webkit-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);

z-index:100;
}

.label-size:before {
content:”;

width:1.30em;
height:1.39em;

background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#feda71′, EndColorStr=’#feba47′);

position:absolute;
left:-0.69em;
top:.2em;

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);

border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;

-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;

z-index:1;
}

.label-size:after {
content:”;

width:0.5em;
height:0.5em;

background:#fff;

-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;

border:1px solid #d99d38;

-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;

position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}
#Label1 {height:210px;}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’);

border-color:#e1b160;
}

.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’);

border-color:#e1b160;
}
/*]]>*/
</style>
<a href=”http://www.stylifyyourblog.com/” >Stylify Your Blog</a>

Or you can add it manually

To do that just add the following CSS to your Blog

.label-size {
    float:left;
    margin:0 0 7px 20px;
    position:relative;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    text-decoration:none;
    color:#996633;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
    padding:0.417em 0.417em 0.417em 0.917em;
    border-top:1px solid #d99d38;
    border-right:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0.25em 0.25em 0;
    -moz-border-radius:0 0.25em 0.25em 0;
    border-radius:0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
 
    z-index:100;
}

.label-size:before {
    content:'';
    width:1.30em;
    height:1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position:absolute;
    left:-0.69em;
    top:.2em;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    border-left:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0 0 0.25em;
    -moz-border-radius:0 0 0 0.25em;
    border-radius:0 0 0 0.25em;
    z-index:1;
}

.label-size:after {
    content:'';
    width:0.5em;
    height:0.5em;
    background:#fff;
    -webkit-border-radius:4.167em;
    -moz-border-radius:4.167em;
    border-radius:4.167em;
    border:1px solid #d99d38;
    -webkit-box-shadow:0 1px 0 #faeaba;
    -moz-box-shadow:0 1px 0 #faeaba;
    box-shadow:0 1px 0 #faeaba;
    position:absolute;
    top:0.667em;
    left:-0.083em;
    z-index:9999;
}
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
#Label1 {height:210px !important;}

Here the height in the Line 98 of the CSS above has to be adjusted according to the number of Labels your blog has . If this is not done then the Labels might overlap with other widgets.

Hope you liked the Label Design, will be publishing more of these designs soon. In case you have any problem implementing these on your Blog, feel free to ask .

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 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!