Search Bar CSS For Blogspot - Monetize Using PredictAd

Wondering how to put on search bar form for your blog? Here it is the global search bar for your blogspot. This css as understood by me, is easiest to apply. What you will need to do is copy paste the code into your add a gadget (html/Script) box.

Only have 2 compartment, first input for search input bar and second input for search buttom/action.

Search form CSS

1. There are so many GUI can be done to express your search form but the basic is just look like this.
and the css code is as simple as this.
<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>

Look for the value Go, you can change it to anything you Search

Also, see that action="/search" you can change it to anywhere (eg: if you already have an other stand alone search engine result page out there).

2. Finished with the basic, feel like ready for some customization? you are always free to put on style="". Anything for GUI css inside including border, background, padding to make the bar bigger or something like I did with myfundarkside search form.

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text" style="background: #FFFFFF; border: 1px solid #94A3C4; padding:6px 0 6px 6px;" /><input id="searchButton" value="Search" type="submit" style="background: #ECEFF5; border: 1px solid #94A3C4; color: #3A59BB; padding:5px 5px 5px 5px;" /></form>

3. or you can place text inside the search input and change the button with an image/icons as you pleased.

<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="" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Monetize your search form.

Finished. However if you are money making freak, you too can use your blog search bar as an other non obtrusive, simple money maker for your blog. Sign up for PredictAd publisher and put on the PredictAd script inside your <body> (blogger: template HTML editing section).

Since you already have your search box installed, what you will need is to put on your search bar id (eg: myfundarkside ID is inside id="searchBox", yes the id is searchBox) inside predictAd script (automatic discovery for ID is already there, what required is for you to put on your blog adress.

If you like to channel your result into PredictAd search result, just replace your search bar action="/search" to action=""


1 comment:

  1. Very good post. I will be facing a few of these
    issues as well..

    my weblog musicos