Yeah It's Ray
Tumblr Search Box

Want a Tumblr Tag Search Box that actually works?

Here’s how to get a simple Tag Search for your Tumblr.
(You can test it on my tumblr

Disclaimer: 1. Please back up your theme before trying this, should anything go wrong.
                   2. This method depends a lot on your Theme. I’ve tried to generalize as much as possible. So please bear with me. Try and figure out the modifications on your own. You can always leave a comment if stumped.

Basically, this needs two blocks of code.

First, add this just before your </head> tag in your Custom Theme.

 

<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://yourtumblrURLhere.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>

Next, the tricky part.

If you don’t already have a search box provided by your theme, and want one that also includes a submit button, directly add this code somewhere between the <body>…</body> tags.

 

<form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Submit" />
</form>

    Thats it. Now save and close. Play around with the placement to get where you want your search box exactly.

If your theme does provide a search box (and obviously it doesn’t work much) , look for the block of code that has the search code. Mine was embedded in the <div id=”search”> block. Now you have to modify the code to suit the above snippet.  

Here’s what I originally had:

<div id=”search”>
<form action=”/search” method=”get” id=”search-form”>
<input type=”hidden” name=”t” value=”{Name}” />
<input type=”hidden” name=”scope” value=”all_of_tumblr” />
<input type=”text” name=”q" class="query" value="{SearchQuery}" />
<input type=”submit” value=”{lang:Search}” class=”submit” />
<div class=”clear”></div>
</form>
</div>

And this is after applying the new code :

<form id=”search-form” onsubmit=” return handleThis(this)”>                        <input type=”hidden” name=”t” value=”{Name}” />
<input type=”hidden” name=”scope” value=”all_of_tumblr” />
<input type=”text” name=”number" value="Search my tags!" onblur=”this.value = this.value || this.defaultValue;”  onfocus=”this.value == this.defaultValue && (this.value = ”);”/>
<input type=”submit” value=”{lang:Search}” class=”submit” />
<div class=”clear”>
</div>
</form > 

Carefully note the changes:
    All the Strikethroughs have to be changed to the corresponding underlined code.

    Also, the italicized portion of the <input> tag is a simple “clear field" script that will clear the "search my tags" text when the user clicks the search box.

Try it out. Post your feedback/comments here. 

Happy coding! 

And don’t forget to Like   and reblog! 

  1. character-shoes-and-misery reblogged this from yeahitsray
  2. lustercandy reblogged this from yeahitsray
  3. greyfelixcat reblogged this from yeahitsray and added:
    This saved meee!!!
  4. myfuckingtelevisionset reblogged this from yeahitsray
  5. romagandasesa reblogged this from yeahitsray
  6. computerman12 reblogged this from yeahitsray
  7. amollyakatrina reblogged this from yeahitsray
  8. scienceaberration71 reblogged this from yeahitsray
  9. rirenheichou reblogged this from yeahitsray
  10. crisises-and-confidants reblogged this from yeahitsray
  11. rucbarthatbowtiesarecooldw reblogged this from yeahitsray
Blog comments powered by Disqus