Photobucket

List of Firefox Add-ons to help you Saves Time (Episode #1)

Firefox has tons of extensions that enhance the functionality of the browser. You can saves your time while you are surfing the net.... 

Tired of paid Zip utility? 3 Free WinZip Alternatives for you! (Windows)

For the past 3 months now, i have been using WinZip to compress my digital photos to make the size smaller so that it fits in a DVD.... 

How to: Add A Search Box To Blogger

by DJYaNo on April 19, 2009 | Twit this | Print this






You can add a search box on your blogger templates, to give your readers a chance to search your blog. The advantage by adding this search box is that the result is showed in the main body of your blog unlike the search box in the top navigation bar.

Now under Template go to Page Elements tab, click “Add a Gadget” at the place where you want your search box to appear.

gadget

Select “HTML/JavaScript”.

gadget1

Add the code below and click Save.

add code

Note: This code only works on blogger platform.

Your search box example:-

search box

Blogger Search Box Code

1
2
3
4
5
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>YOUR SEARCH BOX TITLE<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form>

What you need to edit:-

Change the value YOUR BLOG URL to your blog URL.

1
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">

Example:-

1
<form id="searchthis" action="http://www.djyano.blogspot.com/search" style="display:inline;" method="get">

Change the value YOUR SEARCH BOX TITLE

1
<strong>NAME OF YOUR BLOG<br/></strong>

Example:-

1
<strong>My Search Box<br/></strong>

Your final search box will look like this:-

My Search Box

You can also edit the search button. Replace “Search” to “Hit” or “Go“.

1
<input id="b-searchbtn" value="Search" type="submit"/>

Example:-

1
<input id="b-searchbtn" value="Hit" type="submit"/>

Your Search box button will look like this:-

My Search Box

You can also edit the search bar width. Replace the value“size=”20″”.

1
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>

Example:-

1
<input id="b-query" maxlength="255" name="q" size="40" type="text"/>

Your Search box width will look like this:-

My Search Box

Good luck and don’t forget to Subscribe to The-Online-Quest via RSS or you can receive daily updates via Email.


Comments

3 Responses to “How to: Add A Search Box To Blogger”
  1. I don’t usually reply to posts but I will in this case, great info…I will add a backlink and bookmark your site. Keep up the good work!

    I’m Out! :)

  2. Finally someone who can write a good blog ! . This is the kind of information that is useful to those want to increase their SERP’s. I loved your post and will be telling others about it. Subscribing to your RSS feed now. Thanks

Trackbacks

Check out what others are saying about this post.
  1. [...] the original:  Search box on blogger blog? Increase your reader Experience! | The … Posted in Blogger, Blogging, Technology, WordPress | Tags: stuffs, such-as-technology, [...]



Speak Up

Tell us what you're thinking about this post.
Get a gravatar to show your pic with your comment.



Copyright © 2008 - 2010 The-Online-Quest All Rights Reserved · Powered by WordPress | Redesigned by Mr Javo