Create Custom Search Box for A Blogger [How To]

How to Create “Custom Search Box” for a “Blog”? How to Customize Search Bar in blogger?

In this post, I am going to share the “How to “Create Custom Search” box “CSS/HTML” For a Blogger?” and this “Search Box” is very helpful for searching a Post from your blog or web site by using a Specific Keywords.

Stayed Informed - Top 12 Greatest Indian Bloggers & Earnings

This is simply a “HTML”, “CSS” and “JavaScript” steps as following as,

1.      Go to your blog Layout and add Gadget.

2.      Add a search box title for display search text like “Search…”.

3.      Add below “HTML” and “CSS” in the “Layout content”.

4.      Finally “Save” It and view the Result.

The Example as,

//Custom Search Box CSS
<style>
    #searchbox {
        width: 320px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2Q2t0BsQW2JjgU5xKMz4lVbIBdsVgY2jaDJEh7OZULA7v7jDCweepU2RNzb7EwMnk8Frjk-G8lCQRs0qv4_00RigZItoJQ7jqQMC7iLOaPweDcJ-A0SUTlEUYENn-Ir-W518lIBx2afv/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }

    #searchbox input[type="text"] {
        background: transparent;
        border: 5px;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
        font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 250px;
    }

    #searchbox input[type="text"]:focus {
        color: #fff;
    }

    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThS2yEE-dXzUFPNb9WFZ2VvAFALryx4L1hNHcNRXlsfxC4KfVNFv0q06z6W2CABSdPc71jhTm69ieIc3ZAzTzCr0BZpcNf6wezHOr7mOdpe4kZL53i4fqaES5xTYLokU3wW5udNhyl7KO/s1600/search-icon.png) no-repeat;
        margin-left: -40px;
        border-width: 0px;
        width: 50px;
        height: 60px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlAbf7MzqUtACo58PL0QxtgjSh5jF28_8tT2lwvlbRxEU_nbYwGfMyn7RJ3t7QV7SdKDnnvMEfBnZbJnuNNxIlco5YY9k1p2yF64pL9cV0KrR4kfq3dp6HI7sDX66E37FJWV2DGtcHQycq/s1600/search-icon-hover.png);
    }
</style>

/* Custom Search Box HTML */
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form> 

I hope you are enjoying with this post! Please share with you friends. Thank you!!