Step by Step Instructions (With Pictures, Demo and Video) for Adding a Beautiful Custom Stylish Search Box Widget in Blogger.

5 Stylish Search Boxes For Blogger (with Demo)

Updated on: March 30, 2020
Custom Stylish Search box widget
Search boxes for blogger

Search Box is the basic but a necessary part of a website. They're user convenient and help you in increasing your website usability. They help your readers to navigate throughout your blog more efficiently. You would see that every blogspot blogger has different stylish custom search box widget matching their template design because, they were not only help users to find the solution of their problems more easily but also add a professional look to your blog.

Whereas Web crawlers like Google can crawl your entire site easily to index all of your posts and pages, visitors have only access to the links that are in front of them. You may have hundreds or more posts/pages for people to read. You may have a different category, labels, tag, related posts, etc. listed on each of your pages, but you cannot provide all of your data in a single page. For people to find what they are looking for, they need to be able to search through your entire content quickly and easily.

Whichever page a visitor lands on, they can search for what they want. This allows people to get access to some of your hidden content that would take much longer to find by clicking through countless pages or posts. The easier it is for people to navigate your whole blog, the more likely they will stay and visit again as they can switch away to another, increasing your bounce rate.

Custom Search Boxes For Blogger

Just adding a Search Bar is not enough, it should always be ready to help customers and reliable according to the theme of your blog. Blogger also provides Officially Simple widget for it, but that doesn't provide the professional, stylish look to your blog, but you can use CSS to Style blogspot official search box widget. If your old Search box is not working properly and you want to replace it with beautiful one don't worry, just pick up one of the following and follow the steps 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 Custom Stylish Search Box

  • Add professional looks to your website.
  • Provide basic benefits to customers.
  • Save user time.
  • Can be applied anywhere like in header, sidebar, footer etc.
  • Stylish Active,hover and focus effects.
  • Pure CSS, no image.
  • Easy customization from CSS styles.
  • Automatically adjust width.
Custom Beautiful Stylish Blue Grey Search box widget
<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>
Beautiful Stylish Red Grey Search box widget
<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>
Animated Green color Stylish Search box widget
<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>
Custom Stylish Search box widget with hover effect
<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>
beautiful Smooth Stylish Search box widget
<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>

Steps: How To Add Stylish Search Box Widget To Blogger

Note: Minimum sidebar width required - 250px

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.

Add HTML/JavaScript widget

Step 3. Configuration:

- Change the value="8" for total numbers of posts per page. Eg value="12".

Note: Make sure max-results value matches with your post limit on homepage.

Step 4. Press Save.

Recommended: To display the search box in mobile view you need to enable desktop theme on mobile

Read: How to Change Status message on search result page
Read: Beautiful Subscription Box widgets for blogger
Read: How to change search results order

Done !

Now your visitors can navigate your blog easily. For any issues related to above tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)

Video Tutorial:

Video link: https://youtu.be/Xu_wLGMYXes

