Create 404 Error Page in Blogger

404 ERROR IN BLOGGERWith the introduction of latest search preferences by Blogger, BlogSpot blogs are now far more optimized than they used to be before. One of the features was "Errors and redirections" The "404 Error" in simple terms is a page that appears when a broken link is clicked and it tells the visitor that the page he clicked no more exits or is deleted. The error page loads inside your post body surrounded a dull grey box. By default you can only add plain text along with HTML tags inside the "Custom Page Not Found" input box using search preferences option page. The message display using this technique looks pretty ugly and we would therefore need a better approach to design a creative 404 Message for a BlogSpot blog. First kindly see a demo of our error page:



LIVE DEMO

Design 404 Error Page For Blogger

The reason why a box appears around the error message is because of Blogger's default style sheet for status messages. We would therefore override the existing style sheet for the error_page alone using conditional statements. I will be using the CSS code prepared by my friend aneesh joseph which really make things simple and would add slight modifications to make the error box more attractive.
Our 404 page will prompt visitor that he has landed a wrong page and will provide him three important options which are:
  • Go Back to the page from where he came from. We will use JavaScript here.
  • Contact the Admin and inform him about the broken link. This will help you track broken links
  • And finally to provide a link to homepage.
So lets get to work to achieve all the above. Simply follow the easy steps below to display 404 error message uniquely.
  1. Go To draft.blogger.com > Settings > Search Preferences
  2. Click on Edit link next to : Custom Page Not Found
  3. Inside the box paste the following code:
<!-- MBT Default Template -->
<div class='MBT-404-box'>
  <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://contact.mybloggertricks.com'>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.mybloggertricks.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>

         Make these customizations:
  • You can edit the bolded texts with anything you like
  • Replace http://contact.mybloggertricks.com with link of your contact page
  • Replace http://www.mybloggertricks.com with your homepage link
   4.   Click the Save changes  button and you are half way done.
    5.  Now go to Template > Edit HTML
   6.   Search for this ]]></b:skin>
    7.  Just below it paste the following code stylsheet code:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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;
}
.MBT-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>
</b:if>
     To change the background colour of the box edit #FFFFFF
    8.   Save your template
    9.   Done!
Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:
http://yourblog.blogspot.com/blablabla
or
http://yourblog.blogspot.com/xyz
or
http://yourblog.blogspot.com/anything-here
etc....

What's next?

I am working on some exciting new designs for the 404 error page display and will share latest 404 templates soon.  Do let me know if you got into some trouble. Make the best out of blogger. Peace pals! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

