Thursday, 28 November 2013

Create Professional 404 Error Page With Search Box in Blogger

Every blogger wants to get extra traffic to his blog and hence he do all of the possible practices. One of the best practice to get more blog pageviews is to add 404 Error Page. A 404 Error Page is a page of our blog which displays when someone land on our blog using a broken link. After adding 404 Error Page,when someone land to your blog using a broken link then a Professional 404 Error Page displays which contains a link to your homepage, your contact page,Go Back Button and a Professional Looking Search Box which surely helps you to get extra traffic to your blog and improves your blog's bounce rate. I hope you understand the benefits to add it to your blog so what are you waiting for, let's go ahead.

LIVE DEMO

Also Check:



Features of 404 Error Page:


  • Full Page Width : To make this Error Page more professional we added full width to this,which hides all your sidebar widgets.
  • Go Back Option : It also contains a Go Back Javascript Button which enables the visitor to go back to the previous page.
  • Homepage Link : This page contains your homepage link so that the visitor can go to your homepage and take a look to your new posts.
  • Contact Page Link : If your visitor feels any problem and wants to take your help then it can directly get in touch by the contact page.
  • Search Box : It also includes a search box so that the visitor can search your blog posts.
  • Big 404 Logo : This logo represents that you landed on a broken link and helps to understand itthe broken link better.

How to Add:



  • Go To Blogger >> Settings >> Search Preferences
  • In the Crawlers and Errors Section, Look For Custom 404 Page and Click on "Edit".
  • Now a box will appear where you have to paste the following code.
<!-- MyBloggerBuzz 404 Error Page -->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do 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='CONTACT PAGE URL'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a>
      <br/></li>
<li>Search 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;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='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 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-box.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 "CONTACT PAGE URL" With Your Contact Page Link
  • Replace "HOMEPAGE URL" With Your Homepage Link 
  • Click "Save Changes" & You Have Done!

Now Check this using any broken url like this:

http://www.yourblog.com/404 or anything.

These are the easy steps to add 404 Error Page to your blog. It;s your turn to share this post with your friends and write your views in comment box till then Peace, Blessings and Happy Creating.

No comments:

Post a Comment