Add Search form to Blogger Beta Template

29. Jul, 2008 12 Comments


At first Adding search form to blogger was difficult but now Blogger Accessories has made it easier. We can add search form to blogger in three method . But in this post I am going to concentrate only on Adding custom search form . Custom search form means you can modify the search form look by adding simple CSS style.

this is the screenshot of Search Form Widget

Step 1 : Log in to your blogger template and go to Layout section .

Adding search Form Widget to Blogger Beta : Layout Image

  

Step 2 : Now click Add Page Element , in the List select Add HTML / JAVASCRIPT  and paste the below code thereand save .

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

Now see your blog , there you can see a beautiful search form widget like this ,

I hope you like this hack . you can also add custom search submit buttom , background , etc.

I will tell you How to add Custom CSS to this search Form tomorrow in my next post .

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

If you like this article , then please help us by bookmarking

12 Responses to “Add Search form to Blogger Beta Template”

  1. Ben van Althuis Reply 25. Aug, 2008 at 2:03 pm

    Thank you for this search form on your fantastic site

  2. $ THA GOAT $ Reply 29. Sep, 2008 at 7:04 pm

    thanks

  3. heartnn Reply 21. Oct, 2008 at 10:01 pm

    What about the css?

  4. Shafar Reply 21. Jan, 2009 at 9:52 am

    I suggest you to update this post on how can we add more attractive search box with colorful buttons and text. Just a suggestion :)

    Tips Blogger dot Com

  5. AVIANT.NET Reply 24. Jan, 2009 at 3:56 am

    Terimakasih banyak , semoga sukses .

  6. waiyayu Reply 29. Jan, 2009 at 11:57 am

    thanks for the tips

    it works for my blog :)

    muchos gracias

  7. •▬●๋•p.k.áŕừń●๋•▬• Reply 23. Feb, 2009 at 7:08 am

    after wasting a long time i got a right place this is working …

    check in my blog:

    http://www.hacking2all.blogspot.com

  8. Coy Reply 13. Mar, 2009 at 1:35 am

    Oh nice this really works thanks.

    http://wonderfulgeneration.blogspot.com/

  9. Ð@RK ЀV!Ł Reply 27. Mar, 2009 at 9:53 am

    Thanx from http://dotmonster.blogspot.com

  10. Voip Services Reply 11. Jun, 2009 at 7:04 am

    http://www.voip-services-provider.co.uk
    Voice over IP (VoIP) software is used to conduct telephone-like voice conversations across the internet. There are many free VOIP Software available on the webs for download. VOIP Software is popular because VOIP phone service is often cheaper than traditional phone service, and is becoming more popular for both business and personal calls.
    VoIP Software

  11. Blogging Tips Reply 23. Aug, 2009 at 10:41 am

    I want to add this search bar in the top navbar which I have created how to add??? Can u help

  12. Preepe Reply 21. Dec, 2009 at 6:09 am

    now I among your readers

Blogger Hack, Blogger widget