Add Search form to Blogger Beta Template

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 .

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

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

  1. Thank you for this search form on your fantastic site

  2. What about the css?

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

  4. Terimakasih banyak , semoga sukses .

  5. thanks for the tips

    it works for my blog 🙂

    muchos gracias

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

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

    check in my blog:

    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

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

  9. It just shows me my articles, how about a listing code, like Google search bar for blogger?

Leave a Reply

You must be logged in to post a comment.