Wednesday, 16 September 2015

Customize/Redirect Custom Page not Found in Blogger

2 comments
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.

Related :

  1. Related Post Widget For Blogger Blog With Thumbnails 
  2. How to Create Categories in Blogger 
  3. How to Submit Blogger Sitemap To Google and Bing 
  4. How To Remove Powered by Blogger In Blogger Blog 
  5. Related Post Widget For Blogger Blogs 

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 .

2 comments:

ADD YOUR QUERIES HERE AND GET DOFOLLOW BACKLINKS TO YOUR SITES

Note: only a member of this blog may post a comment.