Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


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.


More Useful HTML, JavaScript and Web Site Programming Articles:
✔   How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔   Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔   Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔   How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔   How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  








Reader Comments To Date: 1

amit agarwal said, on May 8, 2005 8:27 AM:

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

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

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











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 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. Further, 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. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.