Notification Bar

Different search bar widgets you can add to your website

Different search bar widgets

It is very important to have a search bar on every website/web page, they make easy navigation through your site to users or visitors. Every website has different style of custom search bar that matches along with the site templates/ theme because,the search bar does not only help visitors to get quick search about what they are looking for but also add a professional look to your website. 

they are lot of benefits when you add a custom search bar to your website:


# Easy customization from the CSS style 
# Automatically adjust width
# Add professional look to your web site
# Save user time 
# Pure CSS, no image.
# Provide basic benefits to customers.
# It can be applied anywhere on your website.
# Style active, hover and focus effect 

You should always know that your visitors are not Google. Google can crawl your site to index your whole post and pages, but your users only have access to stuff they see in front of them because, you might have a lot of post , categories/ labels. all these data cant be provided into a page. you have to provide a way people can find or locate what they are looking for with just a search because they need to search through your entire content in a quick and easy way.


Different search bar widgets

To learn how to paste these codes on your blog for search bars, scroll to the end of this post......

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>







Styles (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, go on any place you would like to add  the search bar to and click on the add  gadgets.

A pop up will be shown with diffrent 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 place.



Was this helpful to you?? 
               Drop a comment and share 👍👍.

I recommend you to read these:








Post a Comment

6 Comments

  1. Your welcome , don't forget to subscribe 👍

    ReplyDelete
  2. Love this post, I chose type 2,
    But how do I place pages such as home, contact us and the likes at the bottom of my blog page instead of
    the top
    Check this blog to understand what I mean better
    https://tosurehub.blogspot.com

    ReplyDelete
    Replies
    1. Go to your layout on blogspot , where you wish to put the contact page , click on the "add gadget" and find the "link list " add the link list. After doing that , now copy the contact page link(url) and paste it in the space that says "new site hurl" past the url of the contact page there and name it contact page. Then save. That's it

      Delete
  3. Are we putting all the search bars or we have to choose one

    ReplyDelete
    Replies
    1. You have to chose one. You can't put lot of search bars on your website, it will look frustrating.

      Delete