Last night I read an article on CSS-Tricks, I follow Chris Coyer's every tip about design and development. He shared a guest post that showed how different blogs' search form reacts on empty search query. Lastly is post he showed that CSS-Tricks changed its blog's search form that doesn't submits the query until the search form is empty.
Same when I experimented in Blogger, I found that empty search query returns all the recent posts of the blog. So I finally created a search form that works same as CSS-Tricks blog for Blogger. Have a look at demo.
Demo
See the Pen search form inspired by CSS-Tricks by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Instruction
If you do not have jQuery in your template then go to Template > Edit HTML and paste the following code just below <head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>Now go to Layout > Add Widget > HTML/Javascript and add the following code in it and save.
<div class='search-form'>If you didn't get something our comments are open.
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text' x-webkit-speech='true'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
<p class='search-alert'>Search form is empty!
</div>
<style>
.search-form .searchbar{
border:2px solid #000;
padding:10px 5px;
height:20px;
background:#222;
color:#fff;
}
.search-form .searchsubmit{
background:#00cfff;
border:2px solid #00bfff;
color:#fff;
height:43px;
cursor:pointer;
}
.search-alert{
color:#f7f7f7;
padding:10px 10px 10px 30px;
display:none;
margin:5px;
background:#222 url(https://lh3.googleusercontent.com/-uCQ8C_HxYfc/VDULKHiLW4I/AAAAAAAAFlE/cAIFLVqhEVQ/w20-h20-no/Indicate%2Bicon.jpg) no-repeat;
background-position:5px;
}
</style>
<script>
$(function(){
$('.searchblog').submit(function(e){
if($('.search-form .searchbar').val().length==0){
$('.search-form .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();
}
});
});
</script>
Post A Comment:
0 comments: