Tuesday, 6 June 2017

How to Set "Custom Page Not Found" 404 Error Page in Blogger?


Under: ,
If you somehow noticed about the Custom Page Not Found Settings in your blogger blog under Errors and Re-directions in Search Preference of your Blogger blog then you must questioned yourself about what is it and I am sure you are curious to know about this option that time and for now too. Let me tell you about that now. Sometimes if you visited any page of your blog which do not exist (through a broken or expired link) then you will be seen a message from blogger that this page does not exists. It looks creepy. Isn't it. You can check that out by placing any keyword after your blog address (like: yourblogaddress.blogspot.com/404). Today, this article is about customizing that default Custom Page not Found error and renovate it with professional looks. So lets start the tutorial.
The message you see by default is like the picture below :

Creating Your Custom 404 Not Found Page in Blogger:


  • Go to Blogger.com > Settings > Search Preferences:
  • Click Edit link next to Custom Page Not Found


  • In this editor simply type your message that you want to display if your reader's land on a page which is broken or does not exists  

You can also try a beautiful 404 error page that we implemented on our blog :

  • For doing so, you just need to paste the following HTML and CSS coding inside that editor :
<!-- BBeginner.Com 404 Error -->
<div class='BB-404-box'>
<center>
<img src="https://lh3.googleusercontent.com/-qQJubaGtgv0/WTTic_WYEII/AAAAAAAAArM/ltAAfLTWqakC8VMYNaRGA2fsSwbbsMq-gCEw/s1600/404-error-page.png" />
</center>
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us by <a href='http://www.bbeginner.com/contact'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.bbeginner.com'>Clicking Here</a>
      <br/></li>
  </ol>
  <p>
    <br/>
    <br/>
    <br/></p>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p>&#160;</p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>
</div><div style="text-align: right;">
<span style="font-size: small;">Designed by <a href="http://www.bbeginner.com/" target="_blank">BBeginner.Com</a></span></div>
</div>
<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;
}
.BB-404-box {
  background:#FFFFFF;
  width:98%;
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow: 5px 5px 5px #CCCCCC;
}
</style> 
  • Don't forget to replace the above yellow highlighted links with your blog address and contact page. 

For better layout you can also implement full width coding and hide sidebar in your 404 error page. For doing so visit : How To Create Full Width Page And Hide Sidebar In Blogger?
Thats all! Save the Settings and You are done! Now visit your blog through any link that doesn't exists and you will see this amazing 404 error page. 

Let me know your views and queries in comments below.

2 comments:

Wisdom Michael on 23 August, 2017 said...


I don’t know why it doesn’t work in my blog Naijcrackgist
,
I copy past the whole code, but only the default 404 page shows up.

Please what do you am not getting right?

Hammad Ansari on 23 August, 2017 said...

@Wisdom Michael

Buddy! You're using template having pre-customized 404 error page.
You need to remove the following tags from your blog's template
(Go to Theme > Edit HTML ) and then remove these codings:

<b:else/>
ERROR 404 - <data:blog.title/>

After that, simply follow the steps mentioned in the post above. :)

Confused? Feel free to ask!

We love comments! We appreciate your queries but to protect from being spammed, all comments will be moderated by our human moderators. Read our full comment policy here.
Let's enjoy a happy and meaningful conversation ahead!

 

Facebook

Recent Comments

Copyright © 2017 All Rights Reserved by BBeginner.Com ׀ Designed by Hammad Ansari. DMCA.com Protection Status