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)
return false;
// -->

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" />

    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>

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”>
</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. cupcake-pls reblogged this from yeahitsray
  2. asterusflight reblogged this from yeahitsray
  3. delinage-other-stuff reblogged this from yeahitsray
  4. happy-panic reblogged this from yeahitsray
  5. green-mantis reblogged this from yeahitsray
  6. lelaspoopson reblogged this from yeahitsray
  7. mayguhman reblogged this from yeahitsray
  8. bloodyozzie reblogged this from yeahitsray
  9. tell-the-stars-hello reblogged this from yeahitsray
Blog comments powered by Disqus