Blogger Ever

Step-by-step guide to design creative "No result found" page in Blogger

In detail guide to design a creative "No result found" page in Blogger. You will find some creative and attractive designs that you can implement with yours.

"No result found" page is displayed when a search query returns no result and you want user to be still interacted with your blog. This simple tutorial will guide you how to detect that search query has no result and customize it with native options in Blogger.
Steps to design your "No result found" page are:
  1. Find the main includable tag in blog post area.
  2. Add condition for search query pages.
  3. Detect if no post is found.
  4. Add your HTML or important markup.
  5. Then customize it with CSS.
These steps are further described in detail in this post.

1. Find the main includable tag in blog post area

First, let me clear the reason to add code in this area. The method of detecting the search result count is native and it works in blog post area, it is because we are going to use an XHTML tag of Blogger that is:
This particular tag works under blog post area, so lets find it by these simple steps.
  1. Go to Blogger > Template > Edit HTML
  2. Backup your code if you aren't confidence to play with your code
  3. Click on jump to widget button
  4. Select Blog1
Once you are on Blog1 widget, that is your blog post area, you need to find main includable tag which should be the first includable tag. Here is a screenshot.

Now we have our includable main tag. Lets move to next step.

2. Condition for search query pages

Putting up a page without this step would show up whenever there would be no post on the page, well there are certain conditions like 404 error page when there is no blog post. For search query based pages we have a tag that is: data:blog.searchQuery. If we add it in a conditional tag then it would return true if it is a search query page.

To add this in your blog post area, expand your main includable tag, then it is better to add the below code before closing of includable tag; that is at the end.
<b:if cond='data:blog.searchQuery'>
<!-- Remaining code goes here -->
Between this tag we will add our code, but before that we need to follow one more step.

3. Detect if no search result is found

In above code we are going to add one more conditional tag that will return true if the number of results are zero.
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts == 0'>
    <!-- Remaining code goes here -->
If you are not aware with data:numPosts then here are few points you should know:
  • It does not return the total number of post, instead number of post present on that page.
  • Works in blog post area only.
Now we have done some good progress. Lets move on inserting the markup.

4. Add markup

Whatever we are going to add in between these two tags will be displayed in the page. So I will go for the simplest one.
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts == 0'>
    <div class='no-result'>
      <h3>No Result Found</h3>
      <p>Try something else</p>
This is simplest of all. A simple heading and a paragraph.

5. Customize it!

In my case there is not much to customize, but you can use your creative idea to do what ever you want. Customization can be done with CSS and the code goes before ]]></b:skin>.
.no-result h3{
.no-result p{
  font:italic 400 1.2em 'segoe ui',sans-serif;
Above is a simple demo code.

Inspirational designs for "No result found" pages

I gathered some of the inspirations around some of my most favorite blogs/websites.

1. The Next Web

2. Search Engine Land

3. Microsoft


5. The Verge


The best thing you can do is to keep the visitor on your side even if no result is found. Sometimes queries are logical but never found on a blog, keep them interested in you by offering them some links, an interesting message to search again or some related search quires. Share this post if you found it useful and comment below to share your thoughts with me.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.