--> Create 404 Error Page in Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Create 404 Error Page in Blogger

With the introduction of latest search preferences by Blogger, BlogSpot blogs are now far more optimized than they used to be before. One o...



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! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create 404 Error Page in Blogger
Create 404 Error Page in Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOttkJyMm0k6kX8xxKqW5pFtluMS6_zozd4k85rZDDe4LyR6EzLF8wFiyAY-Y292f6vR9BVCYJPiKi661IVEAOcV7vmshGCGxc6mIVK0jxLGKRHsD4-sREslWenrLCvX9ss-kWg77-0g/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOttkJyMm0k6kX8xxKqW5pFtluMS6_zozd4k85rZDDe4LyR6EzLF8wFiyAY-Y292f6vR9BVCYJPiKi661IVEAOcV7vmshGCGxc6mIVK0jxLGKRHsD4-sREslWenrLCvX9ss-kWg77-0g/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/03/create-404-error-page-in-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/03/create-404-error-page-in-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy