SEO & to Improve your Error 404 Not Found Page in Blogger

you must be known to error 404 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 error 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 error 404 page not only useful but engaging as well.

How to Customize your error 404 Page in Blogger:

The very first thing you can do to make your error 404 page useful for your users it to customize it with your own creativity. Go to Blogger >> Search engine Preference >> Custom Page Not Found.
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 defaultsearch engine.

Display Recent Posts on error 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 error 404 page.

<style>
img.label_thumb {
float: left;
margin-right: 10px !important;
height: 65px;
/* Thumbnail height */
width: 65px;
list-style: none;
display: block;
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}

ul.label_with_thumbs li {
padding: 8px 0;
min-height: 65px;
margin-bottom: 0px;
border-bottom: 1px dotted #999999;
list-style: none;
display: block;
}

.label_with_thumbs li {
list-style: none;
padding-left: 0px !important;
list-style: none;
display: block;
}

.label_with_thumbs a {
text-transform: uppercase;
}

.label_with_thumbs strong {
padding-left: 0px;
}
</style>
<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 error 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://goo.gl/bL3I8l”>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.