Beautiful Search Box Widget for Blogger

You may also like:

Beautiful blogger search box code widget

Search Boxes are the most essential element of a blog, allowing visitors to dig and find contents. Here is a beautiful, functional and fluid adaptive width search box for blogger blogs.

Just copy the below code and add it as a HTML element. Width of the search box is fluid and it gets automatically adjusted to the sidebar width or wherever it is placed.


Live Demo    |        Download Search Bar Code

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

Line:45 – #4d90fe  – Change this hex code to the change the color

Line:55 – Search TechFrost – Change this to more appropriate word for your blog

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


What’s Next

Now that you have a nice custom search bar on your blog, why not place it on a 404 page?

Visitors hate to see “404 Page not found” message, but that’s inevitable on a growing blog. Just place a search bar on these 404 pages and the visitor will eventually use it to search for something that’s actually available. A search bar on your blog’s 404 page will prevent users from leaving the site too early. Here’s a quick guide on how to place a search bar on 404 pages of a blogger blog.


Abilash A

I am a Web and Graphic designer, specializing in designing and hosting websites, blogs and forums. I love technology and blogging is my passion. I also specialize in blogger to WordPress migration. Currently I work Full-Time as a Quality Control and Testing Engineer.