New Stylish Search Box For Blogger (with Demo)

The search box is the basic but most valuable part of a website. By using the search box on your website, you can increase your site’s usability.

The stylish search box not help only readers to navigate easily to find the solution to their problems but also gives professional look to your website.

You would see every Blogger BlogSpot has different responsive stylish search boxes that give professional look to a simple Blogger BlogSpot Website.

Customized Search Box For Blogspot

Whereas Web crawlers like Google can crawl your entire site easy to index all of your posts and pages, visitors have only access to the links that are before them.

You’ll have hundreds or more posts/pages for people to read. You will have a distinct category, labels, tag, related posts, etc. listed on each of your pages, but you can’t provide all of your data on an exceedingly single page.

Must Read: Custom Robots Header Tags Settings for Blogger

For people to search out what they’re searching for, they have to be ready to search through your entire content quickly and simply.

Whichever page a visitor lands on, they’ll hunt for what they require. This permits people to gain access to a number of your hidden content that might take much longer to search out by clicking through countless pages or posts.

Must Read: Related posts widget for Blogger with Thumbnails

The better it’s for people to navigate your whole blog, the more likely they’re going to stay and visit again as they’ll switch away to a different one, increasing your bounce rate.

Custom Search Boxes For Blogger Blog

Just adding an inquiry Bar isn’t enough, it should be able to help customers and reliable and consistent with the theme of your blog.

Blogger also provides an official simple widget for it, but that does not provide a professional, stylish look to your blog. You’ll use CSS to style the BlogSpot official search box widget.

If your old Search box isn’t working properly and you would like to exchange it for a beautiful one don’t be concerned, just devour one among the subsequent ones and follow the steps by step instructions below.

The look of the planning is up to you, you’ll also edit the CSS consistent with your blog needs.

Benefits of the stylish search box for Blogger/Blogspot:

  • It gives professional look to your Blogger Blogspot blog.
  • Users can easily navigate your website.
  • Save users’ time.
  • Can be applied anywhere on your site.

How To Add Stylish Search Box In Blogger Blogspot?

Step 1:

Go to –> Blogger

Step 2:

Go to –> Layout

Step 3:

Click –> Add A Gadget

Step 4:

Choose HTML & Paste Given Below Code in Box.

<style type="text/css">
    #er-searchbox {
        background-color: #F5F5F5;
        border: 1px solid #EDEDED;
        padding: 5px;
        border-radius: 10px;
        border: 2px solid #0AC4FC;
        margin: 10px auto;
        min-width: 238px;
        max-width: 288px;
    #er-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%;
    #er-input:focus {
        outline: medium none;
        box-shadow: 1px 1px 4px #0D76BE inset;
    #er-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%;
    #er-submit:hover {
        background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;

<form action="/search" id="er-searchbox" method="get">
    <input id="er-input" name="q" type="text" />
    <input name="max-results" type="hidden" value="8" />
    <input id="er-submit" type="submit" value="Search" />


Step 5 of the Stylish Search Box for Blogger:

Click Save… Congratulations!

Leave a Reply