How to upgrade your 404 Not Found Page in Blogger

You must be known to 404 error pages, they show up when a visitor end up visiting a page or URL that is either broken or no longer exists. Therefore, having a useful 404 error page could be handy in improving your sales and not making a dead-end for your users. You can improve your 404 page, by providing some options or set of instructions to visitors to work around. In this article, we will show you how to improve your 404 not found page in blogger, so that you can make your 404 error page not only useful but engaging as well.

How 404 Error Page looks like in Blogger?

Let’s be honest, before landing on this posts you have always ignored your 404 error page not because you don’t want it to improve but it just lacks interests. Check out the screenshot below that shows how a default blogger 404 page looks like:

The above screenshot clearly shows that it is not a useful 404 page.  As a user yourself, you hate when an error pops up that doesn’t have any way to work around? 

The same way you need to help your users by providing them some set of options that they can do to find the relevant topic that they are looking for. You can help them to find exactly the right page by providing a search ability on your 404 page and lots of creative things that you can do.

How to Customize your 404 Page in Blogger:

The very first thing you can do to make your 404 page useful for your users it to customize it with your own creativity. Go to Blogger >> Search engine Preference >> Custom Page Not Found.

We have already covered how to create a custom 404 page in blogger so be sure to read that resource as well.  You can surely use this feature to add useful tools and elements like asearch engine, achieve widget, recent posts and etc.

This will help your visitors to look for the best fit, according to their interests.

Display Search Widget on 404 Page:

To display a search widget on your 404 page, just paste the following piece of coding in “Custom Page Not Found” in blogger settings.  Once done you have to make your own Custom CSS to support the style of your template.

<form method='get'>
<div id='search'>
<div class='search'>
<input id='s' name='q' onblur='if (this.value == &#39;&#39;) {this.value = &#39;Search the site&#39;;}' onfocus='if (this.value == &#39;Search the site&#39;) {this.value = &#39;&#39;;}' type='text' value='Search the site'/>
<input id='button' style='vertical-align: top;' type='submit' value='Search!'/>
</div></div>
</form>

If you are already using a custom search widget, then it will automatically inherit CSS from your default search engine.

Display Recent Posts on 404 Page: 

The method is again the same, you need to paste the following code in blogger settings in the location we have mentioned above. This will simply displays recent posts on your 404 page.

<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
 <script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

You can make it look more attractive by applying CSS according to your desire needs.

Display Popular Posts on 404 Page:

In the past we have already showed you how to display popular posts on your sidebar. However, here we are showing how you can add them in your 404 page as well. The method is the same as we have told above, just paste the following code in “Custom Page Not Found” in blogger settings.

<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.yourwebsiteurl.com/
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;"><a href="http://www.mybloggerlab.com/2014/06/how-to-display-most-commented-posts-in-blogger.html">Make your own</a></span>

We hope this article would have helped you in making your 404 page more useful  and engaging in Blogger. No matter you are beginners or an expert feel free to work around with code and use your creativity to make your 404 page attractive.

We have some pre-made attractive 404 not found page design for blogger so that you can just copy and paste in your site.

Share on Google Plus

About Education

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.