Today I am back with another amazing tutorial and a professional 404 error page. After reading the title of this 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 404 error page but now it's possible because now that option is also available in blogger in search preferences settings. In the past when someone enters into a broken links, old links or not found page, The blogger used to show a message which was extremely different from original blogs design. Well, These are old things which are now modern. Those who don't know about 404 not founded 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 links, old links, page that not available in web page or not found location. In other words,
when you enter an incorrect address then that page appears 404 Error page. Basically,
In that page the error message and some options are added for better
navigation. Got it ? Hope you understand.
Professional Error Page
So, here I've brought a professional 404 error page or not found page for all Bloggers blogs. This page is professional because of it is designed with CSS3 and it contains some great options for better navigation in your blog. First of all have a look this image .
Features
This page has some good features which I will listed below.
- Full Page Width : This page has full width which will hide your sidebar widgets section and gadget that you added 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 and where to go.
- 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 return back to article 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 to your visitor.
- 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 in your site.
- Big 404 Logo : In the bottom of the 404 page, 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 Errors and Redirections, Look For Custom Page Not Found and Click on "Edit".
- Now a box will appear where you have to paste the following code.
Code :
<!-- IndiHack404 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 404 Error page, now you must want to see that 404 Error page that how
it looks like in your own blog. In order to check that page, enter any
incorrect url with your blog url in browser address bar and hit enter. Look at the
example below.
http://www.yourblogurl.blogspot.com/anylink
http://www.yourblogurl.blogspot.com/whatever
What's More ?
So friends, It was our custom 404 error page which is really look fantastic. I
hope this will help you in making your blog more professional. In our
next post we're going to learn about custom page redirection in blogger to another website or blog or any url.
So be in touch with us more and don't forget to subscribe us to get hot
updates straight in your inbox. Take a lot of care of you and your
family. Cheers!