53 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. @Killer-SofT

    What Error You Are Having Telling in Detail might help Us to guide you further thanks

    ReplyDelete
  2. @FAIZAN ALI Hi thanks for your answer Ali, i have add this template but not appear in my blog u can try with my blog http://www.telechargement-dz.com/

    ReplyDelete
  3. @Killer-SofT
    1.Do You Added the styles in the template correctly
    2.Do you Insert the Coding in here Custom Page Not Found at blogger

    if you do it link this then if should work fine

    ReplyDelete
  4. @FAIZAN ALI

    Yes bro i have added style and code page not found but it's not appear :(

    ReplyDelete
  5. @Killer-SofT

    it might be your template problem do you try the one i shared try this and tell if this worked for you

    http://www.mybloggerlab.com/2012/03/attractive-404-page-not-found-styles.html

    ReplyDelete
  6. @FAIZAN ALI

    I have problem in my template i have adjust this problem div class has removed , now i have added this and it's work fine, thank you bro for your help :)

    Sorry if my english is bad

    ReplyDelete
  7. thanx alot sir g for this great tool i hope i use it and its works?

    ReplyDelete
  8. hey dude...

    i have done the same as above mentioned

    but my blog is not showing text on blog
    see on my blog

    http://www.tipsviablogging.in/blablalbla

    ReplyDelete
  9. @Killer-SofT
    No Problem Bro


    @Umesh Tarsariya
    This is due to your template problem

    ReplyDelete
  10. @Amit Mb

    Nice but none of your link is working Your Contact Us Page Indicate to Nothing and Even Your Sitemap link Is not working.its better if you use the styles which Mustafa Sir has shared other then that its your designs :)

    ReplyDelete
  11. @FAIZAN ALI, you are right! But as you can see from the url, its a demo blog. Still in development stage, its pretty easy to replace those links with links of your contact pages, sitemap etc. I am not saying that Mohd's designs are bad. But, It would be more helpful if a link to sitemap is added there. I was wondering if I could embed a labels widget into that page, so it would be more useful for the reader

    ReplyDelete
  12. The above steps are working fine on all blogs may it be from blogger or third party. Please make sure that you insert the HTML code

    @: RiPDaD :

    My pleasure. Thanks for being a valuable input buddy. Always welcomed. :)

    @Umesh Tarsariya

    Looks like you have removed the code. Please add it and make sure you have inserted the html code inside "custom page not found" If all steps are followed correctly then there is no chance of an error or any problem.
    Do one thing just type a simple text message inside the box and save it. Do not add any of the codes above and then visit an error page and let me know if the same message appears there.

    If it does not then your template is missing the necessary conditional tags.

    @Faizan
    Thanks for helping others buddy. Feels great. :)

    ReplyDelete
  13. @Mohammad Mustafa Ahmedzai
    6K fb likes...congrats ahmedzai
    when will it be 11k dear?

    ReplyDelete
  14. @Mohammad Mustafa Ahmedzai
    why is this service unavailable error 503 coming?
    and dude, publish n preview buttons are not appearing properly in comment section...

    ReplyDelete
  15. Thanks a lot, as if I did just that but I do not get any message any idea?

    ReplyDelete
  16. very nice sir .. its working fine thx again

    ReplyDelete
  17. @Rahmeen Ahmad Khan

    Bro this do happens to me too some times when we visit blog powered by blogger try to reload the page it will work fine this is a technical problem in blogger these days.

    And the Publish and Preview button gets hidden when we publish a comment at MBT when it happens to you Simply click on comment box (where we write the comment) Press (TAB) Keep on pressing tab until you able to see Publish or Preview Button

    @Rahul Kashyap @Vaggelis AGA

    It might be your template problem do as follow
    Go To Blogger >> Setting >> Search Preference >> Custom 404 Not Found Page >> Edit >> Remove all the coding if it has and >> Save it >> Now Check www.yourblog.com/404 (Replace yourblog with your domain) and see you get this 404 default text (Sorry, the page you were looking for in this blog does not exist.) If it does not appear then its your template fault

    ReplyDelete
    Replies
    1. If it template fault then pls give a solution to that fault, pls help How to repair

      Delete
  18. Thanks for sharing

    ReplyDelete
  19. @Mohammad Mustafa Ahmedzai

    dear sir...

    i have done the same as you told me

    my template is missing the necessary conditional tags.

    how can i add required conditional tags in my template pls help me

    www.tipsviablogging.in (i have placed the code)......(^-^)...

    ReplyDelete
  20. how to upload photos in blogspot that come that in google image comes in 2 days say how send me message sir www.facebook.com/mrhariom

    ReplyDelete
  21. Thanks for the post. Very useful. Implemented and Working. Thanks again!

    ReplyDelete
  22. Thanks Mohamad for this code. I have just copied and pasted it in my blogger blog and it worked fine. I don't know how to thank you.Thank you very much,you solved my problem.

    ReplyDelete
  23. Thanks for sharing. I just found out about this new feature.
    Already up and running on all of my 4 blogs.

    www.Holistr-bucharest.blogspot.com

    ReplyDelete
  24. Thank You soo Much for this useful post! I was looking for it for a long time.. Thanks once again :)

    ReplyDelete
  25. I migrated from wordpress to blogger long back (year ago)

    always I see this error in google web master tools

    feeds/3475238867712452594/comments/default

    what to do

    ReplyDelete
  26. can you tell me what is benefits of creating 404 error page in blogger?

    ReplyDelete
  27. Thanks! I always wonder how to create 404 for blogger. Now I have 404 for my blog!
    http://outdatedpenanguncle.blogspot.com/xyz

    ReplyDelete
  28. NICE SIR! thanks :D

    ReplyDelete
  29. I get 'NOT FOUND ERROR 404 ' when i want add or remove/edit gadget(page element) on my blog layout. the URL for my blog is moses-ayoub.blogspot.com. What is the reasons of this? and how to fix it?

    ReplyDelete
  30. ~ Mohammad Mustafa Ahmedzai ~

    I Used It But It's Not Working. In Your Site If Something Is Not Found So It Removes All Widgets And Shows 404 Not Found. But In My Website It Still Shows Widgets And In Post Body It Show 404 Not Found...

    Please Give Me The Correct Code To Make 404 Page Like Your Site...

    Salman Khan
    http://www.ThePakiChat.Net

    ReplyDelete
  31. Thanks for the helpful tutorial.
    I try aplly these on my blog soon.

    ReplyDelete
  32. I added this code to my blog's Custom Page Not Found box. But whenever I clicked "Save Changes", I got this message "Your HTML cannot be accepted: Tag is broken: A". Any Solution please.

    MUHAMMAD HASNAIN
    www.pakchem.net

    ReplyDelete
  33. The idea is amazing but the problem is, a NO is always a NO whatever make ups one uses to adorn it.

    ReplyDelete
  34. Great post, what you said is really helpful to me. I agree with you anymore. I have been talking with my friend about, he though it is really interesting as well. Keep up with your good work, I would come back to you. :)

    ReplyDelete
  35. it really helped me remove my crawls errors , i had almost 72 crawl errors. thank u very much
    <a href="www.ji-make.com>Ji-MaKe</a>

    ReplyDelete
  36. When i look for any doubt about blogger, i search google with ur blog name.
    i know your blog have solution to all blog problems.
    Jinson
    http://www.tricksage.com

    ReplyDelete
  37. Thanks man this really work fine for me cos have been looking for this long, I really like it you can check the blog out here .... http://nairatech.net

    ReplyDelete
  38. Its not working for me.. need more details about XML langauge

    ReplyDelete
  39. hey how to get the floating bar in my blog like yours plz tell me fast

    ReplyDelete
  40. Note work for my blog
    netvietplus.net

    ReplyDelete
  41. i have set up error 404 page, but the template does not display on non existent pages

    ReplyDelete
  42. code is not working on custom template but its working on blogger's default template..can any one suggest how to fix this problem.

    ReplyDelete
  43. Thanks for the helpful post.
    I will try to apply on my blog.

    ReplyDelete
  44. Thanks a bunch! I even figured out how to add my own image instead of the 404 text. (And that's exciting because the whole html/CSS thing is new to me.)
    Thanks again.

    ReplyDelete
  45. HI,

    Thanks for sharing this useful post.

    ReplyDelete