Round Corners Css Search Box To Blogger

This is new style search box.Round corners
with great look.You can keep it top of sidebar
This search box helps to search fast than others.
You can check my earlier post.Add Sleek
Search Box With Social Buttons For Blogger
Its also great style with social buttons. you can
add this to your blog easily. Try it.

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Paste below code.

<style type="text/css">
#searchbox
   {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
    -moz-border-radius: 35px;
    border-radius: 35px;
    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;            
    width: 270px;
    height: 35px;
    padding: 10px;
    
    overflow: hidden;
   }
#search, #submit
        {
            float: left;
        }
        #search
        {padding: 5px 9px;
            height: 23px;
            width: 180px;
            border: 1px solid #a4c3ca;
            font: normal 13px 'trebuchet MS', arial, helvetica;
            background: #f1f1f1;
           -moz-border-radius: 50px 3px 3px 50px;
             border-radius: 50px 3px 3px 50px;
             -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            }
  #submit
  {  background: #6cbb6b;
            background-image: -moz-linear-gradient(#95d788, #6cbb6b);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
            -moz-border-radius: 3px 50px 50px 3px;
            border-radius: 3px 50px 50px 3px;
            border-width: 1px;
            border-style: solid;
            border-color: #7eba7c #578e57 #447d43;
            -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
             box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     
   height: 35px;
   margin: 0 0 0 10px;
   padding: 0;
   width: 60px;
   cursor: pointer;
   font: bold 14px Arial, Helvetica;
   color: #23441e;
   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
  #submit:hover
  {         background: #95d788;
            background-image: -moz-linear-gradient(#6cbb6b, #95d788);
            background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
  } 
#submit:active
  {  
            background: #95d788;
   outline: none;
           -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
  }
#submit::-moz-focus-inner
  {
    border: none;
  }  
  
#search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        } 
</style>
<form id="searchbox" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Type here" />
    <input id="submit" type="submit" value="Search" />
</form>

4. Now save your HTML/Javascript'.

    You are done...