How Add Blog Search Box Code To Blogger

How to add a search box to your blogger,as default template doesn’t provide any search codes or search box in your template so as readers can search of in your blog or web from your blog.There are many methods of adding search box to your blog at different places you want and different types of codes for search which you want to be done in our blog.Now i will explain where to add these codes and what codes to add to make a seach box in your blog.

Lets first of all start with the search codes which you need to add in your blog. The codes are below:-

First

<form id=”searchThis” action=”/search” style=”display:inline;” method=”get”><input id=”searchBox” name=”q” type=”text”/> <input id=”searchButton” value=”Go” type=”submit”/></form>

Change the text in red to any text like search or hit you want to display in button to hit the search.

Your search box will appear like this below.

Second

If you want to add some styling like this new sample below:-

Use these codes

<form id=”searchthis” action=”/search” style=”display:inline;” method=”get”>
<input id=”search-box” name=”q” size=”25″ type=”text” style=”background: #ccccff; border: 2px solid #000066″/><input id=”search-btn” value=”Search” type=”submit” style=”background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;”/></form>

Edit the colors or styling in red in above codes to change the styling of search box to adjust in your template.

Third

Now if you want to add image in place of search button like below:-

Use these codes:-

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16×16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Change the image url in red above with the url of the image you want to use.and hope you would have no problem in using any of the codes.

Now How To place search Box at different places in blogger blog:-

To Place it in sidebar:-

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear.
Select HTML/JavaScript and add the above codes.

If you want to place search box in header read this tuorial Embed search Box In Blogger Header.

I hope you will love this tutorial.

60 Comments

  1. Jahz March 19, 2009
  2. B.Tech ebooks April 5, 2009
  3. Anonymous April 11, 2009
  4. fresh365 April 22, 2009
  5. Philip Kennedy May 8, 2009
  6. Gabbi May 24, 2009
  7. The Krew June 3, 2009
  8. yourhypnotist October 5, 2009
  9. SATHEESH KUMAR K October 13, 2009
  10. Tomasse October 16, 2009
  11. Grace November 2, 2009
  12. Piscean November 24, 2009
  13. Attaullah khan December 15, 2009
  14. Anilkumar January 10, 2010
  15. thepoal January 25, 2010
  16. Manuel February 22, 2010
  17. Anshul February 22, 2010
  18. Moderator February 26, 2010
  19. Anshul February 26, 2010
  20. Moderator February 26, 2010
  21. Anshul February 26, 2010
  22. Moderator February 26, 2010
  23. Gina February 27, 2010
  24. Gina February 27, 2010
  25. Anshul February 27, 2010
  26. Linus Brännström February 28, 2010
  27. Anshul March 1, 2010
  28. Linus Brännström March 1, 2010
  29. ZOE RAYMOND March 1, 2010
  30. Anshul March 2, 2010
  31. ZOE RAYMOND March 2, 2010
  32. HQ Collections March 5, 2010
  33. buxer March 10, 2010
  34. Anshul March 10, 2010
  35. Evelina March 10, 2010
  36. blue March 13, 2010
  37. HACKER March 14, 2010
  38. Anshul March 16, 2010
  39. Constantine Connections March 26, 2010
  40. Shahrukh Jokhio March 27, 2010
  41. Just Looking April 12, 2010
  42. BlogMaster June 27, 2010
  43. Anshul June 29, 2010
  44. hello July 3, 2010
  45. Anshul July 3, 2010
  46. Martin Kocev July 5, 2010
  47. randy vaughan July 26, 2010
  48. Diego F. Cisneros-Heredia August 4, 2010
  49. Anshul August 5, 2010
  50. nuno miranda ribeiro August 5, 2010
  51. LDII Sidoarjo August 29, 2010
  52. M. Satrio Wibowo August 30, 2010
  53. d September 1, 2010
  54. Anshul September 1, 2010
  55. d September 2, 2010
  56. Asia Private Wealth Management September 13, 2010
  57. Joy Reynaldo October 22, 2010
  58. l'Iconoclaste June 4, 2011

Leave a Reply