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. mayguhman reblogged this from yeahitsray
  2. bloodyozzie reblogged this from yeahitsray
  3. tell-the-stars-hello reblogged this from yeahitsray
  4. wonderfullyresources reblogged this from yeahitsray
  5. neptvna reblogged this from yeahitsray
  6. gigiviv reblogged this from yeahitsray
  7. chocochipbiscuit reblogged this from yeahitsray and added:
    I am absolutely inept at coding and this was excellent. I now have a search box!
  8. baro-o reblogged this from yeahitsray
  9. tradinginwhoivebeen reblogged this from yeahitsray
  10. reginababyallalone reblogged this from yeahitsray and added:
    Helpful to me tonight, I now have a Search Box on my blog :D
Blog comments powered by Disqus