Share Beautiful Search Box For Blogger

The Search Box is a basic but essential part of a website. They are user convenient and help you increase the usability of your website. They help your readers navigate throughout your blog more efficiently. You will find that every blogger has a different style custom search box widget that matches their template design because they not only make it easier for users to find a solution to their problem but also Add a professional look to your blog.

Share Beautiful Search Box For Blogger

While web crawlers like Google can easily crawl your entire site to index all your posts and pages, visitors only have access to links in front of them. You can have hundreds of posts/pages or more for people to read. You can have a different category, label, tag, related posts, etc listed on each of your pages, but you can’t provide all your data on one page. For people to find what they’re looking for, they need to be able to search through your entire content quickly and easily.

Whatever page the visitor visits, they can search for what they want. This allows people to gain access to some of your hidden content that would take longer to find by clicking through countless pages or posts. The easier it is for people to navigate your entire blog, the more likely they are to stay and visit again because they can move to another page, increasing your bounce rate.

Custom Search Box For Blogger

Just adding a Search Bar is not enough, it should always be ready to help customers and match the theme of your blog. Blogger also offers a Search widget for bloggers, but that doesn’t provide a stylish, professional look to your blog. If your old Search box is not working correctly and you want to replace it with a beautiful one, don’t worry, just choose one of the following and follow the step-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 a Custom Style Search Box

  • Add a professional look to your website. 
  • Provide basic benefits to customers. 
  • Save time using. 
  • Can be applied anywhere like in header, sidebar, footer, etc 
  • Stylish effects, hover, and focus. 
  • Pure CSS, no images. 
  • Easily customizable from CSS styles. 
  • Automatic width adjustment.

Here are 5 Search Boxes for your blogger.

STYLE 1


Share Beautiful Search Box For Blogger

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

STYLE 2

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


STYLE 3

<style type=”text/css”>
    #hbz-searchbox {
        background: transparent linear-gradient(#2C2C2C, #111);
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 4px;
        padding: 10px;
        z-index: 1;
        display: block;
        margin: 10px auto;
        min-width: 228px;
        max-width: 278px;
    }
   
    #hbz-input,
    .hbz-submit {
        box-shadow: 0 2px #000;
        font-family: ‘Cabin’, helvetica, arial, sans-serif !important;
        margin: 0px;
        padding: 0px;
    }
   
    #hbz-input {
        background: linear-gradient(#333, #222);
        border: 1px solid #444;
        color: #888;
        display: block;
        float: left;
        font-size: 13px;
        height: 30px;
        padding-left: 4%;
        padding-right: 4%;
        width: 60.2%;
        border-radius: 3px 0px 0px 3px;
    }
   
    #hbz-input:focus {
        animation: glow 800ms ease-out infinite alternate;
        border-color: #393;
        color: #efe;
        outline: none;
    }
   
    .hbz-submit {
        background: linear-gradient(#333, #222);
        box-sizing: content-box;
        border: 1px solid #444;
        border-left-color: #000;
        color: #fff;
        display: block;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        position: relative;
        width: 30%;
        cursor: pointer;
        border-radius: 0px 3px 3px 0px;
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        background: linear-gradient(#393939, #292929);
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        color: #5f5;
        outline: none;
    }
   
    .hbz-submit:active {
        top: 1px;
    }
   
    @keyframes glow {
        0% {
            border-color: #393;
            box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
        }
        100% {
            border-color: #6f6;
            box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</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 class=”hbz-submit” type=”submit”>Search</button>
</form> 

STYLE 4

<style type=”text/css”>
    #hbz-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
   
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #009bff;
        cursor: pointer;
        border-bottom: 5px solid #0276c1;
    }
   
    .hbz-buttonwrap:hover {
        border-bottom: 5px solid #bc490a;
        background: #d75813;
    }
   
    .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: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    }
   
    #hbz-input:focus,
    #hbz-input:active {
        background-color: #fff;
    }
</style>

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

STYLE 5

<style type=”text/css”>
    #hbz-searchbox {
        height: 35px;
        margin: 10px auto;
        position: relative;
        min-width: 250px;
        max-width: 300px;
    }
   
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #444;
        cursor: pointer;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
   
    .hbz-buttonwrap:hover {
        background: #1a1a1a;
    }
   
    .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: none;
        outline: none;
        position: absolute;
        right: 14%;
        box-shadow: inset 0 2px 2px #080808;
        background-color: #444444;
        color: #fff;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        transition: all 0.5s;
    }
   
    #hbz-input:hover,
    #hbz-input:focus {
        box-shadow: inset 1px 1px 10px #000;
    }
</style>

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

USER MANUAL

STEP 1: Login your blogger account, Go to  Layout  ~>  Add the widget   where you want it to be displayed

STEP 2: Select  HTML/JavaScript from the pop-up window

STEP 3: Paste the code of the STYLE you selected into the text box and Save


Accomplished.
Above are some styles to change the Search Box for your Blogger. Hope this guide will help you to have a nicer, more user-friendly blogger.
Thank you for reading the article.

Click to rate this post!
[Total: 0 Average: 0]
3
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x