How to Add Search Box for Blogger Blog

As an Author of blog on Blogger, we all need to add search box widget that can be used to search our blog contents. Most of our old useful blog post cannot be easily accessed on our blog home page, so adding search box will surely help our blog visitors to search our blog contents which will increase reader's engagements in our blog. Search results appear inline, so your users don't have to leave your blog. On this article I will be discussing about the codes you need for adding customized search box for you blog.

Custom Search Box enables anyone to create a tuned search experience that's contextually relevant. It benefited all website owners and bloggers, blogging platforms typically provide in-built search tools that allow searching across published blog posts, or across tags and categories. With Custom Search, you can go one step further: you can define a search experience that evolves over time, and includes not just your blog posts, but links extracted from those posts, as well as links from your blog's link lists and blog lists - in short, all items of interest related to your blog.

Here's How To Add Search Box for Blogger Blog

Step 1. Login to your Blogger Account using your Google account. Go to Blogger Dashboard.then Click on Layout tab from left pane and click on Add a Gadget link.

Step 2. After you click on Add a Gadget link a pop-up box will open now with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign on the upper left of the gadget.

Step 3. Select 'HTML/Javascript'  then put the modified search box code you made, then save you blog settings, DONE.

Below is the Code of Add Search Box for Blogger Blog


Code Line  4: 100% (width: 100%)
This is for fluid width of the search bar, to change it to fixed width, just enter appropriate pixel value example: 200px

Code Line 45  #4d90fe (background-color: #4d90fe;)
Change this hex code to the change the color using color picker here

Code Line 55 (Search TheBlogServices)
Change this to more appropriate word for your blog

Code Line 56 (Search)
Change this to something like “GO’ or “Submit” or anything but its better to leave it as “Search”

Enjoy this Customized Search box in your Blog, if you have further queries or wanna share your experience just post your comment below, thanks
The Author

I'm Frank from Philippines. born on July 20, 1986 Author of www.theblogservices.net. I was a blogger since July 2010, I have a great passion about blogging and all other stuff online. Follow Me on Google+ or Like our official FB Page HERE

Related Post


  1. Thanks for this info! I have to correct mine so I will be using this :) Thanks again!

  2. Thanks for this, I love learning new tools for my blog!

  3. I am still working on my blog layout and tools. Since I am fairly new I am still learning and constantly looking for ways to improve. Thank you for sharing!

  4. This is very helpful. I'm always trying to learn something new to make my job blogging easier.

  5. That's a great info!!! I will add search box in Wood Arts Universe blog..
    Thanks for sharing..

  6. Really easy to understand tutorial! I think you made a great resource for bloggers using blogger. :)

  7. thanks for sharing. i have a wordpress blog. any suggestions

    1. sorry I am not familiar with word press yet. I will message you about wordpress tips as soon as I already built up my WP blog. thanks