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.


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.


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 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 one, increasing your bounce rate.


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 an 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 for 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.
  • Users can easily navigate your website.
  • Save user’s 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;
    }
</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!


2 Comments

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

      Delete
Previous Post Next Post