Aug 25, 2016

Add An Attractive One 404 Error Page to Blogger

404 error page, custom 404 page, error page blogger
Hey Bloggers. We hope you all are fine. We are once again with another blogger widget. Yes, Today we are here for guide you "How To Create 404 Error Page in Blogger?" In one of our previous post we have shared a article on creating custom 404 error page in blogger and this is,second version of that post.

create 404 page, design 404 page, blogger error 404 page, page not found blogger, 404 error page, custom 404 page, error page blogger

Live Demo

Actually, "404 Error Page" is a page which appear when visitor clicks on a broken link (Incorrect URL) and says to the visitor the page you clicked no more exits or is deleted. By default blogger user can only add plain text along with HTML tags inside the "Custom Page Not Found" input box using search preferences option page. The message display using this technique looks too ugly and we would therefore need a better technique to design a attractive 404 Message for a Blogger blog.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme - A Responsive Blogger Template.
Also Read: Viral Grid-Mag Responsive Blogger Template - Free & Professional Version. 

But, Do you know we can add some extra features on 404 error page of Blogspot blogs using "Custom Page Not Found" which you can find on search preferences option page and also we can add some extra features to 404 error page using error_page conditional tag inside blogger template code area. We are going to share second technique because this technique is more powerful than first one.

Features of This 404 Error Page

  1. Nice Designed.
  2. Go Back Button.
  3. Contact Us Link.
  4. Attractive Message.
  5. Search Box.
We hope these above features are those features which now a days every one (including me) want on their 404 error pages. So without wasting more time, lets get back to the tutorial to learn that how we can create custom 404 page for blogger.

Add 404 Error Page in Blogger

STEP1] Go To >> Click On Template >> Backup Your Template >> Click On Edit HTML.

STEP2] Using CTRL+F (Windows) or CMD+F (Mac) and search for </head> tag and paste below whole code just above of the </head> tag.

<!-- Error-Page-Start -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <style type='text/css'>
.error-container{background-color:#000;display:table;height:100vh;overflow-x:hidden;width:100%; background-image: url(;}
.status-msg-wrap {
font-size: 98%;
margin: none;
position: static;
      width: 100%;}
.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;
#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( no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-size: 12px;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
#searchbutton {
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
<style type='text/css'>
  .ct-wrapper, .outer-wrapper, .nav_wrapper, .menu, #creditwrap, #menu1, #footer, .footer-top, .header-wrapper  {display:none!important;}
<span class='error-container' style='padding:10px 10px 10px 10px;'>
<p><span style='line-height: 30px;'><strong>
<font color='#ff0000' size='5'>
</font> <font color='#fff'>
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 😀 :
<ol style='line-height: 25px; color:#fff'>
<li><a href='javascript:history.go(-1)' style='color:#FF0000;'>&#171; Go Back</a> </li>
<li>Report the Problem to us by <a href='' style='color:#FF0000;'>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='/' style='color:#FF0000;'>Clicking Here</a>
<li>Search Anything Using Below Search Box</li>
<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 and Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here and Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br/> <br/> <br/>
  <p align='center'> <font color='red' style='font-size:150px; font-weight:bold;'> 404 </font></p>

STEP3] Now, Change contacting link with your blog contacting link.

STEP4] Now, Click on save template. That's it.

Also Read: How To Add Stylish Email Subscription To Each Post's Footer in Blogger?
Also Read: Add Jumbo Social Sharing Counter Widget to Blogger.
Also Read: Stylish Contact Form for Blogger Static Pages. 


So above guide is about "How To Create 404 Error Page in Blogger?" We hope by this complete guide everyone can easily implement the new stylish error page to their blogger blogs. If anyhow problem persist after following all steps then drop a comment below using comment box. Do Share and Subscribe.
Thank You! Stay Blessed!


  1. How can I add the cloud label widget coz my label widget is showing list

  2. Go To Blogger >> Layout >> Add A Gadget

    Select Labels from the list >> On Display Setting Select Cloud and Check on Show Number of Posts Per Label

    Click On Save.

    Thats it.


We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.