How to Improve your 404 Not Found Page in Blogger : Blogger Tips

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.

Now Copy The Code

<form method='get'> <div id='search'> <div class='search'> <input id='s' name='q' onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' 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.

Autor : Mian Fx