A few months ago I was doing a little blog design update… heck I’m always doing an update. I’m an addict. Anyways, in my quest to keep my blog looking clean and minimalistic I went on the hunt for a new Blogger friendly search bar. I must say, trying to find a simple looking search bar was one heck of a challenge. In the end I found one from this site and modified it to get it looking more appropriate. I’ve shared this code before, but it was kind of buried among a bunch of other information. I thought it might be helpful as a stand alone post. I’ll tell you how to add it. It’s dead simple.

To get the search bar looking like this…

Go to your dashboard and select the “Layout” tab. Click “add a gadget” wherever you want to put it and add a “HTML/Java Script” gadget. Then all you have to do is paste in code below and save it.


   #search {  
   border: 1px solid #BDBDBD;  
   background: white url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   #search #s {  
   background: none;  
   color: #BDBDBD;  
   font-family: verdana; 

   font-size: 11px;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>  



Now for any adjustments.

1. If you’d like to only have top and bottom border lines like this…

…then change the line in red to this:
border-bottom: 1px solid #BDBDBD;
border-top: 1px solid #BDBDBD;

2. If you’d like to change the colour of the border line change the section in blue.

3. If you’d like to change the colour of the font adjust the section in pink.

4. If you’d like to remove the search icon (which is really just for show) like this…

…then remove the line in purple.

5. If you’d like the font to be in caps add this line underneath “font-family: verdana;”
text-transform: uppercase;

6. If you’d like to change the width of the search bar adjust the percentage in green.

  • Thank you for sharing this! It can be so hard to edit your template yourself. x


  • Ohh this really is a simple and sleek search bar! ^ 3 ^


  • Thank you so much for this! I love your web design tutorials, they're always so helpful and easy to follow!

    Tessa at Bramble & Thorn

  • Thanks so much for this, just added it to my blog and it's worked perfectly!

  • Thanks for the tip! I really wanted to delete the search icon 🙂 Do you know what we have to change to change the "Search" and replace it by "Looking for something?" or "Rechercher"?


  • YESSS. I've been looking all over the interwebs for this tutorial for ages, I hate how the default search button looks. This was really easy to understand, thank you!

    Yet Another Makeup Blog.

  • Hmm it doesn't look quite the same for me, but thanks for the tutorial! I'll play around with it for a little more 🙂 -Audrey | Brunch at Audrey's

  • I'd love to know what it looks like for you in case I need to change anything. Thanks.

  • No problem. Looks good on your blog.

  • Right at the end of the code there's a piece that says — value="Search" — you can change that, however for some reason it doesn't operate in quite the same way once you do. You have to manually delete the writing instead of it disappearing when you click it. I need to find out why.

  • Gewwwd gewwwwddd.

  • Thanks Tessa. I always worry about not being a professional and giving advice, but people seem to enjoy these types of posts nonetheless.

  • I've added!! Thanks so much..it was pain free!! 😉

  • Thank You! YOu are my Hero! My blog looks so much better because of your tips 😉

  • THANK YOU FOR THIS! been trying to find a customisable sidebar for ages! 🙂 xx

  • I felt your pain… a few months ago when I was searching too.

  • That was SO useful! Thank you so much? Do you know how can I change the size of the picture on the 'popular posts' widget? I've been searching for this for so long, but nothing works for me =/
    I am loving your blog! Congrats!


  • Thank you!!! Small yet huge improvement 🙂

  • Thank you for posting this, your tips are are so easy to follow! 🙂 x


  • I love the little magnifying glass search icon that you have displayed in your mobile template. Is this something that you would do a tutorial for? Is it something that would be possible in the Blogger template? Thanks so much! It’s so nice that bloggers are able to get help from other bloggers in the community, I am always amazed at how much information is shared online for those who are still learning!


  • Thank you so much for this, I’ve just installed it to my blog and it looks great. Such an easy tutorial and easy to customise!


  • Detouchingstories

    niceone…see it how it looks https://detouchingstory.blogspot.com

  • OMG!! I was able to place it on my front page; do I have to copy the code in each and every page? I’m so timid; thank you so much!

  • candy

    looks very professional, but it’s only searching the posts. How can i make it search the pages too?

  • Awesome post. Really helped me out cause I really didn’t want to use that ugly navbar on blogger. Peace!