How to Show a Professional and SEO Navigation Custom 404 Errors Blogger Page

A customized professional and nice looking 404 page provides your readers with a better user experience and prevent them from experiencing unfriendly error messages. I have included lots of options for your users landing on 404 page for better navigation instead of blogger common message.

Live Demo

Step-1:
Navigate Settings tab of your particular blog and click on Search preferences.

Blogger 404Errors Settings Page



Step-2:
Click on Edit text link next to Custom Page Not Found [set] under Errors and redirections heading.

Step-3:
Now, paste these HTML codes into the HTML message box.



1

1. div class='SWT-404Errors-Box'><p><b>
2. 404.</b> That’s an error.</p><p>
3. <!-- Tutorial at: http://www.facebosk.com/?p=806 -->
4. The requested URL
5. <script type="text/javascript">var _0xa560=["\x70\x61\x74\x68\x6E\x61\x6D\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E"];var _0xc6f6=[_0xa560[0],_0xa560[1]];var _0xa895=[_0xc6f6[0],_0xc6f6[1]];var swt404ErrorURL=window[_0xa895[1]][_0xa895[0]];
6. document.write("<b>" + swt404ErrorURL + "</b>");
7. </script> was not found on <script type="text/javascript">var _0xb875=["\x70\x72\x6F\x74\x6F\x63\x6F\x6C","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x2F\x2F","\x68\x6F\x73\x74"];var _0xf582=[_0xb875[0],_0xb875[1],_0xb875[2],_0xb875[3]];var _0xc922=[_0xf582[0],_0xf582[1],_0xf582[2],_0xf582[3]];var swtBlogURL=window[_0xc922[1]][_0xc922[0]]+_0xc922[2]+window[_0xc922[1]][_0xc922[3]];
8. document.write("<i>" + swtBlogURL + "</i>");
9. </script></p><a id='swt-button' href='javascript:history.go(-1)' title='Back'>&#171;
10. Return </a> to the previous webpage or
11. <script type="text/javascript">var _0xf049=["\x70\x72\x6F\x74\x6F\x63\x6F\x6C","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x2F\x2F","\x68\x6F\x73\x74"];var _0x396d=[_0xf049[0],_0xf049[1],_0xf049[2],_0xf049[3]];var _0xb2bd=[_0x396d[0],_0x396d[1],_0x396d[2],_0x396d[3]];var swtHomeURL=window[_0xb2bd[1]][_0xb2bd[0]]+_0xb2bd[2]+window[_0xb2bd[1]][_0xb2bd[3]];
12. document.write("visit our " + " <a id='swt-button' href='" + swtHomeURL + "' target='_self' title='Home Page'>" + "Home Page &#187;</a>");
13. </script>
14. <p> You may also <a
15. href='http://www.facebosk.com/contact/' title='Contact Us'>notify us</a> for this error.</p>
16. <p><script>
17. (function() {
18. var cx = '011773649581108137979:jrwmq4__zgs';
19. var gcse = document.createElement('script');
20. gcse.type = 'text/javascript';
21. gcse.async = true;
22. gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
23. '//www.google.com/cse/cse.js?cx=' + cx;
24. var s = document.getElementsByTagName('script')[0];
25. s.parentNode.insertBefore(gcse, s);
26. })();
27. </script><gcse:search linkTarget="_self" as_sitesearch="http://krishnaveniriver.com/">
28. </gcse:search></p><style type='text/css'>
29. html,body{font:15px/22px arial,sans-serif;background:#fff;color:#000;padding:1em} .main-inner .columns {padding:0} .SWT-404Errors-Box {width:100%;height:auto;color:#000;background:#ffff;border:0;margin:1em;padding;1.5em} a#swt-button{display: inline-block;background: #34dbbe; background: -webkit-linear-gradient(top, #34dbbe, #228473); background: -moz-linear-gradient(top, #34dbbe, #228473); background: -ms-linear-gradient(top, #34dbbe, #228473); background: -o-linear-gradient(top, #34dbbe, #228473); background: linear-gradient(to bottom, #34dbbe, #228473); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 1em; padding: .5em 1em;margin:0.375em; text-decoration: none; -webkit-transition:all .8s ease-in-out; -moz-transition:all .8s ease-in-out; -ms-transition:all .8s ease-in-out; -o-transition:all .8s ease-in-out; transition:all .8s ease-in-out;} a#swt-button:hover { background: #2782d7; background: -webkit-linear-gradient(top, #2782d7, #1b6ebb); background: -moz-linear-gradient(top, #2782d7, #1b6ebb); background: -ms-linear-gradient(top, #2782d7, #1b6ebb); background: -o-linear-gradient(top, #2782d7, #1b6ebb); background: linear-gradient(to bottom, #2782d7, #1b6ebb); text-decoration: none; } #navbar-iframe{height:0;visibility:hidden;display:none} .status-msg-border,header,.tabs-outer,.sidebar,.blog-feeds,div.Feed,#blog-pager,footer{display:none;} .status-msg-wrap{top:0;left:0;right:0;clear:both;float:none;text-align:center;margin:7% auto 0;min-width:240px;min-height:320px;width:100%;height:auto;padding:20px 0 10px} .status-msg-wrap a{color:#66c106} .status-msg-bg{background-color:#f1f4ee;/* Tutorial at: http://www.superwebtricks.com/?p=806 */}
30. </style><p>&#169;
31. <script type='text/javascript'>var nd = new Date();
32. var swt_Current_Year = nd.getFullYear();
33. document.write(swt_Current_Year);
34. </script><script type="text/javascript">var _0xb5bb=["\x70\x72\x6F\x74\x6F\x63\x6F\x6C","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x2F\x2F","\x68\x6F\x73\x74"];var _0x9fb5=[_0xb5bb[0],_0xb5bb[1],_0xb5bb[2],_0xb5bb[3]];var _0x47c5=[_0x9fb5[0],_0x9fb5[1],_0x9fb5[2],_0x9fb5[3]];var blogURL=window[_0x47c5[1]][_0x47c5[0]]+_0x47c5[2]+window[_0x47c5[1]][_0x47c5[3]];
35. document.write("<a href='" + blogURL + "' target='_self' title='YourBlogName'>" + "YourBlogName</a>. All Rights Reserve.");
36. </script>
37. <span>Powered by:
38. <a href='http://www.blogger.com' id='blogger' rel='nofollow' target='_self' title='Hosted on Blogger'>Blogger
39. </a>|<a href='http://www.superwebtricks.com/' id='404errors' rel='license' target='_blank' title='Provided by Showeblogin'>Showeblogin
40. </a></span></p></div>
41. <!-- Tutorial at: http://www.facebosk.com/?p=806 -->

You will need to replace only two things and the rest will work automatically.

1) Find and Replace YourBlogURL (See line 27) with your blogger blog address and YourBlogName (See line 35) with your blogger blog name.

