March 26, 2012

Widgets

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 »

81 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. thanks Mohammad i used this 404 template on my blog

    http://www.mediafirebuzz.com/

    i am regular visitor of your blog and i read all your articles.

    i have learned so many things from you.

    thank you very much for detailed and easy to use tips and trics

    ReplyDelete
  2. Thanks Sir Really Nice I Also Published two 404 Page Not Found Styles this evening See And tell how they looks Syed Faizan Ali Recently Posted Attractive 404 Page Not Found Styles For Blogger

    ReplyDelete
  3. Hi and thanks for this template bro!

    but it's not working for my blog, can i have a solution !

    http://www.telechargement-dz.com

    ReplyDelete
  4. @Killer-SofT

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

    ReplyDelete
  5. @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
  6. @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
  7. @FAIZAN ALI

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

    ReplyDelete
  8. @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
  9. @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
  10. thanx alot sir g for this great tool i hope i use it and its works?

    ReplyDelete
  11. 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
  12. great news , b4 this blogger was showing their own 404 error pages , now its allow custom error pages , thats good

    ReplyDelete
  13. Thanks for sharing.
    Its working fine in my blog Blogging Tips

    ReplyDelete
  14. @Killer-SofT
    No Problem Bro


    @Umesh Tarsariya
    This is due to your template problem

    ReplyDelete
  15. Howz mine? I think its better than this one
    http://demoeb3.blogspot.in/404

    ReplyDelete
  16. @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
  17. See Friends my 404 Error Page Is More Good-

    http://lordhtml.blogspot.in/2012/03/create-good-looking-404-error-page-in.html

    ReplyDelete
  18. http://malayalambloghelp.blogspot.in/blabla

    ReplyDelete
  19. @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
  20. thanks mustafa great work
    www.eghacking.blogspot.com

    ReplyDelete
  21. 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
  22. @Mohammad Mustafa Ahmedzai
    6K fb likes...congrats ahmedzai
    when will it be 11k dear?

    ReplyDelete
  23. @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
  24. Thanks a lot, as if I did just that but I do not get any message any idea?

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

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. @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
  28. Hi MOhd.. Thanks for this wonderful post. I have applied it to my blog & its working great. I have also made an easy post for anyone who is unable to perform the steps.

    Check it out - http://www.yourbloggingtips.com/2012/03/404-page-not-found-error-solved.html

    ReplyDelete
  29. Hi MOhd.. Thanks for this wonderful post. I have applied it to my blog & its working great. I have also made an easy post for anyone who is unable to perform the steps.

    Check it out - 404 Page Not Found Error Solved

    ReplyDelete
  30. Hi MOhd.. Thanks for this wonderful post. I have applied it to my blog & its working great. I have also made an easy post for anyone who is unable to perform the steps.

    Check it out - 404 Page Not Found Error Solved

    ReplyDelete
  31. @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
  32. i have solve my problem by reading this link
    http://www.thesimplexdesign.com/2012/03/make-custom-404-page-for-blogger.html

    thanks dude to make me aware about conditional tag

    ReplyDelete
    Replies
    1. Thanks For Sharing The link, I too Solved my Problem
      have a look, Idiots Free Download

      Delete
  33. Great Post, Great Site! Would be honored to have you as the newest Join of the (soon-to-be) largest Blogger Members Directory.

    ~Regards

    ReplyDelete
  34. 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
  35. Thanks for the post. Very useful. Implemented and Working. Thanks again!

    ReplyDelete
  36. 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
  37. 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
  38. Thank You soo Much for this useful post! I was looking for it for a long time.. Thanks once again :)

    ReplyDelete
  39. 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
  40. can you tell me what is benefits of creating 404 error page in blogger?

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

    ReplyDelete
  42. Please Tell Me Why It Is Not Working On My Blog.?????
    My Blog Cheatspedia

    ReplyDelete
  43. Please Check Why It is Not Working On My Blog..
    Cheatspedia

    ReplyDelete
  44. 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
  45. WOW great one, i have <a href="http://www.realcombiz.com/2012/09/how-to-hide-blogger-sidebar-and.html">2 Stylish 404 Error Page</a> too.

    <a href="http://www.realcombiz.com">Best Blogger Tips</a>

    ReplyDelete
  46. ~ 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
  47. Thanks for the helpful tutorial.
    I try aplly these on my blog soon.

    ReplyDelete
  48. 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
  49. I've fixed my mentioned problem. Thanks for this 404 page.
    MUHAMMAD HASNAIN
    www.pakchem.net

    ReplyDelete
  50. I have shared a tutorial for creating 404 page for website ••• CLICK HERE

    ReplyDelete
  51. This comment has been removed by the author.

    ReplyDelete
  52. Thanks very much mohamed for your help

    Can you take alook in my blog and see its 404 page

    Chemistry & Technology

    Regards
    Tamer

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

    ReplyDelete
  54. 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
  55. Not Working Bro, i do all thinks that you tell to do, but nothing happened. . .
    ITWebister.blogspot.com

    ReplyDelete
  56. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
    Download free games

    ReplyDelete
  57. 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
  58. 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
  59. 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
  60. Its not working for me.. need more details about XML langauge

    ReplyDelete
  61. This doesn't work with my website www.bazics.net.

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

    ReplyDelete
  63. Note work for my blog
    netvietplus.net

    ReplyDelete
  64. simple n powerfull
    look this
    http://zzy-master.blogspot.com/zzy.html

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |