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.

38 Responses

  1. aabilash says:

    Thanks for noticing, the code has been corrected, it’s perfect now

  2. Jenni says:

    I cannot get this to search my labels, nothing comes up when I type in a word (that’s already a label). Thanks for your help on this matter.

  3. Works very well! Thanks a lot!

  4. Walter says:

    Excellent 😀

  5. I choose the blue one, fit with my blog, tq so much

    Awin Language

  6. Jon says:

    Hi thanks, it works great on my blog.

  7. sparkandchemistry says:

    Tweaked a few things but it looks great on my blog!

  8. chugy says:

    Nice Working. Very good. Thanks for share.

  9. Indian-Share-Tips.Com says:

    The code worked as promised. Does it effect loading speed.

  10. Engg Yamato says:

    Why it wont work for you. If you’re using blogger you can add a gadget and then click on HTML link then paste it there it would work.

  11. Jennifer says:

    Thank you!

  12. ayafawzy0 says:

    hello i need your share gadget pls

  13. Renata says:

    Thanks for sharing, works like a charm!
    My blog:

  14. Sadaf F K says:

    Is there anyway to make button in ROUND shape?

  15. James Packer says:

    the current search options breaks any url masking and shows the blog url not my domain name used to mask to blog url, is there a way to by pass this?

  16. Anna says:

    Hi there,

    Thank you so much for sharing this widget, I absolutely love it… my only question is whether it’s possible to change the font? Any help would be hugely appreciated!

    • aabilash says:

      Thanks for loving the widget. It is simple to change fonts. By default the widget inherits font from the website, and you can change the font by simply adding the line

      font:family: “Trebuchet MS”, Helvetica, sans-serif

      under appropriate CSS section, for example if you need to change the font of “Email Address” place holder then insert the line under #search-text

      To change font of text typed within search widget, insert line under #search-box input[type=”text”]

      To change font of “Submit” insert the line under #search-button

      To be consistent, use same font under all three sections, make sure your fonts are web safe

  17. John Rioux says:


    This works great! I’ve been able to easily customize the looks of the search bar itself, but is there any way to customize the results?

    For instance, I want the engine to search for pages as well as blogposts. Which part of this code tells it to search blogposts?

    I’m also trying to customize the status message box (“Showing posts sorted by relevance for query…”). I’ve managed to change colors and stuff, but the width of the box is stuck at the maximum width that the “Showing posts sorted by…” text allows.

    Basically, I’d like to know more about this “Search” function of Blogger, but I can’t find anything anywhere else on the internet.


  18. Mauro Costa says:

    HI there. Thank you so much for sharing this tool.

  19. radin noman says:

    World Celebrity
    Nice….. thank you. it cool and 100% working any search key.

  20. fantastic – works perfectly! thank you!

  21. bobybratu says:

    thanks, using it on, would like to have normal corners thow and not rounded, is it possible?

  22. You Can Never Know Who I Am says:

    Bro i appreciate this kind of work! But my problem is i cant change the color? Why? I set two search box on my blog which is for custom search such as and another is for Google Custom Search .. now i want the first search box to be blue (GSE) and the second to be red (CS) Now do you have any solution for this!?

  23. TINOQUITO says:

    Good post! it really worked on my blog… you can see it working on

  24. Free Salesman says:

    Dear Abilash. I would be grateful if you could help with following.The Blogger template i am building my blog has a search bar. I can locate the code which is:

    I tested if it can search by post labels but it does not. It only searches Post titles etc.
    Is it possible to make it search and return any post being labeled with the text used for search?

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × five =