Blogging Tips



Saturday, 21 November 2020

Add A Custom Search Box in Blogger Template | Responsive

You are a Blogger and your template or the Blogger Theme do not have a Search box which is the most common and the important thing in any platform.

It is the most required thing for The Permanent user of your Blog or your site. if you are at the Wordpress, it is just a bite of bread for you as you have to just drag and drop process for adding the search box in the theme.

how to add custom blogger search box in template

But Blogger do not provides you such a service to add the plugins. But still you can add it yourself if you have little bit knowledge about the Coding or the languages such as HTML, CSS and the javascript.

If you do not have enough knowledge about it, what about that ?

Here is the solution for them as it is a single  problem. all you have to just get the Script Code and follow some of the simple steps during the finishing of this process.

How to Add Custom Search Box in Blogger?

To add the search box in the blog, you have some pre created services from the blogger, but still you do not have enough control to change their style such as even you can't change its background color or the font style.

But adding the custom Search box allows you to fully control over the style of the box. so let's get started.

Step 1 :  Go to Blogger and find the layout tab.
Step 2 :  In the sidebar menu click over the  which will open a new pop up window.
                                   add custom search box in blogger
Step 3 :  Now find for the HTML/ Javascript option and click over it.
Step 4 :  Then Copy the code below and just paste over there and click over the save button.

BOOM! just open your Blog and you will find a search box in your blogger site.

But here the main thing comes how you can customize that search box. so do not take effect of that because here you will get complete information about that.

1. Change Background-color : To Change the Background- color of the search box, find <style> and #searchbox and there you will find Background : #d8d8d8  just Replace the value #d8d8d8 to any of the color. 
2. Change the Font :- To Change the Font of the Search Box, find #searchbox input[type="text"]  and then Font : font: bold 12px Arial,Helvetica,Sans-serif; and replace the value to any other font.

No comments:

Post a comment

Comment Here for Suggestions And Complaints.