Unique tips of blogging

Advanced Custom 404 Error Page with Search Box For Blogger

When someone types get into your blog on a deleted post or page or the post which is not available then where the page is redirect is called 404 Error Page. It is very important to impress Search Engines and get a better impression from visitors too.


You can set it directly from your blog's settings page. In this custom 404 error page there is a a go back button, homepage link and a contact us link. It also has a great looking search box in which visitors can search for a specific post they are looking for.So lets start rolling your fingers on the tutorial.


Demo


By Default, your Blogger Error page will display this error message


You can Customize this message beautifully to something else from the Blogger Settings.


 Copy the below codes and paste in that box

<!-- BloggerTricksTips.Com 404 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='http://www.bloggertrickstips.com/contact'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='http://www.bloggertrickstips.com'>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.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><p style="display:none;"><a href="http://www.bloggertrickstips.com/">Blogger Tricks Tips</a></p>
That all! You have a beautiful 404 error page in your blog. Don't forget to share and comment about this post till then Peace, Blessings and Happy Redirecting.
Tag : TIPS
0 Komentar untuk " Advanced Custom 404 Error Page with Search Box For Blogger "


Back To Top