Monday, March 26, 2012

Create "404 Page Not Found" Error Page In blogger

404 ERROR IN BLOGGER
Its a good news for all blogger lovers. Google has been updated so many in new blogger interface. The First thing that we missed a lot is 404 Page Not Found error customization but Now, Google gives us option to edit this page according to our choice. Its really good for a blog because some times user click on wrong or broken link, which are not exist so Its show a Blogger based Pages which tends to loose our blog reader but with the help of this option I tried to design a simple 404 page not found error message page for your blogger blog and its really easy to use.


Designs of 404 page not Found Error Page

I searched many popular sites and check their page not page so I found many of them use a simple CSS3 code to design their error page. They simply write the a message to users and give some popular links to their page like Home page, Contact Us, Go back. I also tried to give best look for it.

Steps to Create 404 Error page for your blog

  1. First go Draft.blogger.com > Settings > Search Preference
  2. Now Click on Edit button in Custom Page Not Found Option.
  3. A box will open, paste the following code in the box

<!-- PBT 404 Page Not Found code -->

<div id='PBT-404-template'>
 <p align='center'><font color='#0080ff' style='font-size: 36px'><strong>404</strong></font> <span><font size='5'>Page Not Found!</font></span></p> 
<br/>
 <p style='line-height: 30px'><strong>

<font color='#ff0000' size='5'>

Sorry!

</font> <font color='#000'>

We can`t Find That Page, you are looking. Its Seems that you are enter any wrong URL in Address bar or requsting any File which is not avaiable.
</font></strong></p>

<p>Luckily our site has a lots of other useful stuff thats are really awesome, you should check them out Or, you can try searching (little black search tab, top right)</p>

 <ul style="line-height:25px;">   <li><a href='javascript:history.go(-1)'> Go Back</a> </li>
 <li> <a href="http://www.probloggingtools.com"> Home </a> </li>
      <li>  <a href="http://www.probloggingtools.com/p/contact-us"> Contact Us </a> </li>
</ul>    
<br/> 
</div>
     4. You can write your own message, instead of bold letters.
     5. Change Home Page Link  http://www.probloggingtools.com with yours.
     6. Edit Contact Us page Link http://www.probloggingtools.com/p/contact-us with yours contact page.

     7. Save the Box.
     8. Now, Go to Template > Edit HTML
     9. Search for the following code.
]]></b:skin>
    10. Just before it, paste the following 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;
    }

    #PBT-404-template {
      background:#FFFFFF;
      width:98%;
      margin:-12px 0px 10px 0px;
      padding:20px 10px;
      border:1px solid #ddd;
    
    
    }
    </style>
    </b:if>
    11. Save the template and You have done.

To check  that it working fine, access any file or page which is not exist,For examples
http://www.yourblogurl.com/404

http://www.yourblogurl.com/pbt

http://www.yourblogurl.com/anythings

Need help?

If you are facing any problem to create 404 error page, feel free to ask here. I am also working on other cool 404 Page designs, if you know any good one, feel free to share with us.

0 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...