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. happy-panic reblogged this from yeahitsray
  2. tlpiel reblogged this from shishatachi
  3. green-mantis reblogged this from yeahitsray
  4. lelaloveson reblogged this from yeahitsray
  5. mayguhman reblogged this from yeahitsray
  6. bloodyozzie reblogged this from yeahitsray
  7. tell-the-stars-hello reblogged this from yeahitsray
  8. wonderfullyresources reblogged this from yeahitsray
Blog comments powered by Disqus