Different search bar widgets you can add to your website

It is very important to have a search bar on every website/web page as they make navigation easy for users or visitors. Every website has a different style of custom search bar that goes along with the site templates/ theme.
The search bar does not only help visitors quickly search about what they are looking for, it also adds a professional look to your website.
There are lots of benefits of adding a custom search bar to your website, some of them are
  • Easy customization from the CSS style
  • Automatically adjust width
  • Adds professional look to your website
  • Saves user’s time
  • Pure CSS, no image
  • It provides basic benefits to customers
  • It can be applied anywhere on your website.
You should always remember that your visitors are not Google that can crawl your site to index your whole post and pages. Your users usually have access to stuff that are conspicuous. You may have a lot of posts categories/ labels. All these data can not be shown on a page. You have to provide a way people can find or locate what they are looking for easily.
At the end of this article, you should know how to paste codes on your blog for various search bars.

Style (1)

Code 

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

Code

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

Code

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

Code

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

Code

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

How to add search bar codes on blogger

Login on blogger.com. Go to layout, then go to where you would like to add the search bar and click on the add gadgets.

A pop up will be shown with different Gadgets, locate the HTML/JAVA gadget and add that.
Place the desired search code style and save it.

Note : You can move the search bar anywhere on your blog. Just hold and drag to where you want it to be.

If this was helpful to you, drop a comment and share.

I recommend you read these