Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How do I add the Technorati search box to my Web site?

My question is about the Technorati search box. How do I move the search box over to the right so it's not jutting outside the sidebar?

Dave's Answer:

I think that there's a more general question here about

For example, if you wanted to duplicate the search box from Ask Dave Taylor on your site, you'd view the source and identify the following fragment of HTML:

<form method="get" action="http://www.intuitive.com/blog/mt-search.cgi">

<input type="hidden" name="IncludeBlogs" value="9" />

<input type="hidden" name="Template" value="linksearch" />

<label for="search" accesskey="4">Search this site:</label><br />

<input id="search" name="search" size="16" /><br />

<input type="submit" value="Search" />

</form>

Drop that onto your page and, voila, an instant Ask Dave Taylor search box:

The exact same holds true for Technorati. Go to their site, View Source, and you'll identify the following as the HTML for their search box:

<form id="searchform" method="get"

   action="/cosmos/search.html">

<input type="hidden" name="rank" value="" />

<input id="st" type="text" name="url" size="35"

   maxlength="127" value="" />

<input type="submit" class="submit" value="Search"

   title="Technorati: Search Results" />

<label for="st">Keyword or <abbr

   title="Uniform Resource Locator">URL</abbr></label>

</form>

Actually, you'll have to make a tiny tweak here: the action needs to be rewritten to include the full base URL, so instead of saying "/cosmos/search.html" it should instead be "http://www.technorati.com/cosmos/search.html". Make that change and:

In terms of layout and formatting, a form is just a block of HTML code, so you can drop it into a <div>, for example, and push the bits around as you so desire.

Want to match the green background of the Technorati site itself, but have the entire box be 250 pixels wide? Use the enclosing CSS style of:

<div style="background-color:#88bb22;width:250px">

If an element of the form proves too big, you can always change the parameters too. In this case, the text input field is probably going to be too wide, so change the parameter size="35" to something smaller. Here's how that might look:

Long answer to a simple question! I hope this helps you accomplish what you seek on your page.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: CGI Scripts and Web Site Programming (Article 3989)
Tagged:
Previous: Saving Email Addresses in Microsoft Outlook Express?
Next: My Windows PC never sees Sony PSP USB connection?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Thanks for the DIV CSS tip.

I will add it to my related post http://labnol.blogspot.com/2005/04/let-visitors-search-your-blog.html

Posted by: amit agarwal at May 8, 2005 8:27 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!