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.