In any website, we should have 404! page. 404! or “Page not found” Page is very important. In the post, we will learn how to add custom 404! the page on blogger.
404! or “Page not found” page so very important because when someone types a wrong URL or Clicked on a removed post, URL then they should know that it is an invalid link.
Now this day every new Blogger template contains a 404! page. But we do not go to talk about that because Blogger gives us a place to add custom 404! page why we should no use it for our profit?
At this bottom of this post, I will give you a link to our custom 404! page code. The Code is very special when someone visits on your 404! after 0.8 seconds it will redirect him to your home page.
The plus point of this code is considered someone clicked at your one of the deleted page/post. When they will be redirected to our custom 404! page after some seconds he will be redirected to your home page. When he will redirect your home page and he will find some interesting post on your site he shortly going to visit those post. It will definitely increase your site views.
Step By Step Redirect 404 Error Page To Homepage In Blogger
To add custom 404! not found you have to the steps shown below.
- To your blogger dashboard.
- settings.
- Search preference and where you can find.
- Custom page not found.
- in the side of this option, you can find edit option click on it. a new text box will appear Copy and pest this code in this box from below.
- click on save the change.
- now you can check your blog by putting a wrong URL.
- in the side of this option, you can find edit option click on it.
- a new text box will appear Copy and pest this code in this box from below.
- click on save the change.
- now you can check your blog by putting a wrong URL.
Code Box:
<style type=”text/css”> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id=”error-404″> <span>404</span>
</div> <h2 class=”large-heading” style=”text-align: center;”>Page not found.</h2>
<h3 class=”light-heading” style=”text-align: center;”>Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = “text/javascript”>
BSPNF_redirect = setTimeout(function() {
location.pathname= “/”
}, 5000);
</script>
Waw Techjan i was so happy to land on your blog when i was searching for 404 redirect to homepage. Honestly speaking your website and my website shares the same template. this is my website http://www.newsrock.com.ng
It is a news and tech site. I will also like to enlongate friendship with you Thank
I also have a good news for you, your website ROCK
Thank You
If you have benefited from reading our article then we have found this article helpful. Hope you stay with us all the time.
Can share your opinion with us.