Create 404 Error page in Blogger Prajjwal Rajput Friday, June 20, 2014 No Comment

Hello Friends we're discussing on blogger in our previous post we're shared a Sitemap page for blogger this page was help you to increase your crawler index for Google search results and it also improve your page rank. Today here I'm back with another amazing and simple tutorial this is a create 404 Error Page in Blogger blogs. After  in default blogger template you are not to add custom and professional's style 404 Error Page but now it is possible in all blogger templates with stylish 404 Error page in old blogger interface didn't contain this search preferences but in days this feature available in new blogger interface.

The blogger platform used to show a message when your visitor click a broken link or deleted post then your blog visitor will seen look like this message ("Sorry Page Not Found") then your visitor are angry was going to where this is the big problem to decrease your blog visitors but now this not a problem this is a solution for this problem today I am shared an amazing 404 Error Page for your blogger blog.

What is 404 Error Page?

Error Page is the webpage which is used by many professionals website and blogs. This page show when someone visit in a broken link or deleted posts of your website or blogs then that page appears. Basically In this Page the error message and Search box for great navigation for your visitors.

What's new in this Page?

So, I have offer a professional 404 Error Page for free for blogger blogs. This Page is professional? why? Because I can add this page in many CSS and HTML Codes and also added a Search box with hover effect and it contain some great option for your visitor like Hyperlinks for better navigation and easy to us. Before add this page in your blogger blog see this demo below.

                                             

LIVE DEMO

Features:
This page has some brilliant features which I've listed below.

• Stylish Search Box : I have added a stylish search box with hover effect. If your visitor not found own thing so, then visitor using this search box to find their favorite or desired posts.
• Contact Us Page Link : This page contain an contact page link mean when your visitor enter this error page then your visitor to submit their report problem to you with the help of this page.
• Full Page Dimensions : This Page has full width and height which will hide your sidebar widgets and this thing make this page more and more stylish and professional.
• Hyperlink : I have added a homepage link of our blog but you need to change with your blog homepage link. This link helps your visitor to go your blogger blog's main page or home page.
• Go Back Link : I have also added a Go back link using JavaScript if your visitor reading a posts then your visitor click on broken link by the mistake then he will using this Go back link to get their same posts.
• Colored 404 Logo : In this last feature, this page include a big and red big 404 logo by which let your readers know that they have click and broken link. 

How Add 404 Error Page in Blogger Blogs?

After reading this feature and about this page let's start to add this professional 404 Error page in your blogger blog. Just follow below steps.

• Go to Blogger Dashboard>>Settings>>Search Preferences
• Go to "Error and redirection" section
• Look at "Custom Page Not Found" then click on "Edit"
• Like below image

• Now a box will appear where you have to add this following below code.

  <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://nextbloggertricks.blogspot.com/p/contact-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.nextbloggertricks.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0z9WqhFrSyL2KklG7v0EdJBXmyUJmBGC0WY1o1YPqDwj0C5eHP_tRmSNhfjzkb54ezhM2IslpXmo3NORUGyMxsl1IxkjQ2EgFjaNDICMuwqGoeQq5CzI4ppTbxzAOBg0JlC4eZxZfqhsf/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 http://nextbloggertricks.blogspot.com/p/contact-us.html with your Contact Page
• Replace www.nextbloggertricks.blogspot.com with your home page 
• Click on Save Changes 
• You've done!

How to Check This Page Preview?

After installing this page and replace above link with your links then enter this URLs in your browser address or add anything after your blogger blog URL like this below examples.

http://yourblog.blogspot.com/404
http://yourblog.blogspot.com/typeanyword

Then you will see your own 404 professional Error Page.

Final Words
So friends you can this page in your blogger blog for your increasing page views. I hope you can this page in your blog without any mistake if not? so, leave a comment for your solution and don't forget to like our Facebook Page and Keep Visiting our blog.
Happy Blogging! 

Tweet

Tags: SEO / Tutorials