August 3, 2012

How to Add a Custom Search Gadget to Blogger

I can't believe that the last time michelle and I posted anything on this blog was April 25th. Seriously SO SORRY.

We're still here I promise.

Today have a two part tutorial on how to add a custom search gadget to blogger. The title should almost be a SIMPLE Custom Search Gadget for Blogger. It really is that easy to add and customize.

Having a search feature on you blog can save readers a bunch of time if they are looking for something specific or a certain topic. Plus, like I said earlier, adding one is so incredibly easy that there isn't a reason in the world you shouldn't have one; and you'll wonder why it took you so long to add it.

The easiest way to add search function is to add the blogger team designed gadget "search box".  It's a fine option if you wish to have a generic look to the search box. It says it's a custom google search but that just means you can add different variables to search; for instance you could have it search not only your blog, but google, and your blog roll. That seems to be all the customization available.

And it would look something like this.


Doesn't inspire too much creativity does it. After all you've spent countless hours making your blog look the way you want it to look. A generic search function just stands out and doesn't blend with the look and feel of your custom blog design. Wouldn't you rather it look something like this?


or this?

or maybe even this?


So here we go How to Add a Custom Search Gadget to Blogger

First things first lets add the search box to your page and then we'll discuss a few quick changes.

1. Go to Dashboard > Design > Page Elements > and select "Add a gadget" > then click the plus sign (looks like this   ) next to the HTML/Javascript.

2. Copy and paste the following code to the content box.

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

3. Save and Viola, you are done.

Now lets show you some quick ways to customize the search function.

Add words to the search box.  Currently the box is blank. add the following code value="keyword search" right after the code type="text" but before the />. You can change the text inside the quotes to whatever you want. For example you could have it say "search" "search loving life" or "enter keyword". It's whatever floats your boat, it's your search function.

Change the word in the enter button. This is easy! Find the code value="search" and again change the text inside the quotes to whatever you want. For example it could say "go" or "find". Seriously whatever.

Change the width of the search box. lets say that you want this in your sidebar but it's too long. Find the code size="30" and adjust the number up or down. A larger number will make a longer search box, a smaller number will make a shorter text box. Play around with the number to find the right feel.

I think that is all for now. Next post I'll show you how to change the background color, the border, the text and switch the search button to a picture.

If you are having trouble with the search function or have a question leave a comment or email us and we will see what we can do.

EDIT:

I was asked how to make the search box higher not wider. The best way to do that is add some style to the search form.

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="30" style="height:30px;" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

Adding a style="height:30px;" makes it look like this. 


