you can Create Professional 404 Error Page in blogger

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.

LIVE DEMO

Features

This page has some good features which I've listed below.

Full Page Width : This page has full width which will hide your sidebar widgets section and that is what which makes this page more professional.
User Friendly Message : It contains a user friendly message which will tell your readers that they have entered into an error page.
Go Back Link (JavaScript Link) : Go back link is also added so that if your readers was reading an article then accidentally he/she clicked on any broken link and with the help of Go back link he/she will get your article back easily.
Report Problem To Us (Link To Contact Page) : The reason of adding contact page link is that if any page of your blog is deleted then the user may report to you for better service.
Go To Homepage (Link) : So this is a common homepage link for better navigation.
Stylish Search Box : We've added an stylish search box in that page you that if your visitor is about to find something then he/she may search it easily with that search box.
Big 404 Logo : In the last, this page contains a big 404 logo by which let your readers know that they have landed on a broken link or not found page.

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.

<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!

Socializer Widget By Heath-Tricks

SOCIALIZE IT →

Thursday 2 July 2015