How To Create Custom 404 Error Page for Blogger Blogs


404 Error page is a page shown only when visitors or readers tries to reach a particular post or article that has been deleted in your blog or it url/address had been changed. Custom 404 error page is to make users who visited the error page redirect manually or automatically to home page.

If a blog is newly created using blogger platform. The 404 error page won't redirect readers to home page or anywhere and won't state going to home page which might make blogs loose traffics by reducing blog visitors. Whereas, custom 404 page is the must include function of your blog just like SEO.


In this tutorials i will teach you how to add a custom 404 Page in your blogger blog(s). Here in this tutorials, I will cover 3 methods which will include redirecting visitors who visited blogger 404 error page to Home Page of your blogger blog.


How To Get Started

Method 1 : 

In method one, here we will create HTML message which can done by creating a dummy page in blogger.

Sign in to your Blogger Dashboard

In the left menu, click "Pages" >> "New page"

Create your own message (using image and sentence) like snapshot below

example : Oops, this page you are looking for is not available. You can read related articles at the Home page (make the Home page link to your blog home page)!


Now click HTML section of the page and copy all the html code there to clipboard.


Go back to your blogger dashboard, in the left menu click Setting >> search preference >>


Click edit in "Custom page not found" section


Paste that code you have copied



Finally click "Save changes"

Now when your blog visitors or readers tries to reach a particular post or article that has been deleted in your blog, they will see the 404 error message and will go back to the blog home page using the link available in the 404 error page.


Method 2 : 


You might want to your visitors to be redirected to your custom page that you have created method 1. This allows you to have more customized options 404 pages like mine. (view my 404 error page)

So if you want your visitors to be redirected to your home page, simply copy and paste the following code in your “Custom page not found” section.


Oops page not found go to <a expr:href='data:blog.homepageUrl'>Home page</a> for more interesting article.
<style>
.status-msg-border {
    opacity: 0.4;
    width: 100%;
    position: relative;
    border: none !important;
}
.status-msg-body {
    z-index: 4;
    position: absolute;
    width: 100%;
    padding: 0.3em 0px;
    text-align: center;
    background-color: #FFF  !important;
}
#secondarybpart{display:none  !important;}
#primarybpart{width:100%  !important;}

#accessbpart,#colophon, #blog-pager ,#stats,#brandingbpart,.ad-banner{
   display:none  !important;
}

#contentbpart .post {
    padding-bottom: 0px !important;
}
#contentbpart {
padding:none !important;
    position: fixed;
margin-top:17%
}
</style>

<script>
    if(1){
      window.location = "URL of your 404 page";
    }
  </script>

Customize the code and replace URL of your 404 page to the url of your 404 error page you have created in method one. This is mine : http://www.ogbongetechs.com/p/404-page.html


Method 3 : 

In this method, you can make the 404 error page automatically redirect your readers to home page. simply copy and paste the following code in your “Custom page not found” section.

<meta http-equiv="refresh" content="3;url=your_home_PAGE URL" />
<h1>Redirecting in 3 seconds…..</h1>

Replace your_home_PAGE URL with your blogger blog url. Then change 3 seconds to the count of seconds you want your blog roll redirect to home page.

The main importance of adding 404 error (page) to your blog is to let your visitors know that your blog still exists with some cool articles.

I hope this helps

Cheers!

Recommended : 

==> How I Added Static Pages Link at the Footer of my Blog
==> How To Enable HTTPS Over HTTP in Blogger





Subscribe To Our Newsletter
Follow Us On Twitter and Instagram

Comments