112 comments:

  1. Replies
    1. Thses are best but you should also try these Amazing stylish Customize search box
      http://cmpfun.blogspot.com/2015/03/add-your-own-stylish-search-box-to.html

      Delete
  2. I took out the blogger basic box and installed your code and it works, thank you!

    Here is my question: With the blogger basic search gadget, the results are given in a list style, with just the first few lines of each blog post listed. With the code you provide, the entire post is shown, so the person searching might have to go back several pages to find what they want. Is there some additional code to add so the result are shown in a list view?

    The reason I got rid of the blogger gadget is because the gadget required a title and I want to use a pretty graphic instead of the blogger title.

    Thanks,
    ~Jamie

    ReplyDelete
    Replies
    1. That is a good question. I don't know. I'll see what I can do about that.

      Delete
    2. Thanks so much for the tutorial! I'm wondering the same thing as Jamie. I've looked around and cant seem to figure it out. I'm guessing it has something to do with the "display: inline" part, but I'm not sure what to switch it to. Did you figure this out?

      Delete
    3. My code is not the blogger one and that's why it displays different. I am working on how to customize the default blogger one. I'll work on that today and hopefully post a tutorial about it

      Delete
    4. Having the same problem :) Please do update if you find a solution! But thanks so much! The normal search box looks dreadfully boring D:

      Delete
    5. Hei can someone told me how installing that codes to blogger basic box?
      thank you in advance

      Delete
    6. I know it's been over a year, but I just inserted your code (and I LOVE it because the google custom search still wasn't working for me after 2 years of troubleshooting...)

      I've got the same question. Is there any way to minimize the results to a smaller list? Even just blog post titles instead of the entire posting?

      I suppose if you had discovered a way, you would have posted it, but I'm just checking in!

      Delete
    7. I've not spent a ton of time figuring this out. The results are part of the code that I can't really manipulate. I'll continue to see what I can do. Sorry that I haven't figured anything out. I promise when/if I do I'll make a blog post about it.

      Delete
  3. This was so helpful and easy to understand! thank you!

    ReplyDelete
  4. Hi there. I am really new to blogger so sorry if this seems to be a silly question. But I can't seem to find the "yourblogurl" placement. Could you help?

    ReplyDelete
    Replies
    1. Dear Anonymous,

      I made a change to the code and forgot to delete that step. Ignore step 3. I will fix the tutorial to reflect the change. Thank you for pointing that out.

      Delete
  5. Fantastisk! Thank you very much for this :)

    ReplyDelete
  6. THANKS A TON MAN!
    I LOVE U..........................
    http://droidchicken.blogspot.in

    ReplyDelete
  7. Hello, I have a doubt. Could you tell me how I custom the backcolour of the results? I realize a few days ago this gadget didn't work fine, and I've added it again, but now I can't remember the code I changed in the template in the past to get the white colour (not transparent like now, so the letters can't be read).
    Thank you in advance!

    ReplyDelete
    Replies
    1. Sorry, I wanted to say "the background colour".

      Delete
    2. I found the solution by myself. In the template, there is an element called "#uds-searchControl .gsc-results", and it has a property, the background color:
      background-color: ;. I only changed it and wrote the white color like this:
      background-color: #FFFFFF;

      And it works fine now :) Thanks anyway.
      Best regards.

      Delete
    3. I was, seriously, just working on a solution for you. Thats great that you figured it out. I am sorry that you were having trouble and that you had to figure it out on your own. Sorry that I didn't respond sooner. Thanks for coming to our site.

      Delete
    4. You are vey kind, Elizabeth, thank you for your help :)
      I'll come back to your wonderful site.

      Delete
  8. Awesome tip Elizabeth! Glad I found your blog!

    ReplyDelete
  9. I love this! I tried to find something like this forever without luck. I was just curious if you know how/ if it's possible to center the search bar.

    ReplyDelete
    Replies
    1. The bar it's self or the words in the bar? Either way - I don't know. I'll have to play around to find that answer.

      Delete
  10. I've tried SO many codes to add a search bar and this is the FIRST to actually work. Thank you so much!!!!!! :)

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. So i think it just might be me who doesn't know how to change the way the box actually looks once the code is in? i love the examples you showed but have no idea how to change it...

    ReplyDelete
  13. This is great! The organic search bar widget always gave the wrong results every time I tried searching with it. This thing actually works beautifully. Thanks for sharing!

    -Anne's Scribbles and Doodles

    ReplyDelete
  14. Thanks for the great info! The standard blogger search gadget did NOT work! It only returned some of the valid hits.
    Question: Why does it return the search results in a new tab? Is there a way around this?

    ReplyDelete
  15. :http://cashtorefer.net/Default.aspx?Refer=995146

    ReplyDelete
  16. hello, how do you change the font and the height of the box? thanks!

    ReplyDelete
  17. Thanks for providing such a great article, it was excellent and very informative.
    as a first time visitor to your blog I am very impressed.
    thank you :)

    ReplyDelete
  18. sir if i want this search is related to a paricular web address what are the modifications required to add the URL instead of our blogspot posts

    ReplyDelete
  19. I just came across this on a search for adding custom search gadget.Thanks for the tips!!
    website design

    ReplyDelete
  20. The clickable "search" is showing up on a different line - I've tried adjusting the length and haven't found a way to fix it. If you have a moment, could you take a peak and give me your thoughts? http://www.thatmamagretchen.com/
    thatmamagretchen@gmail.com

    Thanks so much!

    ReplyDelete
  21. Thanks so much for your tutorials! I too am having the same issue at Gretchen... Can you help? Thank you!

    ReplyDelete
  22. Thanks for the search box. i had added it. But it would better if it had height increasing facelity.
    Live Technology-A Information Technology Blog

    ReplyDelete
  23. This works great! I wanted a search tool that found just the TITLE KEYWORDS I entered ( I intentionally have no labels ) and this one does that. Fantastic!

    ReplyDelete
  24. My blogger always had a search feature. I did not have to "add" it. Then, all of a sudden, it disappeared along with so much else. What the heck happened. A blogger "redesign". ?????
    I followed some "simple" example of how to add a search "gadget", which is now there, but it does not seem to do "anything". I enter what I am looking for, hit search, and it just sits there looking dumb.

    ReplyDelete
  25. Found it. The NavBar was beng suppressed by Avast ad-tracker. Don't ask me why.

    ReplyDelete
  26. Thanx! The Dutch version called 'zoekvak' doesn't work very well in Blogger, but this one does! Thnx

    ReplyDelete
  27. Excellent information you've got right here on this post.Thanks for the great info
    custom boxes

    ReplyDelete
  28. I love your blog! So much helping for a new blogger like me :)
    Thanks!

    www.michaellaneyssa.com

    ReplyDelete
  29. really helpful post for beginner ..thanks....

    ReplyDelete
  30. Great Post...... Thank you for sharing your experiences.

    ReplyDelete
  31. nice post i likeeeee your bloggg so much..!:))
    its very much helping me to invent new blog www.movieslaps.blogspot.com

    ReplyDelete
  32. This is much better than the normal blogger search box. I used this on my blog: http://mphotoaday.blogspot.com/! Thanks!

    ReplyDelete
  33. Could you explain how to add adsense to this...like the google custom search?

    ReplyDelete
    Replies
    1. I am not sure how to do that. I'll have to take a look.

      Delete
  34. Interesting post and I like it. I find it awesome also. Good job. Thank you for sharing.
    Adodis | Adodis Review | Adodis Technologies

    ReplyDelete
  35. Hi, is there any option to change the color which appear when I click on box? Its showing blue color when I click to write.

    ReplyDelete
    Replies
    1. Add some style to the search function. See my edit above. Sorry for the delay in responding.

      Delete
  36. Thank You so much, I did this on my blog - FunFreeware Blog. I made blue search bar with a white text... TNX ;)

    ReplyDelete
  37. This helped me out a LOT! Thank you very much! :)

    ReplyDelete
  38. Wow! very simple.Thanks for the tips!!

    ReplyDelete
  39. Hello!

    This was amazing help thank you so much! But I was just wondering how you make it thicker width wise not just make it longer length wise? It would be so much help if you replied and I would really appreciate it.

    thank you paris

    ReplyDelete
  40. Thanks buddy this is cool
    www.carrierfoundation.blogspot.com

    ReplyDelete
  41. I've been searching around but couldn't find this. I have the search box up and running, but on my blog I have a number of different authors writing for it, and if you search their name it won't bring up all their posts, just posts that happen to have their name in it. Do you know of anyway to get blogger to recognize the author of the post in the search?

    ReplyDelete
    Replies
    1. I am not sure on how to do that. I'll look around but I can't guarantee that I'll find something. what is your blog?

      Delete
    2. Thanks for the help! It's a video game blog called The Basement Gamer, you can check it out here www.gamerbasement.com. Like I said, I looked around a bit and I just couldn't find anything. I figured out the html and css as I went along really, but not sure if this would even be related.

      Delete
    3. I've been reading up on this and doing some testing and I think the best thing for your problem is to add an author label. That should help in the search of certain authors. Does that make sense? sorry I couldn't be more helpful.

      Delete
    4. Yeah I thought about putting the author name in the tag. I guess more more wouldn't hurt. Gonna have to go through the last number of months of posts to add them though :/

      Delete
  42. Hi, thank you for this useful post, it helps tremendously. I have a question: How do you make the KEYWORD in the search box disappear when someone click in the box? Mine had to be erased manually when I tried searching for something.

    ReplyDelete
    Replies
    1. It should do it automatically. I will look into that. It might take some time - I'll get back to you.

      Delete
  43. Amazing tutorial!!! Thank you so much - I've been looking EVERYWHERE for a simple, straight forward html code for this!!!

    one question:: Is there a code I can add to the html so when someone searches for something the search comes up under 'sort by date' instead of the automatic 'sort by relevance'

    xo

    ReplyDelete
    Replies
    1. I actually don't know how to do that. I will look for you. I can't make any guarantees that I'll figure anything out.

      Delete
    2. no worries! i was just wondering!!! :)

      Delete
  44. HELLO. How can I make it black around my search box like this one in this blog http://www.londons-closet.com/ ? Thank You.

    ReplyDelete
    Replies
    1. take a look at this post. http://www.lovinglifedesigns.com/2012/09/how-to-add-custom-search-gadget-to.html and then you'll want to have a thick border like 3 or 4 pixels and the color would be black ( #000000) . I hope that helps.

      Delete
  45. Thank you so so much - super helpful :) I appreciate you sharing your knowledge with us new bloggers!

    ReplyDelete
  46. I've been looking for one that actually works and this is the first one that actually worked! Thank you so much!

    ReplyDelete
  47. I have been looking EVERYWHERE for how to customize the search box! THANK YOU!!!

    - MeYouAndHayleyLarue.com

    ReplyDelete
  48. Hi, thanks so much for this tutorial!
    I was just wondering if you knew how to centralise the search box within the sidebar?
    Thanks!

    ReplyDelete
  49. i am badly need this article...so much thanks

    ReplyDelete
  50. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents...Great job, keep it up..
    Pub licence

    ReplyDelete
  51. Loved this article!!! Thank you for making it!!!

    ReplyDelete
  52. This was so helpful and easy to understand! thank you!
    http://graphicriver.net

    ReplyDelete
  53. Works better than the Google search, thank you!!! Now people can find our stuff...Google wasn't listing somethings on our blog. Even if they have to scroll down a little, at least it's there somewhere!

    ReplyDelete
  54. Is there anyway to align the icon or search button on the same line as the box? I can't seem to get it to go. Tried making the box smaller and the column wider but still no joy. Http://blog.gemmalawrence.co.uk - thanks

    ReplyDelete
    Replies
    1. I took a look at your blog. Try changing the input size to like 10 and keep increasing it until it the widest it will be before it knocks the button to the other line. Hope that helps. If that doesn't work let me know.

      Delete
    2. Hiya, That doesn't seem to work either. I have left it at input 10 so you can see. Any ideas would be greatly appreciated. Thanks

      Delete
    3. I took a closer look at your blog and this is what I figure is happening - I am going to explain this the best I can - sorry if it’s poorly explained.

      Right now it looks like your sidebar width is set to 120px - that means that any element you add to the widget can only be 120px wide. When the search form size is set to 10 the form is 109px wide - including the button. When you make the size box 13 it increases the form to 121px - since that is too large for the designated area it pushes the search button to the next line. Following me?

      Now you may be asking - “but my images are larger than 120px! why is it working for them?

      Here is the thing about images. They don’t care. Thats the best easy answer I can give to explain them. Your social media icons are a single image split up into an image map - but you already know that.

      This is what I suggest - add the following code to your blogger css skin area.

      #HTML1 .widget-content {
      width:240px;
      }

      #searchthis {
      margin:0px 18px;
      }

      Then change the form size to 30.

      If that does not fix your problem email me at lovinglifedesigns@gmail.com.

      Delete
  55. This is amazing. I've been searching for tutorial on how to do this exact thing, with all the customizations, for days now. Thank you so much for such a clear and easy to follow post.

    I know this post is from a while ago and I don't know if you're still answering questions but do you know how I could go about moving my search bar over to the right? You see I placed my search box in the navigation menu I created but I don't wont it to directly follow the last tab. I would like to move it over to the right so it doesn't look squished. Is there any way I could do that?

    Take a look at my blog to see what I mean: xo.Janiecy.xo | A Beauty, Fashion & Lifestyle Blog

    ReplyDelete
  56. thanks for this tip!! love learning more about blogger!
    Blogger Tips and Tricks

    ReplyDelete
  57. I had given up on ever having an actual working search widget before finding this post. Thanks so much for sharing this info.

    ReplyDelete
  58. great one. I just added. But want to know more on how to add styles to the box. For an example Bold fonts etc. Thanks. See my blog readsharecare.blogspot.com

    ReplyDelete
  59. Is it possible to have a search button on the home page only and not on the blog post? Here is the link to my blog to show where I want it: www.sid-thewanderer.com

    Thank you :)

    ReplyDelete
  60. Is there anyway to customize the search/go button to something more fancy as well?

    ReplyDelete
  61. How can you add hover effect on the search button image?

    ReplyDelete
  62. That's a stylish little script - thank you

    ReplyDelete
  63. Thanks for this - had one that didn't work and this is fab!

    ReplyDelete
  64. can i ask how to put search button in my website that only my website search her is my website tvmuh2.blogspot.com

    ReplyDelete
  65. I love you! You saved me with this post, as I have recently changed my blog url and it will not show any older posts with the classic search button provided in the blogger gadget list. Bless you!!

    ReplyDelete
  66. Thank you so so much - super helpful :) I appreciate you sharing your knowledge with us newbie.....

    ReplyDelete