How To Add A Stylish Search Box in Blogger?

search

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: &#39;&#39;;
        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: &#39;&#39;;
        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