I think All of You Know About the 404 Error Usually Displayed When a Link is Broken.So Instead of Displaying the old error Not found Page. Since it is Boring one.So Replace it With a Customized Awesome Stylish 404 Error Pages on your blog.


404 Error page or Page Not Found Error is generated by Blogger when a user enters an invalid URL or 404 Error is an HTTP status code that means the page you are trying to reach on your Blog couldn't found or Page not exist in the Host Server.


By Default Blogger shows Error page message in a box Message bar and it Doesn't look like a stylish one.Here is Trick to Customize the Post message with an Awesome Image.So Let's Proceed.Before Proceeding to the Tutorial ,Have a Demo on it.

Live Demo

How to Customize This Error Page :.


1. If You Wish to Activate this Custom Error Page. Then You've to Switch to New Blogger Interface.


2. Now that you've Switched to New Blogger Interface.Just Select Settings from the Drop Down Arrow.


3.Now Go to Search Preferences. Now Go to Error and Redirections and  Click on  Edit Link Next to "Custom Page Not Found".

Now to Create Custom 404 Page.Do the Below Steps

1.Go to Design < Edit Html.


2. Now Find </head> Tag and Paste the below Code Above it.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>

</b:if>

3. Now Save the Template.

Now Adding Some Style to the Page

Now Adding Images to the Page  So that they may be Displayed When You Click on a Broken Link.

Error 404 Page Style 1 :

Now Again Switch to New Blogger Interface and Choose Settings < Search Preferences.

Now Go to Error & Reditections < Custom Page Not Found.

Now Paste the Below Code in it.

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-1wplHhawZU-IaG_4lepDCo8C2WChSZlrU6LuzFsgX2Ykb5it9tj-qFfD1eda1cS3R9fZBwNYM8xTocaQg0kb_wEBg2_8iPUbzWdGKYEENhNOch66mmymB9Iydkxh2XxxkjOuZH6I90/s1600/404+error+page+1.jpg"/>

That's it.

Error 404 Page Style 2:

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgov1LzgzgfFciDX9H5JAObHloR-FybO053lrLX7ZCeB6qbfFzqn8gzEcouhWNAQKbMOrLAUIROWv-Jt3I_XWgqe7bFILSmo8Q2PCvHkOH_KpQqQKBxVV6hMNxVSsjIenCOWS1Lhyphenhyphenye3ZA/s1600/404+error+page+2.jpg"/>

Error 404 Page Style 3:

Error 404 Page Style 4: