Stylish 404 Error Page For Blogger

Introduction

When a user enters an invalid URL, Blogger automatically generates a 404 Error Page, this 404 Error Page is an HTTP status code that means the page you are trying to reach for is either couldn't be found or the page doesn't exist on the server.

By Default, your Blogger Error page will display this error message.

That's lame! isn't it? That's why I designed my own Stylish Page to share with you. Follow these simple steps to get it working.

Features

Lightweight CSS
Improved HTML
SEO friendly
Fully Customizable
Flat Design

External Scripts

No EScripts needed.

Live Demo

Demo not available.

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Search for </head> then copy the following code right after it

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-not-found'>
 <div class='errorno'>40<span style='color:#f5b201'>4</span></div>
  <div class='errormsg'><p class='error'>error</p><p class='the'>The</p><p class='page'>page you were looking</p><p class='for'>for</p><p class='inthis'>in this</p><p class='blog'>blog does not exist.</p></div>
 <p><a href='/' title='home page' style='color:#fff;'>Back To Home page</a></p>
</div>

CSS

 Search for ]]></b:skin> then copy the following code before it

::-webkit-scrollbar{display:none}::-moz-scrollbar{display:none}::-o-scrollbar{display:none}::-google-ms-scrollbar{display:none}::-khtml-scrollbar{display:none}#error-not-found{background:#3d3d3d;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999}#error-not-found .errorno{letter-spacing:-30px;color:#fff;font-size:600px;position:absolute;top:125px;left:250px;height:430px;line-height:430px}#error-not-found .errormsg{position:absolute;top:250px;width:100%;height:140px}#error-not-found .errormsg p{position:absolute;color:#fff;text-decoration:none;padding:10px;background:#3d3d3d}#error-not-found .errormsg p.error{left:240px;text-transform:uppercase;font-size:70px;height:70px;line-height:70px}#error-not-found .errormsg p.the{top:55px;left:485px;text-transform:uppercase;font-size:40px;transform:rotate(270deg);height:40px;line-height:40px}#error-not-found .errormsg p.page{left:505px;font-size:18px}#error-not-found .errormsg p.for{top:35px;left:565px;font-size:100px;height:100px;line-height:100px;padding:0}#error-not-found .errormsg p.inthis{top:50px;left:655px;transform:rotate(90deg);font-size:40px;height:40px;line-height:40px;padding:0 10px}#error-not-found .errormsg p.blog{top:89px;left:750px;font-size:24px;padding:10px 0}

 Save your Template

JScript

No script needed.

Final Words

Did you find this plugin useful? Please do leave your comment about this plugin!

Next Version will be more stylish because I'm going to turn this into a RESPONSIVE plugin. Keep in Touch!