Custom 404 Page Designs For Blogger ~ Blogger Tricks Hut

After the introduction of the option for Custom 404 Page for blogs, now we can easily create a beautiful 404 page. First, the 404 message was displayed in an ugly type. It says "The page you are searching for on "Blogger Tricks Hut" does not exist" or something like that. It was really boring and was looking very ugly. So as Blogger has gifted us an option by which we can now create custom page not found error with images, animations and many more. So today we will be learning how to create a rocking 404 error page, for your blogger blog. This is only for Blogger's New Interface, don't worry every old blogger interface has changed to the new one by default. So lets learn and enjoy.

How to use custom 404 Pages?

Follow these simple steps:

1. Go to settings > Search Preferences

2. In the Errors and redirection, Edit the Custom Page Not Found option.

3. Now simply copy any design code you liked and paste it there.( Codes are provided below the images)

4. Go to "TEMPLATE" > "EDIT HTML" and paste the following code just below/after <head> tag:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>You've ripped a hole in the fabric of the internet. </title>
</b:if>

You can replace the

You've ripped a hole in the fabric of the internet.

text with any text of your wish.

Codes:

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMldgvQlNgSSgdrmQaWIQ0N3peFPneyZV2DA4krfbNNu11flaEvGd-FnVsnBbS1thrFR-KB-mEnv4UBzD6KVZ-z2Po0qY5v2m3pYsfE_YFOdDUjLCvILhSjNucCz6zQl-VmTgG1z9MYso/s1600/13.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9HoA-MypNp8p0YOurHClxdIYSDnZgZ8JOC-BZ6_RESQcHAowsedDs7xIJnPsTsGbloxs45bhgGN6VrqZNFoNKZy3KGC2K31F5zrrDzz7v5uYkdCqsjdp3W3TOaelmriG6AFyyoHPlmbC/s1600/12.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXKZzvqTK3PLXxS_Fa-C5xyHDTC5MKvajGhO5sO12FLdg7s4t7xjN70Orf9jc5PVMxK1Brm9KI2wSfflt7cvUpQ-Qty9fYpR6SFNMzhTeTG9qjf-rj15cf-XRXJLX_bVgLYsdHcZm9e-O/s1600/20.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVu0-M1MEF6oPQXDAMpO86fqkS9RpWTK_QifKjCdhPOgLqXvBSOrLe1JOAJSKiJEErgn5VcIGvaD_pssb5gma-bds-Vv47UgyKTynPqJTzJVTiu0UffjpszAepykVNoLlc886tE2DuT8R/s1600/27.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9_Q6qH3GC2HGlVBAdCHRfwDbCT7Ym2kG_pldIqxoJ0OQnpe0AoL3xDP4SK4dV7DPDyhdYbdyuT9mcLKZEOBSWL_0LKhVczAuvuTlErgfhzrVVyzViVPtGeYAbMxFOnF8FvhZ9Uh6fdj1/s1600/3.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

So here are some designs for you, to make your 404 page beautiful. Here I have posted only some selected design codes. You can get a wide range from a post here. So today you have designed your 404 error page perfectly. I will be posting more updates and information about blogger and also some animated 404 error page designs. Till then stay tuned to Blogger Tricks Hut by subscribing us. Happy Blogging!