Syntax Highlighting in Blogger using Prettify

Sons-Of-Obsidian Theme PrettifyPrettify is developed by Mike Samuel from Google and is used for displaying code snippets in webpages in a more presentable manner. It is lightweight and gets easily integrated into Blogger. It has four different themes to choose from and also supports C-like and XML-like language’s syntax highlighting . In this tutorial we will be seeing how to implement it in your blog and also checking out some of its options. Lets get Started then

Demo

Video Tutorial

Step by Step Guide

1. Go to Blogger Dashboard and then to Template > Edit HTML

template blogger dashboard

2. Now Search (Use CTRL+F) for </body> and add the following JavaScript just before it ( The Code below is very lengthy , copying it manually would be a bit difficult , Use the Copy to Clipboard option)

//=2&&ch0==='['){parts[i]=caseFoldCharset(p)}else if(ch0!==''){parts[i]=p.replace(/[a-zA-Z]/g,function(ch){var cc=ch.charCodeAt(0);return'['+String.fromCharCode(cc&~32,cc|32)+']'})}}}return parts.join('')}var rewritten=[];for(var i=0,n=regexs.length;i$/i],[PR_ATTRIB_NAME,/^(?!style[s=]|on)[a-z](?:[w:-]*w)?/i],['lang-uq.val',/^=s*([^>'"s]*(?:[^>'"s/]|/(?=s)))/],[PR_PUNCTUATION,/^[=/]+/],['lang-js',/^onw+s*=s*"([^"]+)"/i],['lang-js',/^onw+s*=s*'([^']+)'/i],['lang-js',/^onw+s*=s*([^"'>s]+)/i],['lang-css',/^styles*=s*"([^"]+)"/i],['lang-css',/^styles*=s*'([^']+)'/i],['lang-css',/^styles*=s*([^"'>s]+)/i]]),['in.tag']);registerLangHandler(createSimpleLexer([],[[PR_ATTRIB_VALUE,/^[sS]+/]]),['uq.val']);registerLangHandler(sourceDecorator({'keywords':CPP_KEYWORDS,'hashComments':true,'cStyleComments':true,'types':C_TYPES}),['c','cc','cpp','cxx','cyc','m']);registerLangHandler(sourceDecorator({'keywords':'null,true,false'}),['json']);registerLangHandler(sourceDecorator({'keywords':CSHARP_KEYWORDS,'hashComments':true,'cStyleComments':true,'verbatimStrings':true,'types':C_TYPES}),['cs']);registerLangHandler(sourceDecorator({'keywords':JAVA_KEYWORDS,'cStyleComments':true}),['java']);registerLangHandler(sourceDecorator({'keywords':SH_KEYWORDS,'hashComments':true,'multiLineStrings':true}),['bsh','csh','sh']);registerLangHandler(sourceDecorator({'keywords':PYTHON_KEYWORDS,'hashComments':true,'multiLineStrings':true,'tripleQuotedStrings':true}),['cv','py']);registerLangHandler(sourceDecorator({'keywords':PERL_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['perl','pl','pm']);registerLangHandler(sourceDecorator({'keywords':RUBY_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['rb']);registerLangHandler(sourceDecorator({'keywords':JSCRIPT_KEYWORDS,'cStyleComments':true,'regexLiterals':true}),['js']);registerLangHandler(sourceDecorator({'keywords':COFFEE_KEYWORDS,'hashComments':3,'cStyleComments':true,'multilineStrings':true,'tripleQuotedStrings':true,'regexLiterals':true}),['coffee']);registerLangHandler(createSimpleLexer([],[[PR_STRING,/^[sS]+/]]),['regex']);function applyDecorator(job){var opt_langExtension=job.langExtension;try{var sourceAndSpans=extractSourceSpans(job.sourceNode,job.pre);var source=sourceAndSpans.sourceCode;job.sourceCode=source;job.spans=sourceAndSpans.spans;job.basePos=0;langHandlerForExtension(opt_langExtension,source)(job);recombineTagsAndDecorations(job)}catch(e){if(win['console']){console['log'](e&&e['stack']?e['stack']:e)}}}function prettyPrintOne(sourceCodeHtml,opt_langExtension,opt_numberLines){var container=document.createElement('pre');container.innerHTML=sourceCodeHtml;if(opt_numberLines){numberLines(container,opt_numberLines,true)}var job={langExtension:opt_langExtension,numberLines:opt_numberLines,sourceNode:container,pre:1};applyDecorator(job);return container.innerHTML}function prettyPrint(opt_whenDone){function byTagName(tn){return document.getElementsByTagName(tn)}var codeSegments=[byTagName('pre'),byTagName('code'),byTagName('xmp')];var elements=[];for(var i=0;i

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

Lazy Loading Social Buttons v2

lazy loading share buttons

This is the Version 2 of the Lazy Load Social Share buttons shared previously. It introduces buttons for social networks like LinkedIn , Digg and StumbleUpon . The look has also been pepped up a bit with rounded corners on the buttons. There goal remains the same , to lighten the total page size and fasten the page speed by loading the resources only when they are needed .

