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. 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.
And now for the jQuery magic. For the ones now knowing, jQuery is a Javascript library which includes inbuilt classes and functions which we can directly call with the hellp of CSS selectors to avoid writing raw vanilla JavaScript.
If you don't have the jQuery library linked to your blog, you need to copy the above link before </head> and include the below code.
$(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);
});
});
The above jQuery code is quite self explanatory, when the search box is focused (clicked in) it goes in and out and on being blurred (clicked out) it goes a little bit out and comes back to its normal state. You need to add this code exactly above </head>.
And we're done, the good news is you don't need to add the HTML and CSS3 in your template directly. In the 'layout', go to the sidebar and 'add a widget'. Now select the HTML/JAVASCRIPT widget and paste the below final code. Save it and voilla.
<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>
Alright, I hope you've successfully incorporated the search capsule in your blog. However, if you face any problems, shoot your queries in the comments.
0 comments: