How To Add Search Box To Tumblr

Some Tumblr themes, like the one that comes by default each time you start a tumblr blog, come with a built-in Search Box on the sidebar, most others though, don’t have any

Besides, the default search engine box for your Tumblr doesn’t work pretty well, bringing nonsense results.

That’s why adding a search box that look for both tags and content does much better. Follow the tutorial below and get your own tumblr search engine [do not mistake it with the dashboard tumblr search, which look for tag results in the whole Tumblr universe.]

How To Add Search Box To Tumblr

Go To Customize >> Edit HTML >> Grab the tag search box code below and paste it right after the <HEAD> tag. After That Save

<meta name="text:Search Label" content="" />
<script type="text/javascript" src="http://static.tumblr.com/p2evvtm/Wycm17d1m/tumblr_search_box.js"></script>

Now, paste the following code snippet within your description box (or actually any other spot within your tumblr theme, as long as you know where).

<form onsubmit="return tagSearch(this)">
    <input type="text" name="tag" value="Search Our Blog" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '') {this.value='{text:Search Label}'}" />
    <input type="submit" value="Search" />
</form>

Click on Update Preview >> Save >> Close
NOTE: Once you save, you will have to modify the text that goes within the tag search box. Look for “Search Our Blog” and change it to whatever you feel like.
Finally, if you want the submit/search button to be gone, just erase the following line of code from the form given above:

<input type="submit" value="Search" />

And If You Want To Remove the Tumblr Search Box

Just in case you already have a search box within your tumblr and want to delete it, look for the code that is located within the following tags (the tags will have more parameters within them), and make sure you also delete those tags. The trick when looking for it is to just search for form, or onsubmit.

<form>
</form>

Another way of easing the navigation through your Tumblr Blog, is creating “categories” a.k.a. tagged pages, that basically tell your users the main topics your blog is about.

2 Responses to "How To Add Search Box To Tumblr"

Roy
December 5, 2012 at 4:37 pm

I just used this tutorial and it works great. Thanks.
But can I add a piece of code to position the search box e.g. to the right of my site?
When I customize my theme and insert the code in my description, it looks good; the button next to the box and nicely tight under my description.
But when I save and close suddenly it uses quite a lot of space above and under. Can I adjust this? And why is the search button now under the searchbox?
Roy

[Reply]
s gordon
January 1, 2013 at 8:31 pm

Hi! This was a great tutorial as I wanted to add the search function so people can search for songs rather than having to scroll through each page. But I have a question: the search function is showing up but I can’t type anything into it and I cant even click on the submit button. Any reason why that might be happening? Thank you for your help!

[Reply]

Submit a comment Cancel reply