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.
- Don't Miss : Google Adsense High Paying Top (CPC) Keyword List
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.
<!-- 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/AVvXsEhmGJuMACJe_APxdEKkbDwDtum0gVoqkc08-IXGG2UYD8jq4yqjFr396u7PrLJWkHU4hjbz9eookBWKOVRjIDM_VKyWQVmmCHV4Swt-6HwBHK3dm7GN8TFyOi8NVGFzX6wvhOzjOnH-Aley/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/anythingcanbehereGot it ?
http://www.yourblog.blogspot.com/blablabla
What's More ?
So friends, It was our custom 404 error page which is really 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.
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!
.jpg)
Post a Comment