😍 Loving this theme? Download

Please enter at least 3 characters.

How To Setup A Custom 404 Error Page For Blogger Blog

Create a good looking custom 404 error page for your blogger blog and let your visitors not to feel annoyed when they land on 404 error page.
How To Setup A Custom 404 Error Page For Blogger Blog
How To Setup A Custom 404 Error Page For Blogger Blog
Having a custom 404 error page on your blog will give it a professional touch and users will not get annoyed or bad impression when they will land on your 404 error page. A 404 error is an HTTP standard code for an error when the client was able to connect with the server, but the server could not find/respond what was requested by the client. 
Here on blogger, by default it displays a message line, "Sorry, the page you were looking for in this blog does not exist" which looks very odd. So here we have designed a nice looking 404 error page for blogger blogs.

Steps To Setup Custom 404 Error Page For Blogger

Step 1) Read Thoroughly and carefully follow the steps. First of all go to Blogger → Template → Edit HTML

Step 2) Now click anywhere inside template code box and press Cmd+f or Ctrl+f and search for code ]]></b:skin> and just below that code line, paste the CSS code given below after making required changes as shown below in Step 3:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'> <style> 
#main-wrapper {
    width: 100%;
.blog-pager {
    display: none !important;
#content-wrapper {
    width: 99%!important;

.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;

#TB-404-error-box {
    background: #FFFFF url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5e26EEP8xj8q7h-bkJGgCQsH_hC_5E-7pFQRLdvPDEmfNyAQsn84YujIIifChYAphECvTOiMa5amcBEUuIZpM1_Hc4BJIQwVpNR7guDE09KnLh5OSXVJGEKb6FyU7Bz_-eEPMW-UJa8E/s1600/TB-Error-Page.png&quot;) no-repeat scroll 0% 95% rgb(255, 255, 255);
    width: 97%;
    margin: 0px 0px;
    padding: 15px 20px 50px 20px;
    border: 1px solid #E7E7E7;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 2px;
    height: 470px;


Recommended: Show last updated and published date in blogger post

Step 3)

(Note: Please note that this STATIC code may not work if your template is not using the same ID or Class names for sidebar wrapper in your template so make sure you use the same Class or ID name as used in your template code e.g., #sidebar or may be .sidebar or Anything else)

Background Image: You can use an image in footer area between "400 Page Not Found" message. If you want to change that image, find out image URL in above code and just make your own image in 990x140 pixels size and replace our image URL given below with your's and use 95% to fit the image in proper way by increasing or decreasing the %age value.


Background Color: To change the background color of page, just change #FFFFFF color code with the desired one and Hit Save Button!!

Step 4) This time we need to go to Settings → Search and Preferences Settings → Then Custom Page Not Found under "Errors and redirections". Click edit and paste the HTML code given below inside box after making required changes given in Step 5. Please see the image below the HTML code for reference:
<div id='TB-404-error-box'>
<p align="center"><font color="#ff0000" style="font-size: 57px;"><strong>Oops!</strong></font></p>
</br><p><center><font color="#000">Seems like you either clicked a <div style="color: #0089D6; font-size: 27px;">Broken Link</div> <b>or a Page that no longer exist. Kindly do one of the followings:</b></font></center></p><div style="line-height: 25px; font-weight:normal;"><center><b>&#10004;</b> <a href='javascript:history.go(-1)'>&#171; Go Back</a>!</br><b>&#10004;</b> Help us to Serve you better by <a href='http://twistblogg.blogspot.com/p/contact-us.html'>Reporting This Problem</a> to us!</br><b>&#10004;</b> Go to <a href='http://twistblogg.blogspot.com'>Homepage Address</a>!<br/></center></div><p><br/></p><p align="center"><font color="#08C500" style="font-size: 100px;"><strong>404</strong></font></p><p align='center'><font color="#EB0F0F" style="font-size: 20px;">Page Not Found!</font></p> </div>
404 error page for blogger

Step 5) In the above HTML code, just replace our Contact Us link and Homepage Address Link with your links. You can play with the Text like as changing colors, size, weight etc. as they all are highlighted. Then hit save button and now visit your blog address with any link which does not exist and see the magic!!

Final Words: If you are unable to setup your 404 error page, then ask in comments below and let me analyze your blog template. I will help you to setup your custom 404 error page. You can subscribe to further updates via email for free. Share this post to show your love. :) Stay safe and Happy Blogging!

Share this post

Explore more articles by Satbir


Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. wow thats nice post by you i made 404 custom error page
    thanks satbir
  2. 404 redirect page ... which is very useful its not only build impression of our site , for seo purpose also its really valid thing and its play vital role.. my experience in my old website i dont have 404 when some miss typed the url its directly show google 404 page.. which impacts bad now my new site have 404 its working perfectly... thanks for the post and its useful post for new bloggers which you explained clearly
    1. Hey Charan@ Thanks for dropping your valuable comment and sharing your experience :)
Post a Comment