Create Custom Search Box for A Blogger [How To]

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(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
        margin-left: -40px;
        border-width: 0px;
        width: 50px;
        height: 60px;
    }

    #button-submit:hover {
        background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book