Adding A Stylish Search Box in Blogger?:
A search box is a simple yet vital component of every website. They are user-friendly and can help you improve the usability of your website. They make it easier for your viewers to traverse your blog. Every BlogSpot blogger has a distinctive beautiful custom search box widget that matches their template design since they not only help readers discover the answer to their problems more simply but also offer a professional aspect to your blog.
How To Add Stylish Search Box Widget To Blogger?
Step 1. Login to your Blogger account, then go to Layout > click on the 'Add a gadget' link on the left side.
Step 2. Choose HTML/JavaScript from the pop-up window > paste the code inside the empty box.
<style type='text/css'>
#hbz-searchbox {
height: 35px;
margin-left: 0px ;
margin-top: 15px ;
position: relative;
min-width: 300px;
max-width: 810px;
}
.hbz-buttonwrap {
border: 0px ridge grey;
width: 14%;
height: 35px;
display: block;
position: absolute;
top: 0;
right: 0;
color:navy;
background: #00CC00;
cursor: pointer;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.hbz-buttonwrap:hover {
background: powderblue;
}
.hbz-submit {
width: 35px;
height: 35px;
background: transparent;
cursor: pointer;
position: absolute;
right: 50%;
top: 50%;
margin-top: -17.5px;
margin-right: -17.5px;
border: none;
}
.hbz-submit:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
box-sizing: content-box;
}
.hbz-submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
#hbz-input {
height: 35px;
width: 82%;
padding: 0px;
padding-left: 4%;
border: 5px solid #00CC00;
outline: none;
position: absolute;
right: 14%;
box-shadow: inset 0 0px 0px #080808;
background-color: #fff;
color: #000;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
transition: all 0.5s;
}
#hbz-input:hover,
#hbz-input:focus {
box-shadow: inset 0px 0px 0px #000;
}
</style>
<form action='/search' id='hbz-searchbox' method='get'>
<span class='hbz-buttonwrap'><button class='hbz-submit' type='submit' value=''/></span>
<input id='hbz-input' name='q' placeholder='Search...' type='text'/>
<input name='max-results' type='hidden' value='8'/>
</form>
The Advantages of Including a Custom Stylish Search Box
- Improve the appearance of your website.
- Customers should receive fundamental perks.
- Save the user's time.
- Can be used anywhere, such as the header, sidebar, or footer.
- Stylish Effects for active, hover, and focus
- There is no picture, only CSS.
- CSS styles allow for simple customisation.
- Automatic width adjustment