Customized Search Gadget

Customized Search Gadget

Now that you’ve learned how to customize your email gadget, wouldn’t a matching search bar be cool? A lot of blogs pair these two gadgets together, so having them look similar can improve your design. They just look so cute next to each other =)


If you go into Blogger to add a search bar gadget it looks rather blah.

Like the email gadget, the following code will allow you to change to colors of the search gadget to match your blog’s theme. However, the search bar that I use isn’t the search bar gadget that blogger has. Trust me this other search bar works. If you don’t believe me, just try a couple of searches with my search bar on the right.

So first go into Blogger > Template > Customize (button) > Advanced > Add CSS
Paste in the following CSS there and change the colors for the input background and submit button background/hover (the caps text)

You can choose your colors here:

Apply changes, then you’ll need to go to Blogger > Layout > Add a Gadget > HTML/JavaScript
For the content, paste in the following code and click Save.

Hope you enjoy! Let me know if you are struggling or have any questions =)

Leave a Reply

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

CommentLuv badge

13 thoughts on “Customized Search Gadget

  1. I actually wondered how to do this for awhile; I use the same, or rather similar, search bar myself (yep, blogger one sucks) and I find it really gloomy with it's grayness. -_-

    I did figure out how to do it on my own on a test blog (making a new blog design), but a black font color on a dark blue button won't work out well with reading! ;)

    I think I might be sending you an email soon regarding HTML/CSS – actually, something to do with Troubleshooting. I just need to throw a hammer on some of the widgets to hopefully make it a 2 column one instead of a 3 column one (maybe) and finalize the major changes before doing so (or I might embarrass myself with the fact that I could have figured it out on my own or found it on my own). :3

    Thanks so much for the tutorial! :D
    My recent post Blog Tour: Vision of Shadows – Guest Post + Giveaway

  2. Hi! I’ve followed everything you wrote but when I used it to test if it works, I saw that my header and navbar lost their css styling. My header which is supposed to be blue changed to black same goes for my navbar. Any help would be awesome. Thanks a lot! :)

  3. Hello there,

    Great tutorial! I was wondering if you could help with a couple of extra things…

    I basically want the same search bar as you but with a couple minor (hopefully) differences – I would like the font to be Courier New, regular, or just courier. Also, When you click on your search bar I notice the outline highlights blue and becomes thicker. For mine I’d rather it just went a darker grey colour and remained the same thickness.

    Any help would be very much appreciated, thanks very much! xxx