Add Professional 404 Error Page in Blogger Blog

Today I'm back with a blogger tutorial and with a 404 error page. It is a professional 404 error page. You have seen this error page on many blogs and websites and you thought to add a professional 404 error page in Blogger Blog. Those who want to know about 404 error page and want it add it, can read below to understand it.

Professional 404 Error Page:
Here we've brought a professional 404 error page for all bloggers. It is very easy to use and install. It is SEO friendly because it is designed by CSS and HTML. First of all have a look on it.

Live Demo

Don't Miss: How to Show G+ Profile in Google Search Results

Features:
This page has some good features which are listed below:

1. Big 404 Logo: In the front of this page, a big 404 logo which tell to your readers that they wrong URL or on a broken link.
2. Full Page Width: This page will hide your sidebar widgets because it has full page width.
3. Go Back Link: It has a Go Back Link which helps your readers to send them in back page.
4. Search Box: A Stylish search box has been also added in this 404 error page. It helps your readers to search anything on your blog.

Add this page in Blog:

You can easily install this error page in your blogger blog by following the below steps for your blog:

• Go to Blogger and select your blog in which you want to show 404 error page.
• Navigate to Settings>>Search Preferences.
• In the Errors and Redirections  look for Custom Page Not Found and then click on 'Edit'.
• Now a Box will appear where you have to paste the below code in it.

<!-- PC Gats 404 Page --><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; } #searchinput { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2B9ERcAjrsV4ihp_u2y3xySYNVbeLKu7sZqRJIlJ6eEbV7dI7EUHIXZuzWOUh8Xl_5QdNG99gMpFc4LmZj1PiQP0AySXQ6PqznqY07IAl0GxLv41ukF2-OVO4MY1mgoZnPvxGkFfe0d-G/s0/search.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; color: #A0A0A0; display: inline-block; font-family:arial; font-size: 12px; font-weight:bold; height: 24px; width:300px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top; } #searchinput:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 5px 15px 5px 28px; } #searchbutton { background:#444; color:#fff; height:35px; border-radius:5px 5px 5px 5px; box-shadow:1px 2px 1px 1px #ABABAB; border:1px solid #fff; margin-top:3px; padding:8px; cursor:pointer } #searchbutton:hover{background:#555;} #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; } </style> <div id="error-404"> <span>404</span></div><h1 class="large-heading" style="text-align: center;">Page not found.</h1><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 you were looking for doesn't exist. <br/> Kindly do one of the followings: </font></strong></p><ol style='line-height: 25px'><li><a href='javascript:history.go(-1)'>« Go Back</a> </li><li>Report the Problem to us by Clicking <a href='CONTACT PAGE URL'>Here</a></li><li>Go To Homepage by Clicking <a href='HOMEPAGE URL'>Here</a> </li><li>Search Anything Using Below Search Box</li></ol><center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'><input id='searchinput' name='q' onblur="if (this.value == '') {this.value = 'Search the site';}" onfocus="if (this.value == 'Search the site') {this.value = '';}" type="text" value="Search the site"/><input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/></form></center>

• Replace 'Contact Page URL' with your Contact Page link.
• Replace 'Homepage URL' with your Blog or Website URL. 
• Now Click on Save Changes to save your error 404 page.

Check this Page:
After adding this page in Blogger Blog, now you want to see this page that how it looks in your blog. 

To check this professional error 404 page, enter any incorrect URL of your blog in the Browser's address bar and hit enter.

Final Words:
So friends, this is professional 404 page for blogger blog and websites. I hope you will enjoyed this error page. Also Subscribe PC Gats for upcoming posts and also Share it with your friends.

Add Professional 404 Error Page in Blogger Blog 2013-08-06T17:26:00-07:00 Rating: 4.5 Diposkan Oleh: Iwa Crot