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
    #searchbox {
        width: 320px;
        background: url( 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( no-repeat;
        margin-left: -40px;
        border-width: 0px;
        width: 50px;
        height: 60px;

    #button-submit:hover {
        background: url(;

/* 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=" "/>

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

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 - and
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book