Click On Expend WordPress Style Search Widget For Blogger

Click On Expend Bar WordPress Style Search Widget For Blogger

If You Like Expended Search Box WordPress Styles, We Found It For Your Blog.  

Many People 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 am gonna share with you how to add good looking hover effect css search box into blogger.

Step To Add  WordPress Style Search Widget In Blogger

• 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/>

Save Done
WoW its just Added Under 60 Seconds Check Your Blog Now..