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

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

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


  3. 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).

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


  5. Click on Update Preview >> Save >> Close
  6. 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.
  7. Finally, if you want the submit/search button to be gone, just erase the following line of code from the form given above:

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

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

Add Comment
  1. dan

    June 2, 2012 at 5:19 pm

    this doesn’t work :(

    It just searches tags like normal.

    How does one search post content?

    [Reply]

  2. Aggr

    August 9, 2012 at 10:22 am

    Thanks for the post. It looks like the above code, when used, searches just the tags and not words from the post. Any modifications to make word search work?

    Thanks in advance.

    [Reply]

  3. caitlin lowrey

    September 1, 2012 at 3:26 am

    Just want to know how to add people.

    [Reply]

  4. asncookie

    September 13, 2012 at 11:44 pm

    I can’t find the “head” on my Tumblr theme

    [Reply]

  5. 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]

  6. 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]

  7. Alessandro

    February 5, 2013 at 4:04 pm

    I tried to add this html to my tumblr but it doesn’t work: could it depend on the fact that I’m trying to add this feature to a private blog?
    When I try to search in my blog using the search box created using your tutorial the only thing I get is the usual tag search (i.e. it will find all the posts tagged with the search word rather than all the posts containing the search word within the text).

    Any suggestions?

    Many thanks!

    Alessandro

    [Reply]

  8. CS

    March 17, 2013 at 3:33 pm

    This was easy to read and install. However, it only searched tags for me. After I would type a word into the search box, it actually would come back saying “posts tagged ‘insert searched word’ ” which makes it useless for me. It says above it searches content but however I did not find that to be true. I followed all of the steps above and even removed the Tumblr search box. Any additional help would be appreciated. Thanks.

    [Reply]

  9. Praed

    March 29, 2013 at 4:17 am

    Hi, thanks for the tip. Only one problem- it searches for tags and HTML only and not for text.

    Error message: The URL you requested could not be found.

    How do I search for text within my own blog? Thanks

    [Reply]

  10. Alexa

    March 29, 2013 at 9:48 pm

    I cannot find in my HTML. I’ve tried with Ctrl+F. What should I do?

    [Reply]

  11. Lee

    April 19, 2013 at 1:54 pm

    I was able to insert the code for the search bar and it appears fine, however it does not work. When I search for words in tags or even in text, it responds: The URL you requested could not be found. Please help!

    [Reply]

  12. me

    May 7, 2013 at 1:33 am

    how can I change the color of the text inside the box???? help please!

    [Reply]

  13. Claus

    May 8, 2013 at 6:07 pm

    Hi,

    I’ve been looking very hard to find a search function that searches tags as well as content. This one claims that it does, but I can’t seem to get it to work. All it seems to do is refer the user to a /tagged/{SearchQuery} url which only searches tags. Help?

    Kind regards,
    Claus

    [Reply]

  14. Kavya Seth

    June 11, 2013 at 9:37 pm

    When I put this on my theme, it doesn’t work properly. You can’t type into the search box, you can only right-click and select the “Paste” option to put text in the box. The search button works fine though. Does anyone know what’s wrong or who can help me?

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>