Wednesday, 16 September 2015

Customize/Redirect Custom Page not Found in Blogger

1 comment
Today , I am writing on 2 topics in the same post which are mutually related to each other . Some people wants to show custom 404 error message and some of them wants to redirect their traffic to homepage or other URL . This can be achieve when you follow below guide/tutorial completely . I added both type of custom 404 page handling techniques which are
1. Custom 404 page with navigation links and
2. Redirection to homepage technique .

  Both of the techniques are widely used but most preferred one is first technique . The season being that in 2 redirection technique your visitors doesn't know that you have an error ,. Because the time limit for redirection is only 5 seconds.
Read: Related Post Widget For Bloggers.

What is a 404 error page .

Its a page that shows . A error message when your server doesn't find a url pointing to valid webpage of your website. Its good to show custom 404 error so that a visitor knows whats the cause for that error.

Steps to customize bloggers 404 error page.

1. Go to Blogger.com >>
2. Go to Settings >>
3. Go to Search Preferences >>
4. Click on Custom Page Not Found under Errors and Redirection section .
5. Now click on edit button and a box will open and you have to paste one of the 2 below codes.

OPTION 1 : custom 404 page blogger

<!-- SEO SMO 404 error Page -->
<p style='line-height:
28px'><b>
<font size='6' color='#ff0009' >
Ooops! </font>
<font color='#666667'>
The page you are looking doesn't exists . <br/>
Kindly do one of the
followings:</font></b></p>
<ol style='line-height: 24px'>
<li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
<li>Go To Homepage by <a
href='YOUR HOMEPAGE URL'>Clicking
Here</a>
<br/></li>
<li>Search THIS WEBSITE Using Below custom 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 ==
&apos;&apos;) {this.value =
&apos;Type Here & Hit
Enter&apos;;}' onfocus='if
(this.value == &apos;Search the
site&apos;) {this.value =
&apos;&apos;;}' 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='6'>Page Not Found!</
font></p>
<br /> <br /> <br />
<p align='center'> <font
style='font-size:160px; font-
weight:bold;' color='red'> 404 error </
font></p>
<style>
.status-msg-wrap {
margin: 0px;
font-size: 99%;
width: 99%;
position: static;
}
.status-msg-border {
display:none
}
.status-msg-body {
text-align: inherit;
position: static;
z-index: auto;
padding: 0px;
width: 99%;
}
.status-msg-wrap a {
text-decoration: inherit;
padding: 0px;
}
#sidebar-wrapper, #midsidebar-
wrapper, .gapad2, .blog-pager,
.post-header-line-1, .post-footer ,
#rsidebar-wrapper
{ display:none !important;} #main-
wrapper { width:97%!important;}
.post { width:97%!important; }
#searchinput {
background: #FFF url
(http://1.bp.blogspot.com/-
DqsSIdDHoXE/UC7emvfWcII/
AAAAAAAAAwo/X7HUuvC4oBs/
s000/search.png) no-repeat 8px
9px;
background-color: #FEE;
display: inline-block;
border: 1px solid blue;
color: #A0A0A;
font-weight:bold;
font-family:arial;
width:310px;
height: 22px;
margin-top: 4px;
vertical-align: top;
font-size: 14px;
padding: 4px 12px 4px 24px;
margin: 0px;
}
#searchinput:hover{
border: 2px solid #bebebe;
box-shadow: 0 1px 2px rgba(5,
95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
color:#fff;
background:#444;
height:35px;
box-shadow:1px 2px 1px 1px #
ABABAB;
border-radius:4px 4px 4px 4px;
border:2px solid #fff;
padding:9px;
margin-top:4px;
}
#searchbutton:hover
{background:#555;}
</style>
6. Replace ” YOUR  HOMEPAGE URL HERE ” with your
blog’s  ADDRESS.
7. Click on SAVE CHANGES & You are Done.

OPTION 2 : Redirect 404 Error Page ( Page Not Found ) to Homepage in Blogger

Just copy and paste below JavaScript  code .
<b> Sorry, the page you're looking for in this
blog does not exist.
You will be redirected to homepage
shortly. </b>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function()
{
location. pathname= "/ "
}, 4999);
</script>
6. Customization :
1.   The 4999 value in above script is the time taken by your webpage to redirect you to your homepage .
2. If you want to redirect 404 error page to custom link , then just replace pathname with href and "/" with your custom link other than your blog's homepage .
7. Save these and you will see redirection of 404 page to your homepage after 5 seconds.

Pro Blogger tip :

Use option 1 for custom 404 error page and at the end of option one code just add JavaScript of option code . Be sure to modify time limit from 4999 to 9999 . So that your users have 10 seconds to read your error message .

1 comment:

Spam Comments will not be published here. Please post relevant comments to get comments published.