Five CSS3 Breadcrumb Designs

breadcrumb designs showcaseBreadcrumbs are an alternative navigation. Not only do they act as a visual aid to inform the reader about their position in the blog’s hierarchy but also give a more structured feel. The previous post was about how to integrate Breadcrumbs into Blogger and this one is a showcase of 5 designs which you can use in place of the default design provided before. All of these designs use CSS3 extensively with no use of images anywhere. Each of them is beautifully styled and should integrate well with your blog’s current design.

Before You get Started
Make sure that you already have Breadcrumbs in your blog. In case you haven’t put them , follow this tutorial first before proceeding further. Also if you putting them now , then don’t include any CSS mentioned in the steps .

Make sure remove all the CSS related to the Breadcrumbs from your blog

We will be using a common HTML structure for all these design , it is something like

 <div class='breadcrumbs' >
<a class='first' href='#' ><span>Home</span></a>
<a href='#' ><span>CSS3</span></a>
<a href='#' ><span>Widgets</span></a>
</div>

Now lets get started , just add the CSS in your template manually or add it directly using the One-Click button

Design I

breadcrumb designed in css3

Demo

This is the image-less version of the default style.
The credit goes to Jake Rocheleau

Add it directly

<style type=”text/css” >
//<![CDATA[
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)”;background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)”;color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or Add it manually

CSS

