Create Professional Custom 404 Error Pages for Blogger

404 error pages are the web pages which doesn’t exists. In short, If you will enter an incorrect URL in the address bar then the page will appear is called ” 404 error page ” If that will not be exists. Recently we have covered many articles on 404 error pages which you can read to know more about it.

• How to Find / Check 404 Error Pages Using Google Webmaster Tool
• How to Check Broken Links in Seo – Broken Link Checker
• How to Remove URL From Google Search Index
• Redirect 404 Error Page ( Page Not Found ) to Homepage in Blogger
• Add Custom Robots.txt File in Blogger

Recently one of our reader asked us through an email that how we can create a professional looking custom 404 error page for blogger blog that’s why I have decided to cover an article on this topic. In default 404 error page of blogger, blogger will just shows a message saying ” Sorry, the page you were looking for in this blog does not exist “.

But In custom 404 error page, we can add several features to our those readers who accidentally lands on the 404 error pages. We can customize it by giving the option to contact us, option to go to at the homepage of the blog etc.

DEMO : You can click here to see the demo of custom 404 error page. 

So without wasting more time, lets get back to the tutorial to learn thathow we can create custom 404 page for blogger. 

Create Professional Custom 404 Error Page in Blogger

1. Go to Blogger.com >> Settings >> Search Preferences >> Custom Page Not Found under Errors and Redirection section as showing in the below image.

2. Click on Edit then a box will appear as showing in the above image where you need to paste the following code.

<!– GlobalCraze 404 Page –>
<p style=’line-height: 30px’><strong>
<font color=’#ff0000′ size=’5′>
Oops!
</font> <font color=’#666666′>
It seems that you have accidentally landed on this page which does not exists because you may have either clicked on a broken link or entered the wrong URL in the address bar. Right ??? <br/> Kindly do one of the followings to go to the correct location of this blog  :
</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=’ENTER YOUR CONTACT PAGE URL HERE‘>Contacting Us Here</a>&#160;&#160;&#160; (<em>This will help us to serve you even better</em>) </li>
<li>Go To Homepage by <a href=’HOMEPAGE URL HERE‘>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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg34NgWrDpr5H6ijn6RiuYbt9gY26IcaBwjBm7lo9QYSyTZB1NCMhKXFQ1KKMxSM_1f7Y2tpIBVxMME-EqQZBsO-Y5myU3RBkpuUG-yXG_8WcRjB1CGp-pZi3ZJm4gPoB-Af5yOVsOohwBs/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>

3. Replace ” ENTER YOUR CONTACT PAGE URL HERE ” with your blog’s contact page link.

4. Replace ” HOMEPAGE URL HERE ” with your blog’s homepage link.

5. Click on SAVE CHANGES & You are Done. 

Final Words…

This was the complete tutorial to Create Professional Custom 404 Error Page for Blogger Blog. Now after following the above steps, you can easily create your custom 404 page for blogger. If you wants to check that how your custom 404 page looks then simply enter any wrong URL in the address bar like http://www.yourblog.com/404 etc & you will see your hard work there.  I’ll be thankful to you If you can subscribe to this blogto get the latest updates delivered to your mail box on the regular basis. THANKS FOR READING & HAPPY BLOGGING 

Advertisement