A few days before I received an E-mail, requesting to create a search bar like our blog. Might be some people see this blog in future not find this type of search bar (due to changed design). So I'm going to share a tutorial on how can you create a search bar like that, which shows and hides by clicking a search button. Have a look:
Check out the demo:
First make sure that you have jQuery in your Blogger template, if you don't have yet then:
- Go to Blogger > Template > Edit HTML
- copy the following line and paste after <head>
<script src='http://code.jquery.com/jquery-2.1.0.min.js'/>Now go to Blogger > Layout > add widget > HTML/Javascript and paste the following code in it.
<div class='be-search'>Save it have a look. If you are good in CSS then you can change it according to your design.
<div class="searchbutton">
</div>
<div class="search-form">
<form action="/search" class="searchform" 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>
</div>
</div>
<style>
.be-search {
position:relative;
padding:10px;
height:50px;
}
.searchbutton {
background: rgba(0, 0, 0, 0.5) url(https://lh6.googleusercontent.com/-0wMp6Usk3X0/U1JPE2CJLvI/AAAAAAAAEwU/PUzS3TEhSOc/s40-no/Search+Icon.png) no-repeat;
border-radius: 5px;
background-position: 5px;
display: block;
height: 50px;
position:relative;
width: 50px;
cursor: pointer;
z-index:5;
font-size: 0 !important;
margin-right: 20px;
}
.searchbutton.active {
background-color:rgba(0, 0, 0, 1);
}
.search-form {
display:none;
position: absolute;
top:100%;
left: 0;
background: #00bfff;
padding: 20px 0;
width:100%;
z-index: 4;
}
.searchbar {
background: transparent;
border-bottom: 1px solid #fff;
border-width: 0 0 2px 0;
width: 500px;
padding: 10px;
font: 400 20px'pt sans', sans-serif;
color: #fff;
margin-left:10px;
}
.searchsubmit {
background: rgba(0, 0, 0, 0.5);
border: none;
outline: none;
cursor:pointer;
color: #fff;
padding: 15px 30px;
text-transform: uppercase;
font: 400 15px'pt sans', sans-serif;
}
</style>
<script>
$(function(){
$('.searchbutton').click(function(){
$(this).toggleClass('active');
$('.search-form').slideToggle();
});
});
</script>
Post A Comment:
0 comments: