Different search bar widgets you can add to your website

Different search bar widgets

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.