How to add Stylish Search Bar on Blogger in 2021: Here is a best way to add this

The Search Box is a basic but essential part of an a website. They are user-friendly and help you increase your website usage. They help your readers navigate your entire blog better.

Every blogspot blogger has a unique custom search box widget that suits their design because, they not only help users find a solution to their problems easily but also add a nice look to your blog.

While Web crawlers like Google can crawl your entire site easily to identify all posts and pages, visitors only have access to the links in front of them. You may have hundreds or more posts/pages for people to read.

You can have a different category, labels, tag, related posts, etc. Featured on each page, but you cannot provide all of your details on a single page. In order for people to find what they are looking for, they need to be able to search all of your content quickly and easily.

Any visitor who falls, they can search for what they want. This allows people to access some of your hidden content that can take a long time to find by clicking countless pages or posts.

The easier it is for people to navigate your entire blog, the more they will stay and visit and as they can switch to another, increasing your rate of decline.

Custom Search Boxes For Blogger

Just adding a Search Bar is not enough, it should always be ready to help customers and reliable according to the theme of your blog. Blogger also provides Officially Simple widget for it, but that doesn't provide the professional, stylish look to your blog, but you can use CSS to Style blogspot official search box widget.

If your old Search box is not working properly and you want to replace it with beautiful one don't worry, just pick up one of the following and follow the steps by step instructions below.

The look of the design is up to you, you can also edit the CSS according to your blog needs.

Benefits of Adding Stylish Search Box

• Add a good look to your website.
• Provide basic benefits to customers.
• Save user time.
• It can be used anywhere such as headgear, side bar, footer etc.
• Stylish Active, hover and focus effects.
• CSS Pure, no image.
• Easy customization from CSS styles.
• Automatically adjust the size.

Style Demo

<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

To add a stylish custom Search Bar in blog, just follow the below steps–

 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  box.

 Step 3.  Configuration: to Change the value="10" for total numbers of posts per page with search. 

e.g– value="10"

 Step 4.  Now click on Save for save the arrangement.

Conclusion:

Are you Like this post? Yes! Please share with Friends in social media.

Now your visitors can navigate your blog easily.

For any issues related to above tutorial and need other styles search box Please Comment Below. Stay connected.