Awesome Stylish 404 Error Pages For Blogger

Iskandar Blogger 9:01 AM
Custom 404 Error Page for Blogger
404 Error or Page Not Found Error 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 Server.
By Default Blogger shows Error page message in a box and its not look Style.
Here I am saying about how to Customize it much better...




View Demo

Only Custom message [No Style]

If you want to show only a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences

Error Message with Stylish 404 images

If you want Colorful Stylish  404 page do the following.
  • 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

Custom 404 error page for blogger 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/AVvXsEibZ8TPmaLxhOKMC30d9nTbZTurVfg6NPs272w-UxosK-WSlCIxxRR1abz5Rr16xjvxXX1Oso8vVJ-aQo7RkxtBLMD7q7ryk5WPr0o4XFVME7IePfVbgzWKKdsZkmlufvgCly_l_uTwHhw/s1600/404+error+page+1.jpg"/>

Error Page Style 2

Blogger custom Error page
  • 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/AVvXsEgI398Ux8fMbygnj3xd-vcaGoEj5D3KiSk-qDt1tdizinkO9pJUkeU3r2_6WgUdeqySMhuOoopnQmT9KKh2vgvIkdJA6wBMzwoq4Y3xYgS4gu7ZL1a4cftva3gptBBczTvW2sFJmhBV2gc/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/AVvXsEiFsasPUeXjL5iXMthYJ5fUHUTYodj1_aUwyMyKXF-giw4WIN5_sa-oex4kWHmKJxyBoPv7jIGwp9PwIJODy42q13J8wU0kSJhKYBMwsDQQYtvwVK7-1T6Af_Q6ypGLk_YmwAkdJc8m0dw/s1600/404+error+page+4.jpg"/>

Error Page Style 4

blogger custom 404 error page
  • 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/AVvXsEgwcmnBl1SWqnmnXQQxGLHASix93YsRd_pRAaiDCuaaaYw1M6YRjhWmMxRJmcardqSlWrnkSu_W2wcII84G01dC-bO3uw6ZxEdbPPaE4m9TukZ6zNS2YA_CrLd4UVs1-_j4mzfLvMAV2uo/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/AVvXsEiPSKvAC-UDAxfjh8W_m-PKJF2H7vny3kCi2jxflXysbptMWmkGnJbKqVXwBljD1bhRLnoDDXoxx1SnCSIt2ZDqmxaCStVIAnwrUXxUsAacfZMl9Pj5pGs77kaykUCOXyar8XD29QUMglY/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/AVvXsEiM6wzWVy6-UeD5laj4oskoc6iVsrEkZLcmQfjYJrnNFKjwuNjanKUYoAhe4eEdvCjjHdMo1OpnxGVm9jK8RWoXfXVJIX_HmoVm-K1dZnJQb8SbAmmASJ9AIfjX4y_3j23OXaQYL01-M8k/s1600/404+error+page+3.jpg"/>

Then Click Save..That all..
First thanks to Bloggerplugins.com for the custom error page code, visit here. Then i made some changes and add beautiful 404 images that i was inspired from HongKiat .

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