17 October 2014

How to Create Custom 404 Error Page in Blogger Blog

404 Error
As Many of you Known 404 Error Page is Necessary For Blog to Make your Professional and User Friendly and if you Have 404 Error Page Then your site Bounce will also Decrease So Today in this Tutorial i will Tell You How to Create Custom 404 Error Page in Blogger Blog.

What is 404 Error.......?

The 404 Error Come when any one Enter wrong Link or the Page That is not on your Blog and The Page you have Deleted but Links Still Remains is Social Media and Then When any one Click on Link then 404 Error Will Appears.

How to Create Custom 404 Error Page in Blogger Blog

Step (1) Go to Blogger.com and Then Go to Your Blog Dashboard

Step (2) Go to Setting and Then Go to Search Preference and Then in Custom Page Not Found Click on Edit

Step (3) Copy The Below Code and Paste in the Custom Page not Found Box.

<!-- Latest tips and Tricks Default Template --><div class='LTT-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://Latesttipsandtricks.com/contact_us.html'>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.Latesttipsandtricks.com'>Clicking Here</a>
  <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
  <p align='center'/>
  <p align='center'><font size='5'>Page Not Found!</font></p>

Step (4) Change the Orange Links With your Page Links First Link with Your Blog Contact us Page and 2nd with your Blog Home Page URL and Then Click on Save.

Step (5) Then Go to Template and Click on Edit Html

Step (6) Now Press Ctrl+f and Find ]]></b:skin> This Code and Paste the Below Code Below This Code ]]></b:skin>

<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; }.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>

Step (7) Now Click on Save.

Congrats You are Done if You Have any Confusion/Problem Then You can Ask in Comments i will Happy to Answer your Questions and Please Don,t Forget to Share.

No comments:

Post a Comment

Contact Email

mybloggingplanet [@] gmail.com