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    

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 ...
Starbucks coffee cup 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!











Remember personal info?


Please note that I will never send you any unsolicited commercial email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Uniblue: Free Virus Scan

Follow me on Twitter @DaveTaylor

Search
Find just the answers you seek from among our 2300+ free tech support articles by using our Lijit search engine.


Help!





Subscribe to
Ask Dave Taylor!

Add to Google Reader
Add to My Yahoo!
Subscribe in NewsGator Online

RDF   XML

Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.


Recent Entries
Book Links
© 2002 - 2009 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.