Add Tumblr Search Box to your Tumblr

Published by Tumble Guy on March 3rd, 2012 |

Some tumblr themes like the one this site’s tumblr already lets you add a search form to your tumblr page. However, some doesn’t.

But why would you want to add a tumblr search box?

A Tumblr search box is a good navigational addition to your to your page. It makes it easier for your visitors and followers to look for certain posts or search for your tags. Overall it adds more value to your tumblr.

How do you Add a Search Box to your Tumblr?

If you don’t already have a search box on your tumblr page, or your tumblr theme doesn’t have an option to add one, you can manually add one yourself. The process is easy.

First, go to your tumblr theme’s HTML code. Dashboard → Customize Appearance → Edit HTML

Next copy the code below and paste it after the < head > tag. This will enable your search box in your theme.

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

Once you’ve pasted the code above, copy the code below and paste it where you want your search box to appear. For example, you can paste it to your description section.

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

Save your Settings. Click on Update Preview → Save → Close

Customize your Search Box

If you don’t want a submit button and just want people to hit enter to search, delete the following line of code:
```
<input type="submit" value="Search" />
```
If you want to change the search box text, replace the word SearchBoxText with the text you want to show
If you want to change the submit button text, change SubmitButtonText
If you changed your mind or if you already have a search box and want to delete it, find following tags, delete it and everything between it.
```
<form>
</form>
```

About the Author

Tumble Guy Tumble Guy is the chief-monster-editor and founder of Tumbtips. He writes killer tutorials for Tumblr, provides great tips for budding Tumblr superstars, and thinks you should like Tumbtips Facebook page and follow them on Tumblr.