Add a Beautiful Search Box to Blogger

Having a search box on your blog is always recommended. Search Boxes are the most essential element of a blog, allowing your visitors to dig and find content. Search boxes help your readers to search for content that you've published on your blog and to easily get that they're looking for. Search boxes also increase your traffic as your readers will find their desirable content easily by using the search widget.Today we're going to share a beautiful search box for your blogger blog, this search box shows an icon and on clicking it the search box opens with a beautiful transition. So, just follow the below steps to add this widget to your blog. Before adding this widget to your blog, use our HTML Editor tool to see how it looks. Go to HTML Editor tool page >> Paste the widget code in it and press the Preview button.

Add a Beautiful Search Box to Blogger

First and foremost log in to your Blogger Account >> Select a Blog >> Go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets. Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
.bgt-search-field {
background-color: transparent;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPekdoJ73mokBQwo5Y0RQbZ7Nh2b80GV3iwFIHxwoucS4Z5F2539ZJFZHhPZliQ8dTCvxNU-nG0CqxYrElOhXZOn9CW2b5H5U2oYmAsWm_dDiQNuQLZKaHrAe4pTGh-tP9G1JvtkNRu5s/s24/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: 2px solid transparent;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 500ms ease, background 500ms ease;
transition: width 500ms ease, background 500ms ease;
width: 0;
color: #000;
font-family: trebect;
font-weight: bold;
}
.bgt-search-field:focus {
background-color: #2aa4cf;
border: 2px solid #2aa4cf;
cursor: text;
outline: 0;
width: 290px;
</style>
<form action='/search' id='search' method='get'>
<input class='bgt-search-field' name='q' placeholder='Search this Website...' title='Click to Search!' type='text'/>
</form>

Hit the Save Button
Congratulations: You've successfully added this search box to your blog.

From Editors Desk

We hope that this article may have helped you in adding a beautiful search box to your blog. Share this widget with your friends and don't forget to subscribe us!

Share This:

Tags:

Widgets

• Prevoius
• Next