Wordpress style search widget for blogger

I don't like WordPress so much but the things i like in WordPress are there style.They are using Css and html in perfect way by which user don't need to edit there blog so much.

Today I will teach you how to add good looking hover effect css search box to blogger.

Preview

To Add This Search Box in your blog follow below steps-

• Go to blogger dashboard.
• Click on layout button.
• Now there Add Gadget.
• Select html/Javascript and paste following code there.

<style>

#search {

}

#search input[type="text"] {

    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;

    border: 1px solid #d1d1d1;

    font: bold 12px Arial,Helvetica,Sans-serif;

    color: #bebebe;

    width: 150px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -webkit-transition: all 0.7s ease 0s;

    -moz-transition: all 0.7s ease 0s;

    -o-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

    }

#search input[type="text"]:focus {

    width: 200px;

    }

</style>

<form method="get" action="/search" id="search">

  <input name="q" type="text" size="40" placeholder="Search..." />

</form><br/>

Comment Your Problems Below