Owl Themes

Hey there guys, I guess this is my first 'how to' guide for bloggers which should be easy to follow and implement. You might have seen the Twenty Eleven theme released by Wordpress during it's third iteration release. You might also have noticed a sweet sliding search box which animatedly expands on being clicked upon and contracts back when moused out. Therefore we can design a similar but more gorgeous search box and add it quite easily to blogspot oriented blogs. 

1. We're gonna design a not so complicated input field in an elliptical shape which retracts a bit and expands on being focused upon while on being blurred it widens just a little bit and comes back to its original state. You can check out how it works in this blog's sidebar.

2. Don't worry, there's no actual designing involved using Photoshop but we shall achieve this using HTML, CSS3 and jQuery only. Let's start with the basic HTML markup.

<form method="get" action="/search" id="search">
     <input name="q" type="text" size="40" class="search1" value="Search..." />
</form>

We've added a simple input box with no button because you'll expect the searcher to hit enter and get their results. Note that we've also declared a class named search1 to which we'll later add CSS.

#search input[type="text"] {
    background: url(http://1.bp.blogspot.com/-hJ8G7WLl1U8/T2xgdl1jK9I/AAAAAAAAAIQ/WBsH0YmWTVE/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font-size: 14px;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    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;
    outline: none;
    }

• There's a small magnifying glass icon depicting the search action with a light grey background.
• A thin border to add a slight contrast.
• Note that we've specified a width of 150px which shall vary on focus & blur.
• Now, the CSS3 part includes a border radius of 25px (-moz and -webkit suffixes are for Firefox and Chrome respectively).
• And a subtle text shadow of just 0.1 opacity.
• Plus a slight box shadow to add some flair.
• Lastly, removing the ugly yellow/blue outline on focusing the search input.

$(document).ready(function(){

$('.search1').focus(function(){
 $(this).stop().animate({width:'140px'}).animate({width:'200px'}, 200);
});

$('.search1').blur(function(){
 $(this).stop().animate({width:'210px'}).animate({width:'150px'}, 200);
}); 

});

<style type="text/css">

#search input[type="text"] {
    background: url(http://1.bp.blogspot.com/-hJ8G7WLl1U8/T2xgdl1jK9I/AAAAAAAAAIQ/WBsH0YmWTVE/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font-family: 'Ropa Sans', sans-serif;
    font-size: 14px;
    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;
    outline: none;
    }

</style>

<form method="get" action="/search" id="search">
     <input name="q" type="text" size="40" class="search1" value="Search..." />
</form> 

1. Go To Blogger > Design > Page Elements
2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,

Copy Below Codes & Past 

Here Are The Steps : 

This Is The View After You Add This Codes