September 20, 2012

How to Add a Custom Search Gadget to Blogger part II

Today I would like to present to you the second part of my two part tutorial on how to customize a search function.  You can read about the first part here.

The great thing about this is that with just a little effort and not much code you can make a functional search box that matches your blogs design.

Lets jump right in.

Our original code for the search form should look like this.

<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>

The form should look like this - 

• • • • • 

How to change the "execute search" button

Using the code from above. First delete the code value="search".

Then change type="submit" to type="image". Not to be confused with type="text" found earlier in the form. Don't delete that.

Next, add your image by adding the code src="IMAGEURL.PNG" before the type="image" but after id="search-btn".

Now you'll want to align the image by adding align="top" before the id="search-btn" code but after the input code. This is not necessary but if you having alignment issues adding this could be the solution.

The form should now look like something like this -   depending on the image you used.

and your code should look like this

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input align="top" id="search-btn" src="IMGURL.png" type="image" /></form>

Note:
If you are in need of an image to use I have this one    and this one .

The url for the first is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/SearchButton.png

and the url for the second is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/search_btn.png

 for more search buttons do a quick internet search, you'll find thousands of ideas.

• • • • • 

How to change the Border and Background colors of the search form

This one is pretty easy. All you need to do is add an inline style to the search form. I've added it after the name="q" and before the size="30" codes.

Example 1 - 

In this first example I added a red dashed border by adding the following code style="border: 1px dashed red"

Example 2 - 

In this example I added a purple border and a pink background by added the following code style="border: 1px dashed #8d38c9; background:#FAAFBA;"

Example 3 - 

In this last example I added a goldenrod background by added the following code style="background:#FAAFBA;"

My completed form code for example 3 looks like this:

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

Here are some useful resources to help with color and border properties.

  • For more information on CSS borders take a look at this tutorial by W3Schools . 
  • For more information on HTML color codes take a look here at computer hope . 
  • For ideas on color combinations take a look here at colorlovers web trends.  
• • • • • 

How to Change the Text Properties of the search form

To change your text properties, like changing the text color or making the text uppercase,  you again need to add an inline style to the search form.

To change the text transformation add text-transform:uppercase;.

Example 1 - 

To change the text color you need to add a color: #HTMLCODE;.

Example 2 - 

*Remember you need to add words to the search box in order for this option to work. You can learn about that from my last tutorial.

My completed search form code for the above example looks like this:

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

Here is a great resource on text properties from HTML help.

There you have it folks a simple, totally customizable, yet powerful search function. I hope that this tutorial is helpful. Please let me know if you have any questions I will be happy to try and help.

Happy Coding.

37 comments:

  1. did it! thanks :)
    xo - heather
    www.thislifeisyours.com
    *follow me*

    ReplyDelete
  2. THANK YOU SO MUCH! This tutorial helped me out so much :) You can check it out on my blog here if you like ~ www.myfavouritethingsblog.com/
    I tried so many different tutorials and yours was the only one that worked, so now I'm all smiles!
    Olivia Xx

    ReplyDelete
  3. Hi! Thank you so much for the double tutorial, it's great! Simple to understand and soooo useful =) I was wondering if you know by any change how to get rid of the blue highlight when we click in the box. I noticed it happens in every example and I don't know if removing it is doable, I tried searching online but to no luck... It you can help it would be amazing!!! xx Z

    ReplyDelete
  4. Hi, me again... Silly, but I ended up finding the code I wanted... I was just using it wrong... this will get rid of any highlight in text boxes in general, but it worked for me so I thought of letting you know.
    You need to add this CSS to your blog/site
    input:focus {outline: none; }
    xx
    Z

    ReplyDelete
    Replies
    1. Awesome! I never thought of that as a customization. Thanks for the information.

      Delete
  5. Thanks, a huge success, I will change the search button when I have the time.
    You can check it out at http://buildhousehome.blogspot.com.au/

    Really great tutorial

    ReplyDelete
  6. Hi Elizabeth

    Do you happen to know if the code could be tweaked so that the search would include static pages as well as posts?

    Regards

    Chris

    ReplyDelete
  7. Thank you so much for this! Would you happen to know how to get rid of the words/image outside the box entirely and make it so that you have the words inside the box and then just hit enter?

    Thanks, again!

    ReplyDelete
  8. thank you SO MUCH! You are fantastic!

    ReplyDelete
  9. Hey, how do you change the font in the search box? I want to change my font to copse :-)

    Thanks xo

    ReplyDelete
  10. If the search bar is on the top of the page, how do you align it to the right side?

    ReplyDelete
  11. I have the same question as Remilla. How do you align it to the right?

    ReplyDelete
    Replies
    1. Nevermind, found it:
      http://makeablogtips.blogspot.com/2010/04/html-code-to-align-widget-to-left-right.html

      Thanks for the great tutorial! I love the way it makes my blog look! www.sciencekiddo.com

      Delete
  12. How do I get to image to show up? Where do I put the URL of the search icon image?

    THANKS!! :)

    ReplyDelete
  13. I loooved your tutorial, was just what I was looking for. Thanks!! Now I'm trying to figure out how to make a similar bar for feedburner subscription, but I can't make the code right! Arggg! How do you make yours?

    ReplyDelete
  14. Such a helpful tutorial, love the simple layout. Do you know how to customize a "subscribe by email" gadget in this same manner? It would be so helpful :)

    ReplyDelete
  15. Thanks so much for breaking it down! It was really simple to follow and easy to customize!

    ReplyDelete
  16. This has been SOOOOOOOOOOOOOOOOOOOO helpful! I've been trying to install bloggers search bar but everytime I do, it doesn't work. This DOES!!

    Is there any way to increase the thickness of the search bar at all??

    Niki

    ReplyDelete
  17. Thank you so much for these tutorials! Really helpful and easy to understand ^o^
    xoxo

    ReplyDelete
  18. Thank you SO much for these, they were incredibly helpful!

    ReplyDelete
  19. I used your tutorial to update my search box! Thank you so much for sharing! :)

    ReplyDelete
  20. This tutorial was great, but when I type into my search box it bring me to a "this page does not exist" page, instead of search results. Am I doing something wrong?

    ReplyDelete
  21. The tutorial is amazing! Although when I tried to add the link to the search image you gave, it said the photo had been deleted. Do you know of any other search icons I could easily use? Thanks!

    ReplyDelete
  22. Thank you this was super helpful. Thanks to you my search box isn't so boring!

    ReplyDelete
  23. Thanks. This post's awesome! :) It was really straightforward and explanatory.

    ReplyDelete
  24. I have been looking for this all over. Thank you so much, you're a real life saver. :)

    ReplyDelete
  25. This is an amazing post so thanks - can i ask, when it searches for something it searches by relevance first - how do i change this to search by date first?

    Cheers

    ReplyDelete
  26. Love your tips! That works for my site, thank you so much!

    http://shaviology.blogspot.com

    ReplyDelete
    Replies
    1. Glad it worked for you! Thanks for sharing!

      Delete
  27. Great post and very helpful! Thank you!!

    ReplyDelete
  28. It's not only helpful, but educating as well!! ☺

    ReplyDelete
  29. My problem is that the words in the search bar for 'keyword search' or 'search' appear as actual text in the search bar! :(

    ReplyDelete