professional search bar for a Blogger

 Creating a professional search bar for a Blogger (Blogspot) website involves integrating HTML, CSS, and JavaScript. Here's a basic script that you can customize and add to your Blogger template:

Step 1: Add HTML Markup

Place this code where you want the search bar to appear in your Blogger template (usually in the header or sidebar).

HTML

<form action="/search" method="get" id="search-form">
    <input type="text" id="search-input" name="q" placeholder="Search...">
    <button type="submit" id="search-button">Search</button>
</form>

Step 2: Style with CSS

Add custom styles to make the search bar look professional. Insert the following CSS in your Blogger template CSS section or in an external stylesheet:

CSS

#search-form {
    display: flex;
    align-items: center;
}

#search-input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    width: 200px;
}

#search-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

#search-button:hover {
    background-color: #0056b3;
} 

How & where we use this script?

To use this script on the blogger website or another builder ..Go in website of the builder. 

Ex: https://www.blogger.com

And then, go in layout section on left side of the corner.

And when the layout section initialise where you want to add the search bar you the image is given below: 

As you can see here, in the right side of the corner there is a option of ( + Add a gadget ). Click on it and then,

 here you can see the option of (html/javascript) click on it,

 

Here the popup is showing here, write the title and the script like this ,

Click on ok button and

The process of adding the script is done!!

!!Subscribe / follow for more!!