You Might also Like


Wednesday, July 31, 2013

How Create a custom 404 Error Page in Blogger

Hi Friends Today I'm sharing how to create a custom 404 error page. It is kind of page which appeared when a visitor click on a broken link. Now a days 404 error page is very important for blogger SEO. It helps to increase traffic on your blog. by following my steps you can create a beautiful 404 error page very easily.

How to Create a 404 Error page

Step 1.
Go to Blogger Dashboard > Settings > Search Preference.
Step 2.
Copy and paste the code below.
<div class='EBT-404-box'>
<p style='line-height: 30px'>
<font color='#ff0000' size='6'>Oops!</font>
<font size='4' color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits.
<p align='center'>
<font color='#a32b33' style='font-size: 150px'>
<p align='center'/>
<p align='center'>
<font size='5'>Page Not Found!</font>
 <p style='line-height: 30px'>
<font color='#666666'>
Kindly do one of the followings:
<ol style='line-height: 25px'>
<li><a href='javascript:history.go(-1)'>&#171; Go Back</a></li>
<li>Go To Homepage by <a href=''>Clicking Here</a></li>
<li>Report the Problem to us by <a href=''>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em></li>
<li>Use the below search to find what you need.<br/></li>
<div id="tvb-searchbox">
<form id="tvb-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="" id="sbutton" />

Now change the following:
Replace to your blog URL.
Replace to your contact page.

Step 3.
Go to your Template.

Step 4.
Backup your Template.

Step 5.
Edit HTML.

Step 6.
Find ]]></b:skin> in your Template.

Step 7.
Just Below ]]></b:skin> Add the following code.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#blog-pager {
text-align: center;
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 98%;
.status-msg-border {
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 98%;
z-index: auto;
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
.TVB-404-box {
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
box-shadow: 5px 5px 5px #CCCCCC;
background:url( no-repeat scroll center center transparent;
form#tvb-searchform{display: block;padding: 10px 12px;margin:0;}
form#tvb-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#tvb-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

No comments:

Post a Comment


Related Posts Plugin for WordPress, Blogger...

Like Us

Receive all updates via Facebook. Just Click the Like Button Below...

Provided By Blogger Yard