How To Add A Stylish Search Bar With Hover Effect To Blogger ?

About The Widget

This totally awesome widget is used by us also in the top right corner of our blog,It doesn't uses much space,doesn't affects site's loading time,it has an hover effect and is also SEO optimized.In this post I will provide you the tutorial to add this widget to the right sidebar of your blog.

Steps To Add It:-

• Go to Layout tab of your blog's HTML
• Click on Add A Gadget text at the place where you want the widget to appear
• Select HTML/Javascript from the list that appears
• Leave the title empty and add the following code in the content tab

  <style>
      .technopcarea-search {
        height:40px;
        overflow: hidden;
        float:right;
        position:relative;
        top:0;
        right:0;
      }
      .technopcarea-search:after{
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        z-index: 2;
      }
      .technopcarea-search #s {
        background:#555;
        float: right;
        font: normal 11px tahoma;
        padding: 11px 12px 11px 12px;
        width: 80px;
        height:16px;
        color:#fff;
        border:0 none;
        -o-transition: width .7s , color .4s;
        -webkit-transition: width .7s , color .4s;
        -moz-transition: width .7s , color .4s;
        transition: width .7s , color .4s;
      }
      .technopcarea-search #s:focus {
        color:#fff;
        width:150px;
      }
      .technopcarea-search .search-button {
        background:#111;
        cursor: pointer;
        float: right;
        color:#fff;
        height:38px;
        width:40px;
        display: block;
        border:0 none;
        font-family:Oswald;
      }
      .technopcarea-search:hover .search-button, .technopcarea-search:hover #s {
        opacity:1;
        color:#fff;
      } #imp { display:none;}
input {font-family:'Open Sans',sans-serif; }
    </style> <a id='imp' href='http://technopcarea.blogspot.com/'>Get TechnoPcArea</a>
  <div class='technopcarea-search'>
          <form action='/search' id='searchform' method='get'>
            <input class='search-button' type='submit' value='GO'/>
            <input id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Search...&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/>
          </form>
        </div> 

Final Words

This awesome widget is easy to add and it's live demo could be found here at TechnoPcArea,at the top-right corner of this page.It's hover effect is absolutely amazing and even this SEO optimized as it's nofollow and it doesn't uses underscores for url's.