Create Professional 404 Error Page
As we're discussing on Blogger's search preferences setting today here I'm back with another amazing tutorial and a professional 404 error page. After reading the title of the post, You've known about our today's topic. So let's begin the discuss. In the past with old Blogger interface we're unable to create a custom error page but now it's possible because now that option is also available in search preferences settings. In the past when someone enters into a not found page, The blogger used to show a message which was extremely different from original blogs. Well, These are old things which are now modern. Those who don't know about 404 Error page can read the below passage to understand it.What is 404 Error Page ?
It is a web page which is being used by all websites to show the error when someone enters into a broken or not found location. In other words, when you enter an incorrect address then that page appears. Basically, In that page the error message and some options are added for better navigation. Got it ?
Professional Error Page
So, here I've brought a professional 404 error page or not found page for all Bloggers. This page is professional because of it is designed with CSS3 and it contains some great options for better navigation. First of all have a look on it.
How To Install This Page ?
Well, After reading about that professional error page now everybody may want to install it in their blogs. So this is free for everyone and you can easily install it by following the simple steps below.
- Go To Blogger >> Settings >> Search Preferences
- In the Crawlers and Errors Section, Look For Custom 404 Page and Click on "Edit".
- Now a box will appear where you have to paste the following code.
<!-- Blogger Yard 404 Page --> <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 <a href='CONTACT PAGE URL'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li> <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a> <br/></li> <li>Search Anything Using Below Search Box</li> </ol> <br /> <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 = 'Type Here & Hit Enter';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Type Here & Hit Enter'/> <input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/> </form></center> <p> <br/> <br/> <br/></p> <p align='center'><font size='5'>Page Not Found!</font></p> <br /> <br /> <br /> <p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p> <style> .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; } #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; } #searchinput { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8UQO0kGlqzaHax0GXsPRnNIekrM5HpCk3mxch6NeQaNyZTgpBOzbcczun7_z1a1bAuJc8AlgueHz9icv7S6ePHLewv7smcyP1T8vcgoqE5nS8nKkSe62gvNCRADbW05Ckj_Xz3eH0GJHc/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; } #searchbutton:hover{background:#555;} </style>
- Replace "CONTACT PAGE URL" With Your Contact Page Link
- Replace "HOMEPAGE URL" With Your Homepage Link
- Click "Save Changes" & You Have Done!
How To Check This Page ?
After installing this page, now you must want to see that page that how it looks like in your own blog. In order to check that page, enter any incorrect url of your blog in the address bar and hit enter. Look at the example below.
http://www.yourblog.blogspot.com/anythingcanbehere http://www.yourblog.blogspot.com/blablabla
Share On
