How to create custom error 404 page in blogger.

On: 15:47 By: Memes template 1 comments

How to create custom error 404 page in blogger.

It is the age of modern internet 100000+ blogs and website are present in internet.It is the common that any
professional website or a simple website or blogs contain many broken links,these broken links are very harmful for the website or blog author and its website future."Understand this by an example-[suppose i have urgent work in internet i have to find a note on blogger template within 30 minute.so i go to my favorite blog
because i believe that this blog have the finest content and i have use and like blog for a long period of time.
so i go to blog and search the keyword 'note on blogger template' i found this article and then i click on it.
at that time the link is been broken or removed by some reason and it goes to a external page and says that the page looking not available.after reading this i became angry with the blog because it waste my valuable time so in my mind there is a negative thought develop and i never go the blog and never recommend to
other friends and people.] this is the reason why we and our team recommend you to set up a custom error 404 page because this help you very much.
supoose you set up a custom error 404 page so if any user go to  a broken link the blog does not close and custom error 404 page open and said that "sorry the page you looking is not found" and allow user to go to lable and search the blog to open a different content and user will not much become angry with the blog.

Things that make this page differ than other 404 error page.

1. Stylish & modified search box.-This allow the user to search the blog to find other things in blog.
2. Contact us page link.-So the user can report the broken link to the blog author.
3. Hyperlink.-It is linked to blogger homepage and allow user easily to go to blogger homepage.
4. Go back link.-This allow the user to go to the previous page.
5. Coloured 404 eror logo.- This allow the user to says that you have click on a broken link.

How to add this 404 error page?

Just follows the step(1,2,3) given in image

coading:-

<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Sorry you have clicked a broken link that this link has removed by blogger Admin. <br/> Choose one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us by <a href=http://myblogingyard.blogspot.in/p/about-us.html>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Main Page by <a href=www.myblogingyard.blogspot.com>Clicking Here</a>
      <br/></li>
<li>Find 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 == &apos;&apos;) {this.value = &apos;Find Here&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Find Here'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Sorry Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='purple'> 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(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/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>

note;-

1.Replace http://myblogingyard.blogspot.in/p/about-us.html with your about us page

2.Replace myblogingyard.blogspot.com by your blog

3.Click on save changes

4.Yes your page have been set up.

If you have any problem with the above method be free to contact us without any hesitation we will surely try to resolve your problem and be happy to help you.you can ask your question by posting a comment or contact me through at my email

                         (ramprasad24000@gmail.com)