Add 2 Advanced Search Boxes to Blogger

By Zohaib Liaqat - 45 Comments

Few days ago, we discussed about How to Add Google Custom Search Engine to Blogger and today we're going to share 2 Advanced Search Boxes for Blogger. Search boxes are one of the most essential elements of a blog allowing your visitors to search content. It enables readers to search through all of your content and find exactly what they are looking for.

Why is it Important to Add a Search Box? Because your visitors don't have a lot of time to scroll through each and every post you've ever written. So by adding a search box, your visitors can easily search and find the content they're looking for. It is just like an internal search engine for your blog and it will also make your blog user-friendly.

By Default, blogger has its own search box widget but its design is ugly and not attractive. Today in this tutorial we're going to share 2 advanced, clean and attractive search boxes for your blog.

Add an Advanced Search Box to Blogger

First and foremost Log in to your Blogger Account >> Select a Blog >> Click Layout >> Add a Gadget, a popup will appear with the list of gadgets. Select HTML/JavaScript gadget from the list of Gadgets. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it in the widget code area.

Style # 1

<style>
.search-box {
background-color: transparent;
background-image: url(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/s1600/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
margin: 3px 0;
cursor: pointer;
height: 37px;
padding: 0 0 0 34px;
border: 2px solid transparent;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
color: #222;
font-family: Arial;
font-weight: bold;
}
.search-box:focus {
background-color: #FFF;
border: 2px solid #8E8E8E;
border-radius:5px;
cursor: text;
outline: 0;
width: 270px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/>
</form>

Style # 2

<style>
.search-box {
background-color: #2aa4cf;
background-image: url(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/s1600/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
margin: 3px 0;
height: 38px;
width:280px;
padding: 0 0 0 34px;
border: 2px solid transparent;
position: relative;
-webkit-transition: width 500ms ease, background 500ms ease;
transition: width 500ms ease, background 500ms ease;
color: #222;
font-family: helvitica;
font-weight: bold;
}
.search-box:focus {
background-color: #99E4FE;
border: 2px solid #99E4FE;
outline: 0;
width: 280px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/>
</form>

Click Save button and you're done.

We hope this article may have helped you in adding a Search Box to your Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum