Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Tuesday 2 July 2013

Create Costom 404 Error Page

Custom 404 error Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page. Now Blogger Error pages use the same template .This would help template designers in making up custom beautiful 404 Pages.This tutorial will help you in setting up a Custom stylish mouse hover effect 404 page for your Blog.You may seen many 404 designs and images but this is very stylish and and made up of no image .This will also make your blog more professional.This is the much needed one for Every developing or developed blog. Lets see the Live Demo By Default, your Blogger Error page will display error message You can Customize this message beautifully to something else from the Blogger Settings.

Follow Following Steps To Create 404 Error Page



  • »Go to Blogger>> setting>>search Preference
  • »Select 404 Error Page
  • »Copy Following Code and paste There.

CODE: 

<style type="text/css"> #error-404
{ border: 20px solid #1B1B1B; border-
radius: 240px 240px 240px 240px;
height: 240px; margin: 0 auto 40px;
text-align: center; transition: all 0.8s
ease 0s; width: 240px; }
#error-404:hover { border-color:
#333; } #error-404 span { color:
#FA4C29; font-size: 100px; font-weight:
bold; line-height: 240px; } .large-heading
{ font-size: 48px; line-height:
1.2em; } .light-heading { font-weight:
400; } .status-msg-bg { background-
color: transparent; } .sidebar-
wrapper, .page-header { display:
none; } .main-wrapper { margin-right:
0; } .outer-wrapper { min-height:
0; } .status-msg-border { border: 0
none; } </style> <div id="error-404">
<span>404</span>
</div> <h1 class="large-heading"
style="text-align: center;">Page not
found.</h1> <h2 class="light-heading"
style="text-align: center;">Please check that there isn&#8217;t a type in your
URL.</h2>

No comments:

Post a Comment

Notice: Don't add "backlink". Text with Link will automatically Removed.