Love it? Don't forget to Subscribe
  • Saurabh Jarial
    Saurabh Jarial
    13 February 2016 at 10:50
    Thanks Admin nice post :-)
    $ Jarial
    $ Jarial
    18 February 2016 at 18:04
    keep visiting, for any issue regarding this post pls cmmt
  • Hopey Levrey
    Hopey Levrey
    14 May 2016 at 21:17
    thanks for the great tutorial :)
    Saurabh Jarial
    Saurabh Jarial
    20 June 2016 at 23:23
    Thanks Hopey. Glad you liked it.
  • Unknown
    Unknown
    26 August 2016 at 20:49
    hello admin nice work.
    Once check the first search bar code it's not taking input
    Saurabh Jarial
    Saurabh Jarial
    27 August 2016 at 22:33
    Hi Tech Buzz,
    Thanks for your valuable comment.
    Code of the first Search bar is fine and taking input successfully. Try to refresh your browser (clear cache and cookies) or use any other browser.
    If problem still not resolved then post your blog address. we will check that out shortly.

    Keep Blogging.
  • raahehaqcharitylrk
    raahehaqcharitylrk
    30 August 2016 at 10:20
    bro my search box is not working?
    Saurabh Jarial
    Saurabh Jarial
    2 September 2016 at 20:37
    Hi Brother,
    Please mention your blog address or CONTACT ME via mail so i can have a look over your search box.
    Happy to help you.
  • Ss
    Ss
    21 May 2017 at 16:29
    it really helpful thanks .
    Saurabh Jarial
    Saurabh Jarial
    7 June 2017 at 10:53
    Thanks! keep visiting
  • HaiderAli
    HaiderAli
    13 August 2017 at 14:57
    how can i chaneg colour of search bars
    Saurabh Jarial
    Saurabh Jarial
    16 August 2017 at 23:53
    Which search box and what type of color?
  • Pc.RepaX
    Pc.RepaX
    19 September 2017 at 22:29
    Thanks Helpfull for new bloggers.
    Btw i'm looking for featured posts widget is there any working tutorials out there ?
    Saurabh Jarial
    Saurabh Jarial
    21 September 2017 at 08:17
    Not yet, but soon, until stay tuned and happy blogging.
  • Dr M Duffett
    Dr M Duffett
    20 September 2017 at 21:07
    How can I create a search bar that brings up a list of links to posts rather than a set of full posts?
    Saurabh Jarial
    Saurabh Jarial
    21 September 2017 at 08:28
    I'm already working on it. Stay tuned!
  • Opus Web Design
    Opus Web Design
    25 November 2017 at 00:48
    Hi, How can you set it so that the search results open in a new page
    Saurabh Jarial
    Saurabh Jarial
    4 December 2017 at 21:50
    I am working on it. Stay tuned!
  • Raaj
    Raaj
    18 February 2018 at 19:29
    very good
    Saurabh Jarial
    Saurabh Jarial
    19 February 2018 at 16:12
    Thanks!
  • S. Marie Carlson
    S. Marie Carlson
    27 February 2018 at 23:25
    Hi, I just installed the search box and it works just like the blogger search box, which is great, but my problem is that I have pages that I need to be searchable and it is not searching them and pulling up any results. Do you think you could make it search the pages as well as the blog posts? Maybe in list form like the google search engine? Really the main need is for the ability to search pages. Thank you. I really love the way the search box looks with my design.
    Saurabh Jarial
    Saurabh Jarial
    28 February 2018 at 00:08
    Hi,
    Yes! Blogger search box doesn't extract data from blog pages. But, If you really want to have a search box that searches data from blog posts as well as from blog pages then you can use Google Custom Search Engine just like mine.

    Thanks!
    Scott Mendez
    Scott Mendez
    17 December 2018 at 18:49
    This comment has been removed by the author.
    Saurabh Jarial
    Saurabh Jarial
    20 December 2018 at 23:16
    this won't give you results from google search engine. GOOGLE CUSTOM SEARCH ENGINE is a dedicated search engine which will only search your blog and not the whole web.
  • DeadEye
    DeadEye
    22 June 2018 at 21:01
    can the search automatically show results sort by date?
  • DeadEye
    DeadEye
    22 June 2018 at 21:05
    ahh found it, added this line
    input name="by-date" type="hidden" value="true"

    thanks for the great search box!
  • Aasan
    Aasan
    14 October 2018 at 14:25
    bro here is problem,,,
    when use it, it is working but an unwanted text line appear ..
    Saurabh Jarial
    Saurabh Jarial
    23 October 2018 at 00:39
    Can you send a link? So I can have a look.
  • Unknown
    Unknown
    10 November 2018 at 04:40
    thank you for this
  • Unknown
    Unknown
    2 December 2018 at 23:55
    Very Helpful article
  • Akhand Pratap Singh
    Akhand Pratap Singh
    4 December 2018 at 17:52
    thanks. really helpful
  • Scott Mendez
    Scott Mendez
    17 December 2018 at 18:46
    How do I get it to work now? I get the same search every time no matter what I search for on my page. "Showing posts sorted by relevance for query "". Sort by date Show all posts"
    Saurabh Jarial
    Saurabh Jarial
    20 December 2018 at 23:13
    Blogger search widget analyse the whole content of the pages to display results. Maybe you have same search string in that posts that's why you are getting same results for different queries.
  • Admin
    Admin
    29 January 2019 at 23:08
    Excellent Post, Nice Search Boxs For Blogger, THANKS For Sharing your thoughts with us, Good Job
  • tazi
    tazi
    9 February 2019 at 21:49
    thank you soo much but i have a question: are this amazings search box responsive with all devices and browsers ?
    Saurabh Jarial
    Saurabh Jarial
    4 May 2019 at 12:18
    YES!
  • Max... Edelman
    Max... Edelman
    11 February 2019 at 21:12
    thanks. super
  • AssamRecruitment.in
    AssamRecruitment.in
    17 March 2019 at 11:17
    I need side bar one click open nav menu.Please help me Sir.
    Saurabh Jarial
    Saurabh Jarial
    24 April 2019 at 16:59
    Your can hire me for this.
  • Ananias Lutana
    Ananias Lutana
    18 April 2019 at 18:29
    thank you
  • Unknown
    Unknown
    15 August 2019 at 21:20
    Thnx
  • BravoTrader
    BravoTrader
    18 August 2019 at 09:22
    Hi Jarial, great work, nice search boxes.
    I recently installed the first of the list, changing the background color according to my blog. For the same reason, now I'm trying to reduce the height of it, trying may combinations in the html code, but can't get it. It's confused fo me identify the names #hbz input, focus submit... Can you help me?
    Saurabh Jarial
    Saurabh Jarial
    18 August 2019 at 21:01
    Hi, Thanks
    You can change the value ///height: 35px;/// to desired value.
    Note: It is repeated more than once so change all and make sure all values are same
  • PHBREAKER
    PHBREAKER
    23 August 2019 at 03:14
    Thankyou for sharing, love from Philippines
    Saurabh Jarial
    Saurabh Jarial
    24 August 2019 at 16:12
    Thank you :)
    Have a great day!
  • Tharaka Devinda
    Tharaka Devinda
    17 September 2019 at 21:28
    Thank you . god bless
    Saurabh Jarial
    Saurabh Jarial
    3 October 2019 at 17:51
    Welcome
  • Scott Mendez
    Scott Mendez
    19 December 2019 at 16:30
    How do I left, center, or right align the code in the HTML/Javascript gadget? I've tried so many suggested CSS code tricks. I don't have the side bar, just the straight up and down template.
    Saurabh Jarial
    Saurabh Jarial
    6 January 2020 at 18:48
    Sometimes it is not easier to obtain the desired alignment with just simple text-align code because of theme codes so I advise you to hire someone who have knowledge of CSS to do the job.
  • Barry Adams
    Barry Adams
    20 December 2019 at 17:03
    Thanks. It works 👍
  • zohee corner
    zohee corner
    22 February 2020 at 02:46
    hello . it appeared correctly on desktop version but on mobile view its not showing
    Saurabh Jarial
    Saurabh Jarial
    30 March 2020 at 11:29
    To display the search box in mobile view you need to enable desktop theme on mobile
  • Opal Crown
    Opal Crown
    8 March 2020 at 11:41
    Thank you so much!
  • Tom
    Tom
    28 June 2020 at 09:52
    This is excellent! Thank you.
  • Unknown
    Unknown
    26 July 2020 at 18:34
    Thanks excellent
  • Devshimitsu
    Devshimitsu
    18 September 2020 at 20:05
    Thanks Man
  • MSmart
    MSmart
    25 November 2020 at 09:21
    Thank you!
  • NightRider
    NightRider
    26 February 2021 at 17:39
    How to add this like Comment System on Blogger.
    Saurabh Jarial
    Saurabh Jarial
    18 March 2021 at 11:04
    A tutorial soon. Stay tuned and don't forget to subscribe.