How Increase Page View Secret Tip
What is 404 Error Page ?
It is a web page that is getting used by all websites to indicate the error once somebody enters into a broken or not found location. In other words, once you enter an incorrect address then that page appears. Basically, therein page the error message and a few choices area unit further 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 due to it's designed with CSS3 and it contains some great options for better navigation. first of all have a glance on it.
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.
You Also Like to Know How to Redirect 404 Page to Home 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 Page Not Found and Click on "Edit".
- Now a box will appear where you have to paste the following code.
<!-- Blogofblogger.com 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/AVvXsEi7qJtQEOh1Q5l6hgecPaso-hQPX3nOX-_r4ItUlOUTK228sdCP-Y4bkSQUFwWz7VwB_2Uz2u8R3MIeE2qCRO7p_t0PGYsRV7RXNjpSGzIlEVfBB_bY1awPJvYdmhUnXx25haIXMO_yshfs/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 putting in this page, currently need to|you need to} want to visualize that page that however it's like in your own blog. so as to check that page, enter any incorrect URL of your blog within the address bar and hit enter. look into the example below.http://www.yourblog.blogspot.com/anythingcanbehere
http://www.yourblog.blogspot.com/blablabla
Got it ?
This comment has been removed by the author.
ReplyDeleteHow to Hide or show widegets and gadgets in blogger
ReplyDelete