Demo

Features 

  • Asynchronous loading of all resources on hover 
  • Minimal CSS for styling the fake buttons
  • Page Size reduction by 300KB+
  • All major social networks like Facebook , Twitter , Google+ , LinkedIn , Digg supported 
  • Currently supports Single Instance per page
  • Hovering bug fixed
  • To add this in your blog you can use the one click Installer

    <table>
    <tr> <td width="100" height="40" ><a href="#" id='twitter-widget' >Tweet</a>
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td> <td width="100" height="40" ><a href="#" id='stumble-widget' >Stumble</a>
    <su:badge layout="2"></su:badge></td> <td height="40" width="100" ><a href="#" id='google-widget' > 1</a>
    <span class='g-plusone' data-size='medium' ></span></td> <td width="100" height="40" ><a href="#" id='facebook-widget' >Like</a>
    <div class='fb-like' data-layout='button_count' data-send='false' >
    </div>
    </td> <td width="100" height="40" ><a href="#" id='digg-widget' >Digg</a>
    <a class="DiggThisButton DiggCompact"></a></td> <td width="100" height="40" ><a href="#" id='linkedin-widget' >Share</a>
    <script type="IN/Share" data-counter="right"></script></td> </tr>
    </table>
    <style type="text/css" >
    //<![CDATA[
    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget { border-radius:5px;color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #linkedin-widget { background: #069; }
    #digg-widget {background:#FDFFB0;color:#716803 !important;}
    #stumble-widget {background:red;}
    #google-widget, .google-widget { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}
    //]]>
    </style>
    <a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a>
    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//apis.google.com/js/plusone.js';
    document.body.appendChild(script);
    };
    element = document.getElementById('stumble-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//platform.stumbleupon.com/1/widgets.js';
    document.body.appendChild(script);
    };
    element = document.getElementById('digg-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//widgets.digg.com/buttons.js";
    document.body.appendChild(script);
    };
    element = document.getElementById('linkedin-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//platform.linkedin.com/in.js";
    document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
    document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
    this.onmouseover = null;
    this.parentNode.removeChild(this);
    script = document.createElement('script');
    script.async = true;
    script.src = '//platform.twitter.com/widgets.js';
    document.body.appendChild(script);
    };
    //]]>
    </script>

    Or you directly add the code below into a HTML/JavaScript Widget

    <table>
    <tr>  <td width="100" ><a href="#" id='twitter-widget' >Tweet</a> 
    <a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td>  <td width="100" ><a href="#" id='stumble-widget' >Stumble</a>    
    <su:badge layout="2"></su:badge></td>  <td width="100" ><a href="#" id='google-widget' > 1</a>    
    <span class='g-plusone' data-size='medium' ></span></td>  <td width="100"  ><a href="#" id='facebook-widget' >Like</a> 
    <div class='fb-like' data-layout='button_count' data-send='false' >
    </div>
    </td>  <td width="100"  ><a href="#" id='digg-widget' >Digg</a> 
    <a class="DiggThisButton DiggCompact"></a></td>  <td width="100"  ><a href="#" id='linkedin-widget' >Share</a> 
    <script type="IN/Share" data-counter="right"></script></td>    </tr>
    </table>
    <style type="text/css" >
    
    .fb-like {display:inline !important;}
    #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget {    border-radius:5px;color: #ffffff !important;    display: inline-block;    line-height: 22px;    text-align: center;    text-decoration: none;width: 55px;}
    #facebook-widget, .facebook-widget { background: #3b5b99; }
    #linkedin-widget { background: #069; }
    #digg-widget {background:#FDFFB0;color:#716803 !important;}
    #stumble-widget {background:red;}
    #google-widget, .google-widget   { background: #dd4b39; }
    #twitter-widget ,.twitter-widget {background: #33ccff;}
    //]]>
    </style>
    
    <script type='text/javascript'>
    //<![CDATA[
    var element, script ;
    element = document.getElementById('google-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//apis.google.com/js/plusone.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('stumble-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.stumbleupon.com/1/widgets.js';
        document.body.appendChild(script);
    };
    element = document.getElementById('digg-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//widgets.digg.com/buttons.js";
        document.body.appendChild(script);
    };
    element = document.getElementById('linkedin-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//platform.linkedin.com/in.js";
        document.body.appendChild(script);
    };
    element = document.getElementById('facebook-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";
        document.body.appendChild(script);
    };
    element = document.getElementById('twitter-widget');
    element.onmouseover = function () {
        this.onmouseover = null;
        this.parentNode.removeChild(this);
        script = document.createElement('script');
        script.async = true;
        script.src = '//platform.twitter.com/widgets.js';
        document.body.appendChild(script);
    };
    //]]>
    </script>
    

    Some Things to Take Care

    You can extend this script for other social sharing buttons like Pinterest ,Delicious, etc

    For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template

    There is scope for improvement here specially for multiple instance on a single page.

    Till the next update feel free to ask any difficulties you face while implementing this via comments

    New Blogger Template : Stylify v2

    stylify template screenshot small

    A new Blogger template named Stylify v2 . It is quite similar to the current design of the blog. The aim was to minimize the use of JavaScript and instead use CSS to meet the needs. It has a simple design and is ultra optimized for Fast Loading (Given that you don’t add 1000 extra widget ! ). The default Blogger Style-sheet has been removed to fasten it up even more. The SEO part is also taken care for with automatic Meta Description facility. Its a uncomplicated template with emphasis on Speed and Style.

    See Demo

    Download

    Full Screenshot

    stylify v2 template screenshot large

    Features


    • Cross browser compatibility 
    • Responsive Design
    • Page Navigation
    • Lazy Loading Share Buttons
    • Its own Related Post widget
    • Stylish commenting system 
    • Attractive Post Title
    • Four column footer
    • Eye-catching Sidebar Design
    • Search Engine Optimized
    • 97% Google Page Speed Score
    • In-built Author Bio Box
    • CSS3 powered Buttons 
    • Breadcrumbs 
    • A fancy Label Widget 
    • Built-in simple Menu
    • Automatic Meta Description for each post 
    • Use of fonts like Salsa and Electrolize




    Configurable Features:


    This template has a lot of customization possibility. Now I will be explaining how to configure some basic features of this template according to your requirements

    1. Menu

    configure page list


    The menu used is the default Blogger menu. When you will Install the template on your blog , you will see a stray text “Pages” written near the Menu. To remove it , Go to Layouts and Click the Edit button of the Pages Widget . Now in the title field remove everything and Save the Widget.

    Extra Note: When you will install the template you will also see a Date above the post title and also the default Blogger sharing buttons . To remove them go to Layouts and edit the Blog Post widget. Untick the Date and Sharing button option and save.

    2. Pagination


    To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this 

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=3;
    var numshowpage=6;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>

    You can change the number values as you like in the above code.
    var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
    var numshowpage=3;→ Changes the number of linking to show in the widget

    configure blog post blogger layout

    Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

    3. Border of Image

    with without border


    There is a additional feature present to add borders around your image  , To add it just add a class=”thumb” in the img tag , as shown below 

    <img class="thumb" src="image.png" />

    4. Using the CSS3 Button


    css3 button


    To make a link into a button , just add the class=”buttons button” to it , as shown 

    <a href="URL" class="buttons button" >A Link<a/>

    5. The Author Bio Box


    author box code




    Under each post a author box is present with your name and some demo text . To change that text go to Edit HTML and tick the Expand Widget Preview box . After that search for Author Bio Box and change the text as per your wish. You can also replace the placeholder image with your own

    6. Label Style


    configure label blogger layouts




    To enable the Label style as see in the demo , go to the Layout and Click the Edit button of the Categories widget. In it much sure to tick Display as Cloud 

    See Demo

    Download


    Whats your opinion about the template ? In case you face any problem or like to suggest any improvement feel free to do so via comments

    CSS Mega Drop Down Menu for Blogger

    css mega drop down menu

    A CSS powered Drop Down Menu for Blogger. Mega menu’s are being used extensively these days and are really useful for displaying a huge amount of content without cluttering your layout.  The real credit for this menu goes to Guillaume Marty (You can check out his Portfolio and the Commercial version of this menu ). I have just fixed some CSS related conflicts that were happening due to the default Stylesheet that is included by Blogger. Enjoy !

    Demo

    Screenshot

    menu screenshot

    Add it in your blog

    Using the One-Click Install

    <div id="menu">

    <li><a href="#" class="drop">Home</a><!– Begin Home Item –>

    <div class="dropdown_2columns"><!– Begin 2 columns container –>

    <div class="col_2">

    <h2>Welcome !</h2>

    </div>

    <div class="col_2">

    <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>

    <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>

    </div>

    <div class="col_2">

    <h2>Cross Browser Support</h2>

    </div>

    <div class="col_1">

    <img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />

    </div>

    <div class="col_1">

    <p>This mega menu has been tested in all major browsers.</p>

    </div>

    </div><!– End 2 columns container –>

    </li><!– End Home Item –>

    <li><a href="#" class="drop">5 Columns</a><!– Begin 5 columns Item –>

    <div class="dropdown_5columns"><!– Begin 5 columns container –>

    <div class="col_5">

    <h2>This is an example of a large container with 5 columns</h2>

    </div>

    <div class="col_1">

    <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>

    </div>

    <div class="col_1">

    <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>

    </div>

    <div class="col_1">

    <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>

    </div>

    <div class="col_1">

    <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>

    </div>

    <div class="col_1">

    <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>

    </div>

    <div class="col_5">

    <h2>Here is some content with side images</h2>

    </div>

    <div class="col_3">

    <img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />

    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more…</a></p>

    <img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />

    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more…</a></p>

    </div>

    <div class="col_2">

    <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

    </div>

    </div><!– End 5 columns container –>

    </li><!– End 5 columns Item –>

    <li><a href="#" class="drop">4 Columns</a><!– Begin 4 columns Item –>

    <div class="dropdown_4columns"><!– Begin 4 columns container –>

    <div class="col_4">

    <h2>This is a heading title</h2>

    </div>

    <div class="col_1">

    <h3>Some Links</h3>

    <ul>

    <li><a href="#">ThemeForest</a></li>

    <li><a href="#">GraphicRiver</a></li>

    <li><a href="#">ActiveDen</a></li>

    <li><a href="#">VideoHive</a></li>

    <li><a href="#">3DOcean</a></li>

    </ul>

    </div>

    <div class="col_1">

    <h3>Useful Links</h3>

    <ul>

    <li><a href="#">NetTuts</a></li>

    <li><a href="#">VectorTuts</a></li>

    <li><a href="#">PsdTuts</a></li>

    <li><a href="#">PhotoTuts</a></li>

    <li><a href="#">ActiveTuts</a></li>

    </ul>

    </div>

    <div class="col_1">

    <h3>Other Stuff</h3>

    <ul>

    <li><a href="#">FreelanceSwitch</a></li>

    <li><a href="#">Creattica</a></li>

    <li><a href="#">WorkAwesome</a></li>

    <li><a href="#">Mac Apps</a></li>

    <li><a href="#">Web Apps</a></li>

    </ul>

    </div>

    <div class="col_1">

    <h3>Misc</h3>

    <ul>

    <li><a href="#">Design</a></li>

    <li><a href="#">Logo</a></li>

    <li><a href="#">Flash</a></li>

    <li><a href="#">Illustration</a></li>

    <li><a href="#">More…</a></li>

    </ul>

    </div>

    </div><!– End 4 columns container –>

    </li><!– End 4 columns Item –>

    <li class="menu_right"><a href="#" class="drop">1 Column</a>

    <div class="dropdown_1column align_right">

    <div class="col_1">

    <ul class="simple">

    <li><a href="#">FreelanceSwitch</a></li>

    <li><a href="#">Creattica</a></li>

    <li><a href="#">WorkAwesome</a></li>

    <li><a href="#">Mac Apps</a></li>

    <li><a href="#">Web Apps</a></li>

    <li><a href="#">NetTuts</a></li>

    <li><a href="#">VectorTuts</a></li>

    <li><a href="#">PsdTuts</a></li>

    <li><a href="#">PhotoTuts</a></li>

    <li><a href="#">ActiveTuts</a></li>

    <li><a href="#">Design</a></li>

    <li><a href="#">Logo</a></li>

    <li><a href="#">Flash</a></li>

    <li><a href="#">Illustration</a></li>

    <li><a href="#">More…</a></li>

    </ul>

    </div>

    </div>

    </li>

    <li class="menu_right"><a href="#" class="drop">3 columns</a><!– Begin 3 columns Item –>

    <div class="dropdown_3columns align_right"><!– Begin 3 columns container –>

    <div class="col_3">

    <h2>Lists in Boxes</h2>

    </div>

    <div class="col_1">

    <ul class="greybox">

    <li><a href="#">FreelanceSwitch</a></li>

    <li><a href="#">Creattica</a></li>

    <li><a href="#">WorkAwesome</a></li>

    <li><a href="#">Mac Apps</a></li>

    <li><a href="#">Web Apps</a></li>

    </ul>

    </div>

    <div class="col_1">

    <ul class="greybox">

    <li><a href="#">ThemeForest</a></li>

    <li><a href="#">GraphicRiver</a></li>

    <li><a href="#">ActiveDen</a></li>

    <li><a href="#">VideoHive</a></li>

    <li><a href="#">3DOcean</a></li>

    </ul>

    </div>

    <div class="col_1">

    <ul class="greybox">

    <li><a href="#">Design</a></li>

    <li><a href="#">Logo</a></li>

    <li><a href="#">Flash</a></li>

    <li><a href="#">Illustration</a></li>

    <li><a href="#">More…</a></li>

    </ul>

    </div>

    <div class="col_3">

    <h2>Here are some image examples</h2>

    </div>

    <div class="col_3">

    <img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />

    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more…</a></p>

    <img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />

    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more…</a></p>

    </div>

    </div><!– End 3 columns container –>

    </li><!– End 3 columns Item –>

    </div>

    <style type="text/css">
    /*<![CDATA[*/body, ul, li {
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
    }

    /* Navigation Bar */

    #menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    /* Rounded Corners */

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* Background color and gradients */

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    /* Borders */

    border: 1px solid #002232;

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
    }

    #menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    }

    #menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    }

    #menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
    }

    #menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu li .drop {
    padding-right:21px;
    background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
    }
    #menu li:hover .drop {
    background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
    }

    /* Drop Down */

    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_4columns,
    .dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute !important;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
    }

    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 420px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 700px;}

    #menu li:hover .dropdown_1column,
    #menu li:hover .dropdown_2columns,
    #menu li:hover .dropdown_3columns,
    #menu li:hover .dropdown_4columns,
    #menu li:hover .dropdown_5columns {
    left:-1px ;
    z-index:444 !important;
    top:auto;
    }

    /* Columns */

    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    }
    .col_1 {width:130px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    .col_5 {width:690px;}

    /* Right alignment */

    #menu .menu_right {
    float:right !important;
    margin-right:0px;
    }
    #menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
    }
    #menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
    }

    /* Drop Down Content Stylings */

    #menu p, #menu h2, #menu h3, #menu div li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
    }
    #menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
    }
    #menu p {
    line-height:18px;
    margin:0 0 10px 0;
    }

    #menu li:hover div a {
    font-size:12px;
    color:#015b86;
    }
    #menu li:hover div a:hover {
    color:#029feb;
    }
    .strong {
    font-weight:bold;
    }
    .italic {
    font-style:italic;
    }
    .imgshadow {
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
    }
    .img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
    }
    #menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;

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

    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
    }
    #menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
    }
    #menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
    }
    #menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
    }
    #menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;

    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    #menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
    }

    .tabs-inner .widget li a {
    padding: 1px ;
    display:block !important;
    border: 1px solid transparent !important ;
    }

    /*]]>*/
    </style>
    <a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

    or Directly add the Code

    layout blogger dashboard

    Go to Layout and Add a HTML/JavaScript widget in the Cross Column Region . Paste the code from below in the gadget

    Learn how to copy this code in one-click in FAQ

    <div id="menu">
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    <div class="col_2">
    <h2>Welcome !</h2>
    </div>
    <div class="col_2">
    <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
    <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
    </div>
    <div class="col_2">
    <h2>Cross Browser Support</h2>
    </div>
    <div class="col_1">
    <img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
    </div>
    <div class="col_1">
    <p>This mega menu has been tested in all major browsers.</p>
    </div>
    </div><!-- End 2 columns container -->
    </li><!-- End Home Item -->
    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
    <div class="dropdown_5columns"><!-- Begin 5 columns container -->
    <div class="col_5">
    <h2>This is an example of a large container with 5 columns</h2>
    </div>
    <div class="col_1">
    <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
    </div>
    <div class="col_1">
    <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
    </div>
    <div class="col_1">
    <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
    </div>
    <div class="col_1">
    <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
    </div>
    <div class="col_1">
    <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
    </div>
    <div class="col_5">
    <h2>Here is some content with side images</h2>
    </div>
    <div class="col_3">
    <img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
    <img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
    </div>
    <div class="col_2">
    <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
    </div>
    </div><!-- End 5 columns container -->
    </li><!-- End 5 columns Item -->
    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
    <div class="dropdown_4columns"><!-- Begin 4 columns container -->
    <div class="col_4">
    <h2>This is a heading title</h2>
    </div>
    <div class="col_1">
    <h3>Some Links</h3>
    <ul>
    <li><a href="#">ThemeForest</a></li>
    <li><a href="#">GraphicRiver</a></li>
    <li><a href="#">ActiveDen</a></li>
    <li><a href="#">VideoHive</a></li>
    <li><a href="#">3DOcean</a></li>
    </ul>   
    </div>
    <div class="col_1">
    <h3>Useful Links</h3>
    <ul>
    <li><a href="#">NetTuts</a></li>
    <li><a href="#">VectorTuts</a></li>
    <li><a href="#">PsdTuts</a></li>
    <li><a href="#">PhotoTuts</a></li>
    <li><a href="#">ActiveTuts</a></li>
    </ul>   
    </div>
    <div class="col_1">
    <h3>Other Stuff</h3>
    <ul>
    <li><a href="#">FreelanceSwitch</a></li>
    <li><a href="#">Creattica</a></li>
    <li><a href="#">WorkAwesome</a></li>
    <li><a href="#">Mac Apps</a></li>
    <li><a href="#">Web Apps</a></li>
    </ul>   
    </div>
    <div class="col_1">
    <h3>Misc</h3>
    <ul>
    <li><a href="#">Design</a></li>
    <li><a href="#">Logo</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">More...</a></li>
    </ul>   
    </div>
    </div><!-- End 4 columns container -->
    </li><!-- End 4 columns Item -->
    <li class="menu_right"><a href="#" class="drop">1 Column</a>
    <div class="dropdown_1column align_right">
    <div class="col_1">
    <ul class="simple">
    <li><a href="#">FreelanceSwitch</a></li>
    <li><a href="#">Creattica</a></li>
    <li><a href="#">WorkAwesome</a></li>
    <li><a href="#">Mac Apps</a></li>
    <li><a href="#">Web Apps</a></li>
    <li><a href="#">NetTuts</a></li>
    <li><a href="#">VectorTuts</a></li>
    <li><a href="#">PsdTuts</a></li>
    <li><a href="#">PhotoTuts</a></li>
    <li><a href="#">ActiveTuts</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#">Logo</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">More...</a></li>
    </ul>   
    </div>
    </div>
    </li>
    <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
    <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
    <div class="col_3">
    <h2>Lists in Boxes</h2>
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="#">FreelanceSwitch</a></li>
    <li><a href="#">Creattica</a></li>
    <li><a href="#">WorkAwesome</a></li>
    <li><a href="#">Mac Apps</a></li>
    <li><a href="#">Web Apps</a></li>
    </ul>   
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="#">ThemeForest</a></li>
    <li><a href="#">GraphicRiver</a></li>
    <li><a href="#">ActiveDen</a></li>
    <li><a href="#">VideoHive</a></li>
    <li><a href="#">3DOcean</a></li>
    </ul>   
    </div>
    <div class="col_1">
    <ul class="greybox">
    <li><a href="#">Design</a></li>
    <li><a href="#">Logo</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">Illustration</a></li>
    <li><a href="#">More...</a></li>
    </ul>   
    </div>
    <div class="col_3">
    <h2>Here are some image examples</h2>
    </div>
    <div class="col_3">
    <img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
    <img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
    <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
    </div>
    </div><!-- End 3 columns container -->
    </li><!-- End 3 columns Item -->
    </div>
    
    <style type="text/css">
    body, ul, li {
     font-size:14px;
     font-family:Arial, Helvetica, sans-serif;
     line-height:21px;
     text-align:left;
    }
    
    /* Navigation Bar */
    
    #menu {
     list-style:none;
     width:940px;
     margin:30px auto 0px auto;
     height:43px;
     padding:0px 20px 0px 20px;
    
     /* Rounded Corners */
    
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
    
     /* Background color and gradients */
    
     background: #014464;
     background: -moz-linear-gradient(top, #0272a7, #013953);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    
     /* Borders */
    
     border: 1px solid #002232;
    
     -moz-box-shadow:inset 0px 0px 1px #edf9ff;
     -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
     box-shadow:inset 0px 0px 1px #edf9ff;
    }
    
    #menu li {
     float:left;
     text-align:center;
     position:relative;
     padding: 4px 10px 4px 10px;
     margin-right:30px;
     margin-top:7px;
     border:none;
    }
    
    #menu li:hover {
     border: 1px solid #777777;
     padding: 4px 9px 4px 9px;
    
     /* Background color and gradients */
    
     background: #F4F4F4;
     background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    
     /* Rounded corners */
    
     -moz-border-radius: 5px 5px 0px 0px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
    }
    
    #menu li a {
     font-family:Arial, Helvetica, sans-serif;
     font-size:14px;
     color: #EEEEEE;
     display:block;
     outline:0;
     text-decoration:none;
     text-shadow: 1px 1px 1px #000;
    }
    
    #menu li:hover a {
     color:#161616;
     text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu li .drop {
     padding-right:21px;
     background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
    }
    #menu li:hover .drop {
     background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
    }
    
    /* Drop Down */
    
    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_4columns,
    .dropdown_5columns {
     margin:4px auto;
     float:left;
     position:absolute !important;
     left:-999em; /* Hides the drop down */
     text-align:left;
     padding:10px 5px 10px 5px;
     border:1px solid #777777;
     border-top:none;
    
     /* Gradient background */
     background:#F4F4F4;
     background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    
     /* Rounded Corners */
     -moz-border-radius: 0px 5px 5px 5px;
     -webkit-border-radius: 0px 5px 5px 5px;
     border-radius: 0px 5px 5px 5px;
    }
    
    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 420px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 700px;}
    
    #menu li:hover .dropdown_1column,
    #menu li:hover .dropdown_2columns,
    #menu li:hover .dropdown_3columns,
    #menu li:hover .dropdown_4columns,
    #menu li:hover .dropdown_5columns {
     left:-1px ;
    z-index:444 !important;
        top:auto;
    }
    
    /* Columns */
    
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5 {
     display:inline;
     float: left;
     position: relative;
     margin-left: 5px;
     margin-right: 5px;
    }
    .col_1 {width:130px;}
    .col_2 {width:270px;}
    .col_3 {width:410px;}
    .col_4 {width:550px;}
    .col_5 {width:690px;}
    
    /* Right alignment */
    
    #menu .menu_right {
     float:right !important;
     margin-right:0px;
    }
    #menu li .align_right {
     /* Rounded Corners */
     -moz-border-radius: 5px 0px 5px 5px;
        -webkit-border-radius: 5px 0px 5px 5px;
        border-radius: 5px 0px 5px 5px;
    }
    #menu li:hover .align_right {
     left:auto;
     right:-1px;
     top:auto;
    }
    
    /* Drop Down Content Stylings */
    
    #menu p, #menu h2, #menu h3, #menu div li {
     font-family:Arial, Helvetica, sans-serif;
     line-height:21px;
     font-size:12px;
     text-align:left;
     text-shadow: 1px 1px 1px #FFFFFF;
    }
    #menu h2 {
     font-size:21px;
     font-weight:400;
     letter-spacing:-1px;
     margin:7px 0 14px 0;
     padding-bottom:14px;
     border-bottom:1px solid #666666;
    }
    #menu h3 {
     font-size:14px;
     margin:7px 0 14px 0;
     padding-bottom:7px;
     border-bottom:1px solid #888888;
    }
    #menu p {
     line-height:18px;
     margin:0 0 10px 0;
    }
    
    #menu li:hover div a {
     font-size:12px;
     color:#015b86;
    }
    #menu li:hover div a:hover {
     color:#029feb;
    }
    .strong {
     font-weight:bold;
    }
    .italic {
     font-style:italic;
    }
    .imgshadow {
     background:#FFFFFF;
     padding:4px;
     border:1px solid #777777;
     margin-top:5px;
     -moz-box-shadow:0px 0px 5px #666666;
     -webkit-box-shadow:0px 0px 5px #666666;
     box-shadow:0px 0px 5px #666666;
    }
    .img_left { /* Image sticks to the left */
     width:auto;
     float:left;
     margin:5px 15px 5px 5px;
    }
    #menu li .black_box {
     background-color:#333333;
     color: #eeeeee;
     text-shadow: 1px 1px 1px #000;
     padding:4px 6px 4px 6px;
    
     /* Rounded Corners */
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
    
     /* Shadow */
     -webkit-box-shadow:inset 0 0 3px #000000;
     -moz-box-shadow:inset 0 0 3px #000000;
     box-shadow:inset 0 0 3px #000000;
    }
    #menu li ul {
     list-style:none;
     padding:0;
     margin:0 0 12px 0;
    }
    #menu li ul li {
     font-size:12px;
     line-height:24px;
     position:relative;
     text-shadow: 1px 1px 1px #ffffff;
     padding:0;
     margin:0;
     float:none;
     text-align:left;
     width:130px;
    }
    #menu li ul li:hover {
     background:none;
     border:none;
     padding:0;
     margin:0;
    }
    #menu li .greybox li {
     background:#F4F4F4;
     border:1px solid #bbbbbb;
     margin:0px 0px 4px 0px;
     padding:4px 6px 4px 6px;
     width:116px;
    
     /* Rounded Corners */
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
    }
    #menu li .greybox li:hover {
     background:#ffffff;
     border:1px solid #aaaaaa;
     padding:4px 6px 4px 6px;
     margin:0px 0px 4px 0px;
    }
    
    .tabs-inner .widget li a {
    padding: 1px ;
    display:block !important;
    border: 1px solid  transparent !important ;
    }
    
    
    </style>
    <a href="http://www.stylifyyourblog.com" title="Stylify Your Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

    Feel free to ask if you face any problems.

    Related Post Widget for Blogger using nRelate

    you might like

    A Related Post widget for Blogger using nRelate . The best thing about nrelate widget over other similar type of recommendation widgets is the sheer number of customization options available at a buttons click. The options range from changing the appearance to including experts from posts. It also includes a feature to include posts from its 35000+ network of sites related to your content. The feature that takes the limelight is the ability to earn money !

    Yes you have read it write , it allows you to earn money by recommending advertisers content in your widget and you can receive the payment via PayPal . Here is a list of all the features of the nRelate Related Post widget

    Demo
    Features

  • Display Recommendations in form of Text or with Thumbnails 
  • Placeholder images for imageless posts
  • Six different Layout styles to choose from like Polaroid , ToonBarn , Trendland
  • Number of Posts to display
  • Select the Relevancy of posts shown to the current post !
  • Show experts from the post itself
  • To display/Not display nRelate logo 
  • Display stuff from your other blogs 
  • How to Integrate into Blogger 
    Video Tutorial



    Steps
    1. Go to https://partners.nrelate.com/ and Create an account if you have not created one yet

    nrelate login

    2. After signing in , In the Dashboard go to Install > Blogger

    nrelate install selection

    3. Enter your Blog address and click the Submit button

    your blog

    4. Now you will be asked where to show the widget , I suggest selecting the Post Only option.

    post only homepage all sections

    5. Now you will be asked to add the code into your Blog , just click the Add to Blogger button

    add to blogger page

    6. After selecting the correct blog , click the Add Widget button

    Add Widget

    7. Check your blog to see the widget. Normally it takes around 2 hours for it showup. In case it doesn’t show feel free to nrelate via Twitter , they are super responsive.

    Some Other Settings

    To Remove the nRelate Logo

    In the nRelate Dashboard , Go to Manage Settings > Blogger , under the Layout Settings uncheck the box asking to display the nrelate logo and you are good to go.

    layout settings

    To change the Display layout

    In the Main Settings , select from the drop-down list of Styles. ( Polaroid and Toonbarn are my favorites )

    nrelate styles

    You can fiddle with all the other settings as well if you like . Feel free to ask if you hit a problem .

    How to Integrate Google Custom Search into your Blog

    searcherGoogle Custom Search is the best way to let your readers search your blog. It is just like giving the readers the power of Google search just this time the scope is limited to your blog alone. It is one of the most handy tool for each and every blogger out there. Its easy to setup and starts working the moment you put it in your blog. In this tutorial we will see how to embed a Google Custom Search Box into your blog and some tips related to it.

    Demo

    Some Thing You might want to Know

    When a Blogger blog is created , a Custom Search Engine dedicated to it is also created with it. So technically speaking you might even not need to make your own Google CS Engine ( To Enable This just add a Search gadget from the Layouts ) . But wait here is the thing , there are some limitation attached to this search engine. Here is list of few

  • Can’t access data related to search queries
  • No way to monetize the searches
  • Can’t include the images from pages besides them
  • Sometimes results are not what you really want
  • With this said , it is would be far better choice to go with a Google Custom Search Engine rather than the inbuilt Search Engine for your Blogger blog

    Well there is another inbuilt way to search your blog , using the query parameter on the /search directory of your blog . To add a search box of this type ,add the following code in a HTML/JavaScript Widget.

    <form  action="/search"> 
         <input id="q" style="width:150px;" name="q" size="70" type="text" /> 
      <input value="Search" name="sa" type="submit"/> 
    </form> 

    The results are more graphical but the way it functions is a bit unknown and the results sometimes can be a little off-target. No data related to queries is available

    Now as we have seen how any other alternative is as good as Google Custom Search ,lets see how to implement it in your blog.

    Why is GCS Good ?

    Well some features that make it good awesome

  • Hourly Statistics about search queries
  • 5+ Styles to choose from
  • 6 different ways to show your results like Two Column , Two Page ,etc
  • Monetize your Search Traffic by connecting with AdSense
  • Options to link up with Google Analytics
  • Instant removal and Indexing options
  • Power to read your Readers brain ! (AutoCompletions)  
  • Fire specific results when particular URLs are searched 
  • Options to index all Images on your blog and make them searchable 
  • Result Sorting according to Relevance 
  • With so many features you might be asking whether its really free ….. Yes its all free to grab. There is a Business version available too but as thats for businesses !

    Finally How To put it in your Blog !

    Follow the Steps below and you will have running on your blog in no time

    Video Tutorial

    Steps

    1. Go to http://www.google.com/cse/manage/all and Click the New Search Engine Option in the Left

    Google custom search create
    2. Now Enter the details as asked and click the Next Button

    custom search first step of creation
    3. Select the style of the comment and click Next

    search second step look feel
    4. Copy the Code provided

    custom search copy code

    5. Add it into a HTML/JavaScript Gadget and Hit the Save Button

    add code in Blogger

    6. The Custom search has been setup for you and your blog is ready to be searched !

    This is the most basic version of the Google Custom Search , now lets get started with some customizing

    Note: For every change you make , 90% times you will have to put a new code in place , so I suggest you make all the changes and then only add the new code in your blog

    Getting the images to be Indexed

    Go to the Basics Tab and under the Search Preferences check the Enable Image Search option and Save Changes

    custom search image index option
    Monetize the stuff
    You can simply link your AdSense account with the Custom Search so that all the Ads that appear in the Search Results become a another revenue resource for you

    custom search integrate AdSense
    Autocompletions
    This is one of the most talked about feature out there . You predicting your readers mind ! If you enable it make sure that there is a free quota of 100 queries a day, beyond this they will fail

    auto completion in Google Custom Search
    How It Looks and the Layout
    The layout option and style of the search box can be easily changed by going in the Look and feel section
    look and feel change option in custom search dashboard
    Google Analytics

    Link up your Analytics account to see all your site search data in your GA Dashboard
    analytics linkup search
    Indexing

    In this section you have the ability to add or remove URLs from your Search Engine in a instant

    indexing instant removal search

    Promotions


    The ability to show a result which is define by you when a reader enters a specific query

    promotions

    Hope you found the tutorial useful , feel free to ask any question or share your thoughts on it.

    Shareaholic Share Buttons for Blogger

    sexy bookmarks

    A simple Share Buttons Widget with Counts for Blogger. A one click instant install with no hassles of modifying the Template to integrate into the blog. Shareaholic Sexy Bookmarks include buttons from Facebook , Twitter , LinkedIn , Delicious , StumbleUpon , Google Bookmarks and a Email Send button with each one of them showing the number of times it has been shared previously. In this tutorial we will see how to embed it in your blog.

    Demo

    Video Tutorial

    Steps

    1. Go to http://www.shareaholic.com/ and Click the Sign Up button

    shareaholic main page

    2. Sign Up with either the Facebook Connect option or using your Twitter account option . You can also sign up manually too. 
    shareholic create account
    3. After signing up click the Website & Blog Tools Option 
    blog tools shareaholic
    4. Now select the Sexy Bookmarks Tab and then click the Next button
    sexy bookmarks shareaholic
    5. Now choose Blogger as the platform and Click the button to Install
    choose platform and install
    6. Now Add the Widget and check your blog to see it in action. 
    shareaholic add widget to blogger
    You can similarly install the Classic Bookmarks and Sassy Bookmarks too