Blogspot Tutorial: Add a Stylish Blog Search Engine


You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we will customize it.

A simple blog search engine




The code for this search engine is:



<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Enter something here..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Search!" type="submit"/></form>


You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.

Customize this simple search engine to make it stylish and cool


Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.



I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.



<form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 150px; height: 15px; color: #FFFFFF; font-size: 14px; background-color: #000000;" value="Enter text to search..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" style="border-color: #000000; background-color: #FFFFFF; color: #000000;" value="Submit!" type="submit"/></form>


Now, I'll explain styling used in this search engine.

Width


width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...


Height


height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...


Color


color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...


Font Size


font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...


Background Color of Search Box


background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.


Border Color


Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...


Background Color of Search Button


background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...


Search Button Text Color


Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...


Installing this search engine in your blog


You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.

17 comments:

  1. how do you do, Mohammed,

    please, could you expain how you added this template to blogspot? I want to do the same, but, unfortunately, still have problems with programming... don't understand anything :)...

    I want to upload it to Blogger account, but how? they offer only standart boring templates, which you may modify a little bit (colours).

    Please, help!

    regards,

    ReplyDelete
  2. Thank you for this post Mohammed. The default search function wasn't working for my blog, but yours worked like a charm!! Plus all the tips to customize it.. Really helpfull. Keep up the good work.

    ReplyDelete
  3. @ Snowangel you can use Google Adsense Custom Search Engine to fix these problems. I'm using it on top of this page..... It definitely works and you'll also get a tiny amount of money for searches.

    ReplyDelete
  4. I also do not know how to add this to mine and there is no other workaround or fix for this problem in http://www.google.com/support/forum/p/blogger/thread?tid=5a0300c34056dff2&hl=en

    fred

    ReplyDelete
  5. @ Fred Avolio, the only work around to this problem is to use a Google Custom Search Engine like you see on my blog.

    ReplyDelete
  6. Help - How To limit the search results , for e.g. i want to put max 5 results on each page,

    Please i need ur help !

    will b waiting for ur answer !

    ReplyDelete
  7. @ Swaran, I tried with some experiments but couldn't do so. Although you can limit labels results but not search results.

    ReplyDelete
  8. Perfect as the standard google search feature sucks!

    ReplyDelete
  9. Hi Mohammed. I followed your instructions but am unable to get the search function working. My site is earthytoastyspicy.blogspot.com. Could I trouble you to take a peek, please?

    I can also email you the code I tried. I just copy/pasted it here but then I got an error message.

    Anything you can do to help would be IMMENSELY appreciated. I've tried about 6-8 codes now and am getting ready to pull my hair out! None of them are working for me.

    With gratitude,
    Yvonne

    ReplyDelete
  10. @ Yvonne, What is the error you're getting? Where are you posting this search engine code? Have you tried the new search gadget provided by Blogger?

    ReplyDelete
  11. There's no error message. It simply says "No posts match your query," which is not true. I posted the search engine code under "Add a Gadget" on the side bar, using the "HTML/JavaScript" option. I've tried the new search gadget provided by Blogger and the same "No posts match your query" message pops up. Sadness. Any advice?

    ReplyDelete
  12. @ Yvonne, I've just searched at your blog for "Chicken" and it showed me one post with title containing "Chicken" so what's wrong?

    http://4.bp.blogspot.com/_wa6zL1GRiOs/S-G8XkmCDLI/AAAAAAAAFEw/5_8i4I9QWLU/s1600/Help+Search+Engine+Pic.PNG

    ReplyDelete
  13. Funny that you chose chicken, because that was one of my searches as well. There is more than one post that has chicken in the title or body, but the search only finds one post. I also tried teriyaki, banana, cake, butter, and pancakes and got no matches. Did you try any other words? If so, did it work for you? Thanks for looking into this - I really do appreciate it.

    ReplyDelete
  14. @ Yvonne, the normal search engine can only find words in the title. Currently, you've installed the Blogger search gadget and I think it will display results only out of those posts which have already been indexed by Google. Anyways, try creating a Google Custom Search Engine, that might help.

    http://www.google.com/cse/

    ReplyDelete
  15. Thank you for your help. :)

    ReplyDelete
  16. Bilal, this is a great search feature. Problem is, it only returns the last 20 posts. Anything beyond the most recent 20 posts returns a search result of 'No posts matching the query'. Any idea why?

    ReplyDelete

Note: All comments will be moderated.