There is no good impact of visualizing a badly designed and poorly written 4o4 error page of your blog. Let's start the discussion. In the ancient Blogger user interface there was no right in the hands of a blogger to edit the 404 error page but in the new interface it's possible because now this feature has a lot of weight because of SEO and hence is taken into search preference section.
What is 404 Error Page ?
It is a HTML web page which is in prevalence to show the error when a user fault fully opens a broken or not found location. In other words, when you enter an incorrect URL which is a suffixed to your blog URL then that page appears.Professional Error Page
You can have a professional looking 404 error page on your blogger blog very easily.Features
Advantages of this page are listed below.- Full Page Width : This page consumes the full width of your blog and hence look professional.
- User Friendly Message : It conveys a message that is soothing and relaxing. Your audience is not gonna go rude after landing on a 404 error page.
- Go Back Link (JavaScript Link) : The link which was recently visited will be linked with the help of JAVA SCRIPT and your audience will get back to that page as they will click the link.
- Report Problem To Us (Link To Contact Page) : making your website professional, this page consists a link to the contact us page to land users to a contact form page where they can contact you.
- Go To Homepage (Link) : So this is a common homepage link for better navigation. How to Add ERROR 404 Page
How to Install?
- Go To Blogger >> Settings >> Search Preferences
- In the Crawlers and Errors Section, find Custom 404 Page and Click on "Edit".
- Now a box will appear where you have to paste the following code.
<!-- Yesiamblogger 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(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/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 belowhttp://www.yourblog.blogspot.com/404
http://www.yourblog.blogspot.com/FO
All Done . Now Enjoy.
EmoticonEmoticon