Add Professional 404 Error Page in Blogger Blog

Add Professional 404 Error Page in Blogger Blog

Today Im 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 weve 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.
Dont 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.

<!-- KB Tricks 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/AVvXsEjkCt9AzKf7QYGj-Ni5pbsZMG6RVe92pGSUNTyDhYFzaO2Km-MYCSRviLmr4LhOB6Mda0I0Q8nR-Ks_Uf_FscNeaNIyBBmgo4vA9JBzf_BbuztcCsbSHFrHlPmh66rb3e812FaNZBGYKxWg/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 doesnt exist. <br/> Kindly do one of the followings: </font></strong></p><ol style=line-height: 25px><li>� Go Back </li><li>Report the Problem to us by Clicking Here</li><li>Go To Homepage by Clicking Here </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 Browsers 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 Us for upcoming posts and also Share it with your friends.

visit link download