 |
| search |
We have many articles in our blogs and they should be easy to find and access. Yes, we do categorise 'em using labels but that ain't enough. If a visitor wants to find a particular post, it should be available at a click! Today I will teach you how to add a beautiful Search Box to your Blogger blog which will charm your visitors!
Live Demo:
Talk is cheap, show me the code!
Let's get straight to business, here's the code:
<!-- Expand-on-click Search Box by Raj Mehta-->
<style>
#search input{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aVR-p91r7mlUPGYhQPs0S8o8U5fGJ_p6Fdb7Xc2z-n_85fudIzww1O_mYF6_siCTAEQmz0su7zNKaH35YC2LjoFBIjaaoEuGA3w5loSjkcbSb0KpDaL9b9H5v5zJRYf8vmOQQYTZhIE/s20/Search-icon.png) no-repeat 8px 4px #ffffff;
border: 1px solid #d1d1d1;
font: bold 13px Segoe UI, Georgia, serif;
color: #222222;
width: 150px;
padding: 5px 15px 5px 30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 5px;
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.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
#search input:focus {
width: 190px;
outline: none;
border: 1px solid #777777;
}
</style>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search here...' size='40' type='text'/>
</form>
<!-- Code provided to you by Techsperia Blog-->
Code Credits: Jatan Mehta
I've given you what you need. Now simply paste the above code wherever you want the Search Box to appear.
For newbies, I recommed creating an HTML/JavaScript gadget and pasting the above code in there. Visit how to add a gadget/widget to your blog.
0 comments:
Post a Comment