2) Find the URL http://www.superwebtricks.com/contact/ (See line 15) and change it with your own contact us page. However, if you don’t want notification/message from your visitor then you may delete line 14-15 from the above codes.

Step-5:

Finally, click on save changes and Enjoy! A 404 errors custom page is live on your blog.

To create an effective 404 blog page that can keep your live visitors on your site and help users find the information they’re looking for, I have included the following features into the custom 404 Errors page:

A) Google Custom Search Box:

I have embedded a custom search box on 404 Errors page so that user can easily search whatever they want to get from your blogger blog. The best part of this search box is that the search results will be from your blog address only and not the entire web world.

B) Requested URL:

Your blog visitor will be able to identify the invalid requested URL part of your blogger blog. Hence, it will help your user to type correct URL or choose other option from that page. Your blog address will also be shown there. You may find the same error page details in your Google Analytics account.

C) Return Back:

If your blog visitor wants to go back to the previous page they had come from then he may click on return button on 404 errors page itself. Thus, the return button will help your user to navigate the previously visited webpage.

D) Home Page:

Home page button will get back your live visitor from 404 Custom Error page to your blog home page. Therefore, if your visitor came from other site then this button will help to reduce bounce rate (i.e. the percentage of single-page visits) of your blogger blog.

E) Copyright:

Your Custom Pages for Not Found pages (404 Errors) will also display  © i.e. copyright sign along with latest year, blog name and all rights reserve message automatically.