.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a:last-child{border-right-width:1px!important;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px}
.breadcrumbs a{color:#666;display:block;float:left;font-size:12px;position:relative;text-decoration:none;border:1px solid #D9D9D9;border-right-width:0;background-image:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";background-repeat:no-repeat;background-position:100% 0;z-index:1;padding:7px 16px 7px 19px}
.breadcrumbs a:hover{border-top-color:#c4c4c4;border-bottom-color:#c4c4c4;background-image:0 45% #f8f8f8 73%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";color:#333;-moz-box-shadow:0 2px 2px #e8e8e8;-webkit-box-shadow:0 2px 2px #e8e8e8;box-shadow:0 2px 2px #e8e8e8}
.first,.first:hover{z-index:30!important;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px}

Design II

breadcrumb in css3

Demo

The inspiration for this came from a Dribbble shot by Maleika E. A.

Add it directly

<style type=”text/css” >
//<![CDATA[
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or Add it manually

CSS

.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a{text-decoration:none;color:#444;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;border-radius:0 100px 100px 0;margin:0 -16px 0 0;padding:10px 22px 10px 30px}
.breadcrumbs a:nth-child(odd){border:1px solid #BFC0B0;box-shadow:4px 0 6px 0 #999A8A;background-image:linear-gradient(tobottomright,#BFC0B00%,#CECFC1100%)}
.breadcrumbs a:nth-child(even){color:#FFF;border:1px solid #999A8A;box-shadow:4px 0 6px 0 #BFC0B0;background-image:linear-gradient(tobottomright,#999A8A0%,#A5A895100%)}
.breadcrumbs a:nth-child(even):hover{color:#333}
.breadcrumbs a:nth-child(odd):hover{color:#FFF}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:29!important}
.breadcrumbs a:last-child{box-shadow:4px 0 6px 0 transparent!important}

Design III

breadcrumb

Demo

All thanks to Showcaze for this

Add it directly

<style type=”text/css” >
//<![CDATA[
.breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:””;zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:”;position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:”;position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or Add it manually

CSS

.breadcrumbs{zoom:1;line-height:40px;height:40px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px #CCC solid;-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.1);letter-spacing:2px;margin:0;padding:0}
.breadcrumbs:before,.breadcrumbs:after{display:table;content:"";zoom:1}
.breadcrumbs:after{clear:both}
.breadcrumbs a{color:#999}
.breadcrumbs > a{position:relative;height:40px;overflow:hidden;float:left;padding:0 40px 0 20px}
.breadcrumbs > a:after{content:'';position:absolute;right:8px;top:-1px;height:40px;width:40px;border-right:3px rgba(0,0,0,0.1) solid;border-bottom:3px rgba(0,0,0,0.1) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs > a:before{content:'';position:absolute;right:11px;top:0;height:40px;width:40px;border-right:1px rgba(0,0,0,0.2) solid;border-bottom:1px rgba(0,0,0,0.2) solid;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.breadcrumbs a :last-child{color:#333}
.breadcrumbs > a:last-child span:before,.breadcrumbs > a:last-child span:after{display:none}
.breadcrumbs a:hover{text-decoration:none!important}
.breadcrumbs span:hover{color:#666}
.breadcrumbs > a:hover:after{border-color:rgba(0,0,0,0.2)}
.breadcrumbs > a:hover:before{border-color:rgba(0,0,0,0.3)}
.breadcrumbs span{margin-top:1px;color:#999}

Want to get these updates straight to your Inbox , Then Subscribe !

Design IV

breadcrumb designed css3

Demo

Partly designed by me

Add it directly

<style type=”text/css” >
//<![CDATA[
.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a span::after{background:#DDD;content:””;height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or Add it manually

CSS

.breadcrumbs{list-style:none;margin:0}
.breadcrumbs a span::after{background:#DDD;content:"";height:2.5em;margin-top:-1.25em;position:absolute;right:-1em;top:50%;width:2.5em;z-index:-1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-moz-border-radius:.4em;-webkit-border-radius:.4em;border-radius:.4em}
.breadcrumbs a{text-decoration:none;color:#444;background:#DDD;position:relative;z-index:1;float:left;text-shadow:0 1px 0 rgba(255,255,255,.5);-moz-border-radius:.4em 0 0 .4em;-webkit-border-radius:.4em 0 0 .4em;border-radius:.4em 0 0 .4em;margin:0 2em 0 0;padding:.7em 1em .7em 2em}
.breadcrumbs a:hover,.breadcrumbs a:hover > span:after{background:#f1f1f1;color:#333}

Design V

breadcrumb design css3

Demo

Again special thanks to Showcaze for this awesome design

Add it directly

<style type=”text/css” >
//<![CDATA[
.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
.breadcrumbs> a:before{content:”;position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
.breadcrumbs a{list-style:none}
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:””;position:absolute;top:50%;left:0;display:none}
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:31!important}
.breadcrumbs a:nth-child(3){z-index:32!important}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Tutorials” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or Add it manually

CSS

.breadcrumbs{list-style:none;height:36px;line-height:36px;padding-left:36px;margin:0}
.breadcrumbs > a{position:relative;float:left;margin-left:-36px;-moz-border-radius:18px;-webkit-border-radius:18px;-ms-border-radius:18px;-o-border-radius:18px;border-radius:18px;background-color:#FFF;background-image:linear-gradient(tobottom,#FFF,#EEE);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-ms-box-shadow:0 0 5px rgba(0,0,0,0.5);-o-box-shadow:0 0 5px rgba(0,0,0,0.5);box-shadow:0 0 5px rgba(0,0,0,0.5)}
.breadcrumbs> a:before{content:'';position:absolute;z-index:-1;left:-6px;top:-6px;width:100%;height:100%;background:#D5D5D5;-moz-border-radius:22px;-webkit-border-radius:22px;-ms-border-radius:22px;-o-border-radius:22px;border-radius:22px;border:1px #C5C5C5 solid;padding:5px}
.breadcrumbs > a > span{color:#666;float:left;padding:0 46px 0 40px}
.breadcrumbs a{list-style:none}
.breadcrumbs a::before,.breadcrumbs a::after,.breadcrumbs a span::before,.breadcrumbs a span::after{content:"";position:absolute;top:50%;left:0;display:none}
.breadcrumbs a span::before,.breadcrumbs a span::after{background:transparent;margin:-8px 0 0}
.breadcrumbs > a:last-child > span{color:#333;padding:0 46px 0 60px}
.breadcrumbs > a:hover,.breadcrumbs > a:last-child{background-color:#EEE;background-image:linear-gradient(tobottom,#EEE,#DDD)}
.breadcrumbs > a:hover > span{color:#FFF;padding:0 66px 0 60px}
.breadcrumbs > a:last-child:hover > span{padding:0 46px 0 60px}
.first,.first:hover{z-index:30!important}
.breadcrumbs a:nth-child(2){z-index:31!important}
.breadcrumbs a:nth-child(3){z-index:32!important}

Do you have any other designs to add to these ? Feel free to add them via the comments , I will surely do a another post about them. Lastly if you are having any kind of problems then feel free to express them below

Also the new Forum is up so don’t forget to check it out

Blogger Label Widget Style #3 and #4

Tag Cloud design

Tag Clouds are used to display all the categories or labels present in a blog. The inherent design of this widget in Blogger is very minimal and has a lot of space for creativity. In this post we will be showcasing two Label Widget designs which you can easily integrate within your blog. Both these use :after and :before selectors to manipulate the tag’s design at the edges. Also CSS3 Gradients and Box-Shadow properties are also used to give it more sophisticated and peppy look . Lets get started then

Just a Second
Before you get started make sure that your Blog has the Label Widget present already and set the Display option to Cloud . After you have done this then only proceed to the next

Also Don’t forget to checkout the Design #1 and Design #2 of the Label Styles.

Design #3

Label tag cloud design blogger

Demo

To add using One Click Installer Method

<style type=”text/css”>
/*<![CDATA[*/
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:””;
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:””;
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}
/*]]>*/
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or just add the following CSS in your Blog(preferably before the ]]></b:skin> tag in the Edit HTML of the Template)

.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px; 
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px; 
 border-top-right-radius:4px; 
 } 
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;  
 } 
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }  

.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Want to get these updates straight to your Inbox , Then Subscribe !

Design #4

Label tag design for blog

Demo

To add using One Click Installer Method

<style type=”text/css”>
/*<![CDATA[*/

.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: ‘Helvetica Neue’, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

.label-size a {
color: #996633;
border: 1px solid #DDA13C;

background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeb14b’, endColorstr=’#cc912d’,GradientType=0 );
}

.label-size a:before {
content: ‘2022’;
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;

text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
text-decoration: none;

background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f0b756′, endColorstr=’#d6a044′,GradientType=0 );
}
/*]]>*/
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>

Or just add the following CSS in your Blog(preferably before the ]]></b:skin> tag in the Edit HTML of the Template)

.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}


.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
    
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before  {
    content: '2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
    
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
    text-decoration: none;
    
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
} 

The credit goes to Fublo Blog for designing such great Tag designs , I have made them usable for Blogger Users

There are more Label designs that I will be sharing in the coming days , so stay tuned

Customize Google Custom Search Box Part 2

Google Custom Search Search Box designs

Google Custom Search is just like a dream come true for any Website owner. The ability to provide your readers with Google-like searching power into your website’s vast archives that too at no expense. It makes sure readers searching for a specific topic that you published a long time is never missed by them. But there is a shortcoming in terms of designs to choose from. Here I will be showcasing 6 different designs of search boxes which will surely suit your blog.

Do remember to check out the previous 6 Search Box Designs for your Google Custom Search Box

I am assuming that you have already setup your Google Search Custom search engine. In case you haven’t ,then first check this guide for setting it up for your blog .There are many variations Google Custom Search with options of AutoComplete and other features but normally looks something like this

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>

Here you can’t really see where to apply the styling as the form tag is dynamically added via JavaScript after the page load. Now the following code also works the same way as the above Code, only thing is that it is easy to Customize and also loads faster :

<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"> 
  <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> 
  <input name="q" type="text" /> 
  <input value="Search" name="sa" type="submit"/> 
</form> 

In the id “searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” , XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY is your “Search engine ID” which you can find on the Control panel of your search engine.

If you are using the Adsense linked GCS then your search Box should look something like this:

<form action="URL of the page where the Result open id="cse-search-box"> 
  <div> 
    <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" /> 
    <input type="text" name="q" /> 
    <input type="submit" name="sa" value="Search"  /> 
  </div> 
</form>
 
  

How to Add it To Blogger:

Either you can install it directly using the One-Click Installer or follow the steps below

1.In Your Blogger Dashboard Click Template > Edit HTML

2. Find the following piece of code : (Press Ctrl+F for a search bar to help find the code )


]]></b:skin>


3. Copy and Paste any one of the CSS code that you like from below Directly just Above


]]></b:skin> .


4. Now go to Layout > Add a Gadget and add the corresponding HTML of the Search Box code into a HTML/JavaScript Gadget

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

Design 1

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[
.signup {
width: 550px;
}

.signup::before,
.signup::after {
content: “”;
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
top: 0;
z-index: -1;
background: #fff;
border: 1px solid #ccc;
}

.signup::after {
left: 4px;
right: 4px;
bottom: -5px;
z-index: -2;
-moz-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
-webkit-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}

::-webkit-input-placeholder {
color: #bbb;
}

:-moz-placeholder {
color: #bbb;
}

.placeholder{
color: #bbb; /* polyfill */
}

.signup input{
margin: 5px 0;
padding: 15px;
*width: 518px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.signup input:focus{
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}

.signup button{
margin: 0 0 0 20px;
padding: 15px 8px;
cursor: pointer;
border: 1px solid #2493FF;
overflow: visible;
display: inline-block;
color: #fff;
font: bold 1.4em arial, helvetica;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
background-color: #2493ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-ms-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255, 255, 255, .5) inset;
}

.signup button:hover{
background-color: #7cbfff;
border-color: #7cbfff;
}

.signup button:active{
position: relative;
top: 3px;
text-shadow: none;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<form id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” class=”signup”>
<input placeholder=”Search for” type=”text” name=”q” />
<button type=”submit”>Search</button>
</form>

Or add it manually

CSS

.signup {
   width: 550px;
   }

  .signup::before, 
  .signup::after {
   content: "";
   position: absolute;
   bottom: -3px;
   left: 2px;
   right: 2px;
   top: 0;
   z-index: -1;
   background: #fff;
   border: 1px solid #ccc;   
  }

  .signup::after {
   left: 4px;
   right: 4px;
   bottom: -5px;
   z-index: -2;
   -moz-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
   -webkit-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
   box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
  }

  

        ::-webkit-input-placeholder {
           color: #bbb;
        }
        
        :-moz-placeholder {
           color: #bbb;
        }          

  .placeholder{
   color: #bbb; /* polyfill */
  }  

  .signup input{
   margin: 5px 0;
   padding: 15px;
   *width: 518px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #ccc;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; 
  }

  .signup input:focus{
   outline: 0;
   border-color: #aaa;
   -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
   -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
  }  

  .signup button{
   margin: 0 0 0 20px;
   padding: 15px 8px;   
   cursor: pointer;
   border: 1px solid #2493FF;
   overflow: visible;
   display: inline-block;
   color: #fff;
   font: bold 1.4em arial, helvetica;
   text-shadow: 0 -1px 0 rgba(0,0,0,.4);    
   background-color: #2493ff;
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
   background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
   background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
   -webkit-transition: background-color .2s ease-out;
   -moz-transition: background-color .2s ease-out;
   -ms-transition: background-color .2s ease-out; 
   -o-transition: background-color .2s ease-out;  
   transition: background-color .2s ease-out;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow:  0 2px 1px rgba(0, 0, 0, .3),
         0 1px 0 rgba(255, 255, 255, .5) inset;
   -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
        0 1px 0 rgba(255, 255, 255, .5) inset;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
      0 1px 0 rgba(255, 255, 255, .5) inset;             
  }

  .signup button:hover{
     background-color: #7cbfff;
            border-color: #7cbfff;
  }

  .signup button:active{
   position: relative;
   top: 3px;
   text-shadow: none;
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
  }

HTML

<form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" class="signup">
<input placeholder="Search for" type="text" name="q"  />
<button type="submit">Search</button> 
</form>

Design 2

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[
.form-wrapper {
width: 450px;
padding: 8px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

.form-wrapper #search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}

.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}

.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}

.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}

.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<form class=”form-wrapper” id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” >
<input type=”text” id=”search” placeholder=”Search for ” ><input type=”submit” value=”go” id=”submit”>
</form>

Or add it manually

CSS

.form-wrapper {
        width: 450px;
        padding: 8px;
        margin: 100px auto;
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: #dedede #bababa #aaa #bababa;
        -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background-color: #f6f6f6;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
        background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
        background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

.form-wrapper #search {
        width: 330px;
        height: 20px;
        padding: 10px 5px;
        float: left;
        font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 1px solid #ccc;
        -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}

.form-wrapper #search:focus {
        outline: 0;
        border-color: #aaa;
        -moz-box-shadow: 0 1px 1px #bbb inset;
        -webkit-box-shadow: 0 1px 1px #bbb inset;
        box-shadow: 0 1px 1px #bbb inset;
}

.form-wrapper #search::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}

.form-wrapper #search:-moz-placeholder {
        color: #999;
        font-weight: normal;
}

.form-wrapper #search:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
} 

.form-wrapper #submit {
        float: right;
        border: 1px solid #00748f;
        height: 42px;
        width: 100px;
        padding: 0;
        cursor: pointer;
        font: bold 15px Arial, Helvetica;
        color: #fafafa;
        text-transform: uppercase;
        background-color: #0483a0;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
        background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
        background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
        background-image: linear-gradient(top, #31b2c3, #0483a0);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
        background-color: #31b2c3;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
        background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
        background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
        background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
        background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
        background-image: linear-gradient(top, #0483a0, #31b2c3);
}       

.form-wrapper #submit:active {
        outline: 0;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

.form-wrapper #submit::-moz-focus-inner {
        border: 0;
}

HTML

<form class="form-wrapper" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown" >
<input type="text" id="search" placeholder="Search for CSS3, HTML5, jQuery ..." ><input type="submit" value="go" id="submit">
</form>

 Design 3

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[
.cf:before, .cf:after{
content:””;
display:table;
}

.cf:after{
clear:both;
}

.cf{
zoom:1;
}
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #f9f9f9 !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;
color: #fff;
text-transform: uppercase;
background: #d83c3c;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}

.form-wrapper button:hover{
background: #e54040;
}

.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
}

.form-wrapper button:before {
content: ”;
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}

.form-wrapper button:hover:before{
border-right-color: #e54040;
}

.form-wrapper button:focus:before{
border-right-color: #c42f2f;
}

.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<form class=”form-wrapper cf” id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” >
<input type=”text” placeholder=”Search here…” required><button type=”submit”>Search</button></form>

Or add it manually

CSS

.cf:before, .cf:after{
      content:"";
      display:table;
    }
    
    .cf:after{
      clear:both;
    }

    .cf{
      zoom:1;
    }
.form-wrapper {
        width: 450px;
        padding: 15px;
        margin: 150px auto 50px auto;
       background: #f9f9f9 !important;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    }
    
    .form-wrapper input {
        width: 330px;
        height: 20px;
        padding: 10px 5px;
        float: left;    
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 0;
        background: #eee;
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;      
    }
    
    .form-wrapper input:focus {
        outline: 0;
        background: #fff;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    }
    
    .form-wrapper input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    
    .form-wrapper input:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }
    
    .form-wrapper input:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }    
    
    .form-wrapper button {
  overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 110px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    }   
      
    .form-wrapper button:hover{  
        background: #e54040;
    } 
      
    .form-wrapper button:active,
    .form-wrapper button:focus{   
        background: #c42f2f;    
    }
    
    .form-wrapper button:before {
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent #d83c3c transparent;
        top: 12px;
        left: -6px;
    }
    
    .form-wrapper button:hover:before{
        border-right-color: #e54040;
    }
    
    .form-wrapper button:focus:before{
        border-right-color: #c42f2f;
    }    
    
    .form-wrapper button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

HTML

<form class="form-wrapper cf" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"  >
<input type="text" placeholder="Search here..." required><button type="submit">Search</button></form>

 Design 4

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[

.box.login
{
width:332px;

}

.box input[type=text],
.txtField,
.cjComboBox
{
border:6px solid #F7F9FA;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
margin:3px 0 4px;
padding:8px 6px;
width:205px;
float:left;
display:block;
}
.box input[type=text]:focus,
.txtField:focus,
.cjComboBox:focus
{
border:6px solid #f0f7fc;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
color:#333;
}
.cjComboBox
{
width:294px;
}
.cjComboBox.small
{
padding:3px 2px 3px 6px;
width:100px;
border-width:3px !important;
}
.txtField.small
{
padding:3px 6px;
width:200px;
border-width:3px !important;
}

.box a{color:#999;}
.box a:hover, .box a:focus{text-decoration:underline;}
.box a:active{color:#f84747;}
.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#badff3′, EndColorStr=’#7acbed’)”;
border:1px solid #7db0cc !important;
cursor: pointer;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-top: 10px;
float:right;
padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#7acbed’, EndColorStr=’#badff3′)”;
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<form class=”box login” id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” >
<input type=”text” tabindex=”1″ placeholder=”Search” > <input type=”submit” class=”btnLogin” value=”Search” >
</form>

Or add it manually

CSS

.box.login
{
    width:332px;
 
}

.box input[type=text],
.txtField,
.cjComboBox
{
    border:6px solid #F7F9FA;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    margin:3px 0 4px;
    padding:8px 6px;
    width:205px;
float:left;
    display:block;
}
.box input[type=text]:focus,
.txtField:focus,
.cjComboBox:focus
{
    border:6px solid #f0f7fc;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
 color:#333;
}
.cjComboBox
{
    width:294px;
}
.cjComboBox.small
{
    padding:3px 2px 3px 6px;
    width:100px;
    border-width:3px !important;
}
.txtField.small
{
    padding:3px 6px;
    width:200px;
    border-width:3px !important;
}

.box a{color:#999;}
.box a:hover, .box a:focus{text-decoration:underline;}
.box a:active{color:#f84747;}
.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-top: 10px;
    float:right;
 padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; 
}

HTML

<form class="box login" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"  >
<input type="text" tabindex="1" placeholder="Search" > <input type="submit" class="btnLogin" value="Search" >
</form>

Design 5

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[
.login-form {
width: 300px;
margin: 0 auto;

}
.login-form {
padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .input {
width: 46%;
padding: 15px 25px;

font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

background: #fff;
border: 1px solid #fff;
border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

/* Second input field */
.login-form .password, .login-form .pass-icon {
margin-top: 25px;
}

.login-form .input:hover {
background: #dfe9ec;
color: #414848;
}

.login-form .input:focus {
background: #dfe9ec;
color: #414848;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

input:focus + div{
left: -46px;
}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}

/* Login button */
.login-form .button {
float:right;
padding: 11px 25px;

font-family: ‘Bree Serif’, serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;

box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);

box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login-form .button:focus {
position: relative;
bottom: -1px;

background: #56c2e1;

box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<form class=”login-form” id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” >
<input name=”username” type=”text” class=”input username” placeholder=”Search” /><input type=”submit” name=”submit” value=”Search” class=”button” />
</form>

Or add it manually

CSS

.login-form {
 width: 300px;
 margin: 0 auto;
 
}
.login-form  {
 padding: 0 30px 25px 30px;
}

/* Input field */
.login-form  .input {
 width: 46%;
 padding: 15px 25px;
 
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 font-weight: 400;
 font-size: 14px;
 color: #9d9e9e;
 text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
 
 background: #fff;
 border: 1px solid #fff;
 border-radius: 5px;
 
 box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

/* Second input field */
.login-form  .password, .login-form  .pass-icon {
 margin-top: 25px;
}

.login-form  .input:hover {
 background: #dfe9ec;
 color: #414848;
}

.login-form .input:focus {
 background: #dfe9ec;
 color: #414848;
 
 box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

 input:focus + div{
 left: -46px;
}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
 transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}


/* Login button */
.login-form .button {
 float:right;
 padding: 11px 25px;
 
 font-family: 'Bree Serif', serif;
 font-weight: 300;
 font-size: 18px;
 color: #fff;
 text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
 
 background: #56c2e1;
 border: 1px solid #46b3d3;
 border-radius: 5px;
 cursor: pointer;
 
 box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
 -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
 -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form  .button:hover {
 background: #3f9db8;
 border: 1px solid rgba(256,256,256,0.75);
 
 box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login-form  .button:focus {
 position: relative;
 bottom: -1px;
 
 background: #56c2e1;
 
 box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
 -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
 -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

HTML

<form class="login-form" id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"  >
<input name="username" type="text" class="input username" placeholder="Search" /><input type="submit" name="submit" value="Search" class="button" />
</form>

Design 6

Demo

Add using One Click Installer into Blogger

<style type=”text/css” >
//<![CDATA[

#contentz {
width: 400px;
}

#contentz:after,
#contentz:before {
background: #f9f9f9;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f8f8f8′, endColorstr=’#f9f9f9′,GradientType=0 );
border: 1px solid #c4c6ca;
content: “”;
display: block;
height: 100%;
left: -1px;
position: absolute;
width: 100%;
}
#contentz:after {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg); content: “”;

top: 0;
z-index: -1;
}
#contentz:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg); content: “”;

-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
top: 0;
z-index: -2;
}
#contentz form { margin: 0 20px; position: relative }
#contentz form input[type=”text”] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: #EAE7E7;
border: 1px solid #C8C8C8;
color: #777; width: 56%;

font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 10px;
float: left;
}
#contentz form input[type=”text”]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #ed1c24 inset;
background-color: #fff;
border: 1px solid #ed1c24;
outline: none;
}
#username { background-position: 10px 10px !important }
#contentz form input[type=”submit”] {
background: rgb(254,231,154);
background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fee79a’, endColorstr=’#fec151′,GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
border: 1px solid #D69E31;
color: #85592e;
cursor: pointer;
font: bold 15px Helvetica, Arial, sans-serif;
height: 35px;
margin: 8px 0 0px 15px;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 120px;
float:right;
}
#contentz form input[type=”submit”]:hover {
background: rgb(254,193,81);
background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fec151′, endColorstr=’#fee79a’,GradientType=0 );
}
#contentz form div a {
color: #004a80;
float: right;
font-size: 12px;
margin: 30px 15px 0 0;
text-decoration: underline;
}
.button {
background: rgb(247,249,250);
background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f7f9fa’, endColorstr=’#f0f0f0′,GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0;
}
.button a:hover {
background-position: 0 -135px;
color: #00aeef;
}
//]]>
</style>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
<div class=”container”>
<section id=”contentz”><form id=”searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY” action=”URL of the Page where the Result is to be shown” >
<input type=”text” placeholder=”Search” id=”username” /><input type=”submit” value=”Search” />
</form></section></div>

Or add it manually

CSS

#contentz {
 width: 400px;
}

#contentz:after,
#contentz:before {
 background: #f9f9f9;
 background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
 background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
 background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
 background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
 background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
 border: 1px solid #c4c6ca;
 content: "";
 display: block;
 height: 100%;
 left: -1px;
 position: absolute;
 width: 100%;
}
#contentz:after {
 -webkit-transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -ms-transform: rotate(2deg);
 -o-transform: rotate(2deg);
 transform: rotate(2deg); content: "";

 top: 0;
 z-index: -1;
}
#contentz:before {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg); content: "";

 -ms-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 transform: rotate(-3deg);
 top: 0;
 z-index: -2;
}
#contentz form { margin: 0 20px; position: relative }
#contentz form input[type="text"] {
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
 -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
 -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
 -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
 box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 background: #EAE7E7;
border: 1px solid #C8C8C8;
color: #777; width: 56%;

font: 13px Helvetica, Arial, sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 10px;
float: left;
}
#contentz form input[type="text"]:focus {
 -webkit-box-shadow: 0 0 2px #ed1c24 inset;
 -moz-box-shadow: 0 0 2px #ed1c24 inset;
 -ms-box-shadow: 0 0 2px #ed1c24 inset;
 -o-box-shadow: 0 0 2px #ed1c24 inset;
 box-shadow: 0 0 2px #ed1c24 inset;
 background-color: #fff;
 border: 1px solid #ed1c24;
 outline: none;
}
#username { background-position: 10px 10px !important }
#contentz form input[type="submit"] {
 background: rgb(254,231,154);
 background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
 background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
 background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
 background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
 background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 -ms-border-radius: 30px;
 -o-border-radius: 30px;
 border-radius: 30px;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
 -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
 -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
 -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
 border: 1px solid #D69E31;
 color: #85592e;
 cursor: pointer;
 font: bold 15px Helvetica, Arial, sans-serif;
 height: 35px;
 margin: 8px 0 0px 15px;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
 width: 120px;
float:right;
}
#contentz form input[type="submit"]:hover {
 background: rgb(254,193,81);
 background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
 background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
 background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
 background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
 background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#contentz form div a {
 color: #004a80;
    float: right;
    font-size: 12px;
    margin: 30px 15px 0 0;
    text-decoration: underline;
}
.button {
 background: rgb(247,249,250);
 background: -moz-linear-gradient(top,  rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
 background: -webkit-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
 background: -o-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
 background: -ms-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
 background: linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
 -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
 -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 -o-border-radius: 0 0 5px 5px;
 -ms-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 border-top: 1px solid #CFD5D9;
 padding: 15px 0;
}
.button a:hover {
 background-position: 0 -135px;
 color: #00aeef;
}

HTML

<div class="container">
<section id="contentz"><form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL of the Page where the Result is to be shown"  >
<input type="text" placeholder="Search" id="username" /><input type="submit" value="Search" />
</form></section></div>

Special thanks to Catalin Rosu for designing these search and login forms . Don’t hesitate to ask any problem you face while adding these search boxes to your blogs

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 .

30 Custom 404 Pages for Blogger

404 page

With Blogger introducing the option for Custom 404 Page for blogs recently, its been a much welcomed feature. A separate page type has also been created to give more control over these 404 pages. This feature is only available for New Blogger Interface nearly marking the end of the Old Interface (Its being officially shelved on 1st April ). Firstly we will be discussing how to use this feature followed by the collection of 30 witty 404 pages designs.

Steps for using these awesome designs on your blog

1. Go to Settings > Search Preferences

2. Under Errors and redirections , Edit the Custom Page Not Found option

3. Now copy the specific code under the images below and then paste it there

Tip: Make sure give your 404 page a witty title as well. Blogger has introduced a new page type specially for the 404 pages known as the Error Page

Go to Template > Edit HTML and paste the following code just after the <head> tag

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>You've ripped a hole in the fabric of the internet. </title>
</b:if>

Feel free to change the title as per your wish

Collection

1.

oops error 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/1.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

2.

there is a problem and somebody is fixing it

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/10.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

3.

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/404.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

4.

page cannot be found

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/11.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

5.

oh no we couldn't find 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/12.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

6.

web page required to apply call 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/13.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

7.

error 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/14.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

8.

{404}

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/15.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

9.

404 page not found because i ate it

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/16.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

10.

404'd file not found , in closing go away

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/17.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

11.

cannot find target server file

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/18.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

12.

404 error ,the page you are looking for does not exist ,go back friend

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/19.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

13.

404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/2.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

14.

page not found

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/20.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

15.

404 error eaten this page

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/21.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

16.

something gone horribly wrong

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/22.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

17.

404 forget it

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/23.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

18.

404 internal server error

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/24.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

19.

file not found trust us we looked everywhere

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/25.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

20.

what the ?

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/26.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

21.

sorry i may have shreaded the power cord

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/27.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

22.

404 page no more kidnapped

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/28.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

23.

truth behind the 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/29.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

24.

404 this is not the web page you are looking forCode:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/3.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

25.

the page

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/4.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

26.

202+202 404

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/5.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

27.

uh oh that page can't be found

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/6.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

28.

we're sorry the page you are looking for cannot be found

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/7.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

29.

404 we the hell are we you feckless lummox

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/8.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

30.

oops, this page cannot be found

Code:

<style type="text/css" >
body {background:white url('http://stylifyyourblog.com/wp-content/uploads/2012/03/9.png')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

.post-body {font-family:salsa;font-size:110%;font-weight:bold;}
h8{font-size:80% !important;}
.spice-email, td {font-size:80% !important;}

Do remember to check the 404 page of SYB and share any other 404 design of your liking via the comments below.

20 awesome WebFonts

font collection

Fonts are a integral part of a website. With industry wide adoption of @font-face ,WebFonts are the biggest thing today. From paid to free ones, nearly ever site has one.This is a showcase of 20 awesome fonts from Google’s WebFont gallery. They are absolutely free to use and also easy to integrate into blogs/websites.

1. Amaranath

2. Arvo

3. Bangers

4. Chewy

5. Coming Soon

6.Copse

7. Damion

8. Droid Serif

9. Kreon

10. Leckerli One

11. Lobster

12. Mate SC

13. Nobile

14. Nova Slim

15. Nunito

16. Open Sans

17. Oswald

18. Pacifico

19. Salsa

20. Volkhov

Any amazing font that I missed ? Feel free to share them in the comments

5 Threaded Comment styles

Threaded comments are awesome but their default styling is just so simple. Modifying it is a very simple and only requires CSS. I am sharing 5 different styles for the comment sections which you can implement easily into your blog. The motivation for this post came from 54BLOGGER post about some nicely designed Comment sections. I tried to convert them so that they looked very similar to the originals.

Note: Before going any further make sure you have Threaded Comments enabled. Refer this article on how to enable them

Update: Blogger has added some code from behind and therefore all the comments avatars with circular images have a bit of problem. To solve it just add the following CSS:

.comments .avatar-image-container img {max-width: 40px !important;}

CSS-Tricks Comment Section Demo

Copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Line25 Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:460px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: white url(http://3.bp.blogspot.com/-UWrv65VFdEI/T0-ZPhajVyI/AAAAAAAAC2I/LdHCRWRXS6g/s1600/light-grid.png);left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 390px;font-family:arial;font-size:10px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background: url(http://4.bp.blogspot.com/-k-2tYLo42yM/T0-ZP7e3UaI/AAAAAAAAC2U/oWRaq6sMLjE/s1600/comments-bg.png);}

Noupe Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: transparent;position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:0px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: transparent ;left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:41px !important;height:40px !important;background: silver;padding: 2px;border-radius:5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;width:42px !important;height:43px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comments .comments-content .datetime {position: relative;right: 0px;top:-15px;font-family:arial;font-size:15px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background:transparent;}

WebDesignerWall Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:10px;background: url(http://2.bp.blogspot.com/-dw-hSAwxrn0/T0-fYPssihI/AAAAAAAAC2g/_TQ8-9FHeBc/s1600/dashed-single.png) no-repeat 4.3em center;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comment-actions:before {content:"21AA";}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: white;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .comment-block {padding: 11px !important;}
.comment-thread ol div.continue {display:none !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: silver;padding: 2px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:43px !important;width:42px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .datetime {position: relative;right: 5px;top: 5px;font-family: arial;font-size: 15px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comment-actions.secondary-text {width:400px !important;}

SYB current Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: #F8F8F8;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: white;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}

Some of these styles require a bit more of work to make them look the exact replica of the original. Did you like them ? I will be sharing more of these in the future.