Top 4 Stylish Search Box Widget To Blogger

The Stylish Search Box Widget is very unique for most blog designs and some might fit your design if properly place in the right location in your blog. The best way to install this widget on your Blogspot blog is to follow every step given in this article.
The main essence of using the Stylish Search Box Widget for Blog is to allow your users to easily search any phrase on your blog and still be able to get that particular content they are searching for. In most cases, a search might result in an error because you placed the Stylish Search Box Widget wrongly.

Top 4 Stylish Search Box Widget To Blogger is a very unique tool needed for you as a blogger to help your users easily search for content on your blog.
 

Benefits of Adding Custom Stylish Search Box

1. Gives your website a good look.
2. It allows your customers to gain more benefits from visiting your website.
3. The Stylish search box help save time also.
4. The Stylish search box can be added to any location on your blogs like the header, sidebar, and the footer
5. The Stylish nature is good with the focus effects.
6. The Stylish search box is designed with real CSS, without any image.
7. The Stylish search box is very easy to customize using the CSS styles provided.
8. This particular Stylish search box is very easy to adjust width automatically.

Search Bars are good for niche blogs, this is because most of your visitors are coming to get just information on that particular niche so it will be very easy to search for any content they want. The main purpose of the search bar on the blog is to assist your visitors.
Some templates come with these search bars but when you want to design your own from scratch or maybe when you don’t have the search bar and you want to add it, you can easily follow the steps in this article.
Read Also: 2 Best Email Subscription Widget for Blogger
You can customize the Stylish search box to fit in with your blog design by editing the CSS. Blogspot has its own official search box which is very simple in nature.

First Search Box

<style type=”text/css”>
#hbz-searchbox {
background-color: #F5F5F5;
border: 1px solid #EDEDED;
padding: 5px;
border-radius: 10px;
margin: 10px auto;
min-width: 238px;
max-width: 288px;
}

#hbz-input {
background-color: #FEFEFE;
border: medium none;
font: 12px/12px “HelveticaNeue”, Helvetica, Arial, sans-serif;
margin-right: 2%;
padding: 4%;
box-shadow: 2px 1px 4px #999999 inset;
border-radius: 9px;
width: 60.33%;
}

#hbz-input:focus {
outline: medium none;
box-shadow: 1px 1px 4px #0D76BE inset;
}

#hbz-submit {
background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;
border-radius: 9px;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px “HelveticaNeue”, Helvetica, Arial, sans-serif;
padding: 4%;
width: 28%;
}

#hbz-submit:hover {
background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;
}
</style>

<form id=”hbz-searchbox” action=”/search” method=”get”>
<input type=”text” id=”hbz-input” name=”q” placeholder=”Type Here…” />
<input type=”hidden” name=”max-results” value=”8″ />
<input id=”hbz-submit” type=”submit” value=”Search” />
</form>

Second Search Box

<style type=”text/css”>
#hbz-searchbox {
min-width: 250px;
margin: 10px auto;
border-radius: 3px;
overflow: hidden;
max-width: 300px;
}

#hbz-input {
width: 59.2%;
padding: 10.5px 4%;
font: bold 15px “lucida sans”, “trebuchet MS”, “Tahoma”;
border: none;
background-color: #EEE;
}

#hbz-input:focus {
outline: none;
background-color: #FFF;
box-shadow: 0 0 2px #333333 inset;
}

#hbz-submit {
overflow: visible;
position: relative;
float: right;
border: none;
padding: 0;
cursor: pointer;
height: 40px;
width: 32.8%;
font: bold 15px/40px “lucida sans”, “trebuchet MS”, “Tahoma”;
color: #FFF;
text-transform: uppercase;
background-color: #D83C3C;
}

#hbz-submit::before {
content: “”;
position: absolute;
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #D83C3C;
top: 12px;
left: -6px;
}

#hbz-submit:focus,
#hbz-submit:active {
background-color: #C42F2F;
outline: none;
}

#hbz-submit:focus::before,
#hbz-submit:active::before {
border-color: transparent #C42F2F;
}

#hbz-submit:hover {
background-color: #E54040;
}

#hbz-submit:hover::before {
border-color: transparent #E54040;
}
</style>

<form id=”hbz-searchbox” action=”/search” method=”get”>
<input type=”text” id=”hbz-input” name=”q” placeholder=”Search…” />
<input type=”hidden” name=”max-results” value=”8″ />
<button id=”hbz-submit” type=”submit”>Search</button>
</form>

How To Add Stylish Search Box Widget To Blogger

For you to be able to install the Search Box Widget To Blogger blog you need to follow the steps I will drop below.
Please make sure you follow the steps carefully to avoid placing the code in the wrong location inside your theme editor.
Step 1
The first thing you need to do is to ‘Log in’ to your Blogger account using your Google account, then locate the ‘Layout’ > and click on the ‘Add a gadget‘ link which is located on the left side.
Step 2
Now after performing the step above you then need to select HTML/JavaScript from the pop-up list on your window > and then paste the code inside the empty box and save.
Step 3
This is the configuration stage so just follow it well without missing a single step.
– First, you need to Change the value=”8″ this is for the total number of posts per page you want to display. Eg value=”12″.
Note: Make sure the max-results value matches your post limit on the homepage.
Step 4
Now you will need to press the Save Button.
Please always remember that for you to be able to display this search box on mobile view for your blog then you need to enable desktop theme on mobile.
Note: The minimum width required for every blog sidebar is 250px
 
With the tutorial above I hope you’ve been able to add the search box to your blog? if you can’t please kindly drop your complaints in the comment section below…