How to Add Custom Search Box

You can easily add Tumblr Search Box on your blog. You can customize it your way. It helps to engage users and increases page views.

How to Add Tumblr Search Box

How to Put Search box on Tumblr

Above are two screenshot of my Search Box. I looks professional and cute too. It helps to engage users with more and more page views. It helps user to search our blog what they want to read on our blog.

Tumblr Search Box

Basically, Search box works based on tags. Suppose, a visitor searched for “Google”, all posts which has been tagged with Google will be appear on search page. Isn’t it cool?

However, There is some limitations. Suppose, You never tagged “Google” and visitor searched for “Google” then in this case a blank page will be appear with the notice that nothing found with this tag or something. You can customize this page too.

Below is the HTML codes for my Search box, You can copy them and paste in your description box or under sidebar.

{block:IfShowSearch}
<form action='/search' id='nav-search' method='get'>
<input name='q' type='text' value='Search...' value='{SearchQuery}'/>
</form>
{/block:IfShowSearch}

Additionally, You can customize them with some relative results if there is nothing related to that search tag. Below is exact HTML codes which i have used in my theme to show related result if there is nothing related for such tag which has been searched. You can use that and paste below HTML codes just after </block:Posts>

{block:SearchPage}
{block:NoSearchResults}
      <article>
        <h2>Please check below Articles for <b>"{SearchQuery}"</b>.</h2><br>
        <ul>
<li><a href="http://tumblings.net/post/41365113214/tumblrtutorials" title="Tumblr Tutorials" target="_blank">Tumblr Tutorials</a></li>
<li><a href="http://tumblings.net/post/43918253339/tumblrtricks" title="Tumblr Tricks" target="_blank">Tumblr Tips and Tricks</a></li>
<li><a href="http://tumblings.net/post/42521709876/tumblrthemegarden" title="Theme Garden" target="_blank">Tumblr Theme Garden</a></li>
<li><a href="http://tumblings.net/post/42155217526/tumblrcodes" title="Tumblr Codes" target="_blank">Tumblr HTML Codes</a></li>
<li><a href="http://tumblings.net/post/41971769043/tumblrwidgets" title="Tumblr Widgets" target="_blank">Tumblr Widgets</a></li>
<li><a href="http://tumblings.net/post/41777193559/tumblrcursorcodes" target="_blank">Tumblr Cursors</a></li>
<li><a href="http://tumblings.net/post/38737883796/funnytumblrgifs" target="_blank">Tumblr Effects</a></li>
</ul>
       
        <h3>Please use Ask box or Contact us if you couldn't find <b>"{SearchQuery}"</b>.</h3>
        {/block:NoSearchResults}
      </article>
      {/block:SearchPage}

Save your Tumblr theme and check your new Tumblr Search box and don’t forget to replace relative links.

FAQ

1. I just tried the custom search bar out, but somehow it’ll only show the latest couple of results and not scroll infinitely until the search results are over. Is there any way to prevent this?

I’m sure that there is no infinite scrolling on your search pages. Please attach page link for better reference. You can try Google search box too.

Reference

Google Search Box


Related Posts For "How to Add Custom Search Box" are:

Show / Hide all 21 notes

Why we are here:

About Tumblings.net updates Tumblr help tutorials time to time to customize Free Tumblr Themes, HTML Codes, Cute Backgrounds, Layouts, Widgets and Cool Quotes 2013.
Find us on Google+, Facebook and Twitter

Alexa About Us