New Stylish Search Box For Blogger

Stylish Search Box For Blogger

Search Box is a 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 does not help only readers to navigate easily to find the solution to their problems but also give professional look to your website. You would see every Blogger BlogSpot has different responsive stylish search boxes that gives professional look to a simple Blogger BlogSpot Website.

new stylish search box for blogger


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 of 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 in an exceedingly single page. For people to search out what they're searching for, they have to be ready to search through your entire content quickly and simply.

Must Read > Stylish Comment Box For Blogger

Whichever page a visitor lands on, they'll hunt for what they require. this permits people to induce access to a number of your hidden content that might take for much longer to search out by clicking through countless pages or posts. 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, increasing your bounce rate.

search box for blogger blogspot by itz programming

Custom Search Boxes For Blogger


Just adding an inquiry Bar isn't enough, it should be able to help customers and reliable consistent with the theme of your blog. Blogger also provides Officially Simple widget for it, but that does not provide the professional, stylish look to your blog, but you'll use CSS to Style BlogSpot official search box widget. If your old Search box isn't working properly and you would like to exchange it with a beautiful one don't be concerned, just devour one among the subsequent 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.
  • User can easily navigate your website.
  • Save user’s time.
  • Can be applicable anywhere on your site.

How To Add Stylish Search Box In Blogger Blogspot?

Step 1:


Go to --> Blogger


go to blogger for search box in your blog


Step 2:


Go to --> Layout

stylish search bar in your blog blogspot


Step 3:


Click --> Add A Gadget


new search boxes for blogspot site


Step 4:


Choose HTML & Paste Given Below Code in Box.

search bar for blogger blogspot new

<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;
    }
</style>

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

</form>

Step 5:

Click Save... Congratulations!


Post a Comment

2 Comments

  1. Replies
    1. Welcome AJAY, I am very glad to help you | Keep visiting our blog ... Thanks !

      Delete