How to install Google Custom Search on a tumblr blog

I was kind of surprised that Gary Vaynerhcuk doesn’t use Google Custom Search on his tumblr blog (upper right search field).  Google custom search gives you access to Google’s search algorithm, presents results clearly in a way that users are accustomed to, and it gives you statistics/data on how users are searching your site–for free!

Is your company missing out on this valuable marketing reSEARCH data?

This Summer I saw a sweet video tutorial about Google Custom Search by Chris Coyier at CSS-Tricks.com.

I had installed Google Custom Search a couple of times on WordPress websites and I just installed Google Custom Search on my SonomaMarketing.net tumblr blog (left sidebar).

Here is how I did it:

Step 1: Go to Google Custom Search and create a custom search engine.

• Sites to search: *.mydomain.com/*
• Look and feel–>choose a hosting option: “Google-hosted page” (if you can figure out how to do it with an iframe then you have mad skills and please let me know how)
• Get the code:

<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="000028270302408347927:o-zsaoblxxg" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</form>

<input type="text" id="s" value="Search..." name="as_q" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

<input id="search-button" type="image" value="Search" name="sa" alt="search" src="http://drho.ro/images/mag.png"  />

Step 3: Style the css:

#cse-search-box	  {height: 30px; width: 200px; background: none !important; border: none !important; padding-top: 9px; }

#search-button       {position: absolute; top: 13px; left: 203px;}

#s                   {width: 200px; height: 23px; font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif; font-size: 23px; color: #A4A5A1; font-style: italic; margin: 0px; background: none; padding-left: 5px; }

Rejoice.

I’ll try to make a screencast of this next week in class.