Customize/Redirect Custom Page not Found in Blogger

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

<!-- INFIBLOGGER 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: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpqmBTJM5BPfyBMAUYuED-WDzmRQ_Z-czTPkPMufcBwJSbyZ23QmsaXJIH24qqpOhgpafp98UrE6vqCCQ6GrBIQGucQXa1vTWFgyHKcQvJtPy6A0yzq8RdZcVtt9sxYMmQ2gVGGyYfQwO4/s0/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 .

Infiblogger

Search This Blog