404 Error Pages Custom and Stylish For Blogger/Wordpress

Page not Found or Page 404 Error appear when a user or blogger 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 exists in the Server.
In the Normal default setting only show page message in a box and it does not look Stylish.
At that way, I am going to Show you how to Customize it much better…

Only Custom message [No Style]

Only Show a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences





  

Error Message with Stylish 404 images

You want to Colorful Stylish  404 page do the following the Step.

• Go to Design->Edit HTML
• Find </head> and copy the below code just 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>

• Save the Template 

Error Page Style 1

•  Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEjUwaqo1zEwFuoyXQmNs1nLWLtcrqpPlsuiRjugXt-Ge__Nz51sQeP4LkffFHCK5-faRd_bZD3oL556gh27gfWyWOHPdb2kpduWg1BWA_ECxgiX-WGWUugK3eA-i8N4H4euQBzvuijOOHY/s1600/404+error+page+1.jpg"/>

Error Page Style 2

• Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEgrsIz7R9uQC7VXVz3uc3kMD015hp5uWyrcD0bYA08Zk428oZABBZXIlHTRVKezgiYp02W3KOwxpFZHrfnZdeU7pTxF-PnCVDfWVJOaN1QXZp68dJvemsYAUG-l5WtUurg-DWb8Pl7vKdc/s1600/404+error+page+2.jpg"/>

Error Page Style 3

• Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEj3pQwI-lecT1ZNlS6esOATBfPm0L8VVx_qAMMkeorAemuTSGAavHNnjORsKUlg05tDhkfGUzMPPxqMyYObgv2iWxWITncb98_9NHGnaU2gd1P_YOMAyqHG8pBXbcwElJ8i7TpKh73gqe4/s1600/404+error+page+4.jpg"/>

Error Page Style 4

• Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEhUqxkQm_3CYV7kJIenzy4k88-YzvkJnqwT8CBGRaun4J0FATyTJj0jg0Y3ssZcIqqiQsyKGZxCrRUpo45VmYj78RxEhW2edKCQNL4LLbWhUCH1PDn_EQta4aztnEGp1O1fmBtfYIwl6Yw/s320/404+error+page+6.jpg"/>

Error Page Style 5

• Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEgVQA_k7RbH_ND8UhQPderN9yByzBLb5XQdSZXvYYYuHX0-mWymhMooJIbM_HzQixMhihU35DnhXah0KdTjUKQtD3-QpWMtoEQTG9jBL0V0rrl2mRhQc7pweBsVWBIrOx8s9hgYu4CY9d8/s1600/404+error+page+7.jpg"/>

Error Page Style 6

• Go to Setting->Search Preferences
• Copy below code in Custom Page Not Found section [as shown in fig. first]

<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/AVvXsEgCYfhL1XHL36l7cKYNtVjmKHzUfU6ve8AHLbU4v0hYxtRtcl03ioGyo4rTJKBQM_57PCedAyp7sl1LpF-SLXss9ozfLWQZ2O1bk8vISFszgaPx-KySTkr5qBbZB4bid4rTko60enonBAs/s1600/404+error+page+3.jpg"/>

Then Click Save.That all.
Most thanks to Page Called custom error page code, visit here. Then I made some changes and add beautiful 404 images that I was inspired by 

Dian.

I think this article helped you..If any bugs of doubts don’t hesitate to ask..do comment…
Like and share…

                   I hope you enjoy this Post. If any problem comments it.

                                         Daily Tech Update Check