Make/Design A Custom Blogger 404 Error Redirection Page CSS/HTML

Did you ever wanted to create a custom 404 error page for your blogger blog? Previously, Blogger didn't supported this amazing feature and there was no way out to do so. People tried various technique but non worked like the one that we are equipped with today.

design custom 404 error page for blogger
If you wish to know more about the latest SEO developments from Blogger team, you may like to read:


So in today tutorial, as the title suggest, we will be creating our custom great looking 404 error redirection page for our blog.

What Is Blogger 404 Error Redirection Page?


Its simple. Say a visitor lands on a broken page/post on your blog say, (http://yourblogname.com/4odn) that doesn't exists any more, than he would be redirected to the error page. So before the new development (option to create a custom 404 page), the visitor was shown up an ugly page as shown below.


so now, we will be designing this ugly looking error message to an elegant custom CSS/HTML powered page as shown below.

What We Will Be Achieving?

 

DEMO

Lets start!

Go to Blogger in Draft (the new version) >> Settings >> Search Preferences >> Custom Page Not Found.


Click 'Edit' button right next to 'custom page not found' and follow the steps below.

Designing Phase

Below is the CSS code for custom 404 error page. Simply copy/paste it in the edit section mentioned before.

Step 1:


<style>

//** BloggingeHow Blogger Custom 404 Error Page**//

/* Page title */
#header h2 {
 color: #187086;
}

/* Page links */
#text a:hover {
 color: #16687d;
}



/* Page title */
#header h2 {
 color: #4b3a15;
padding: 10px;
}

/* Page links */
#text a:hover {
 color: #4b3a15;
}



/* Page title */
#header h2 {
 color: #6c8b2f;
}

/* Page links */
#text a:hover {
 color: #6c8b2f;
}



/* Page title */
#header h2 {
 color: #4d4d4d;
}

/* Page links */
#text a:hover {
 color: #4d4d4d;
}


/* Page title */
#header h2 {
 color: #b32222;
}

/* Page links */
#text a:hover  {
 color: #b32222;
}



/* Reset */
* {
 margin: 0 auto;
 padding: 0;
}

/* Body */
body {
 background: url(../images/background.jpg) no-repeat top #FFFFFF;
 text-align: center;
}

/* No borders around images */
img {
 border: none;
padding:5px;
}

/* Warp around everything */
#warp {
 margin: 0 auto;
 margin-top: 50px;
 width: 730px;
 font-family: Helvetica;
 text-align: left;
padding: 5px;
}

/* Header */
#header_top {
 background: url(../images/top.png) no-repeat;
 width: 730px;
 height: 30px;
}

/* Header content */
#header {
 background: url(../images/box_bg.png) repeat-y;
 width: 730px;
 text-align: left;
}

/* Page title */
#header h2 {
 padding-top: 5px;
}

/* Subtitle */
#header h5 {
 margin-top: 5px;
 padding-bottom: 15px;
 color: #acacac;
}

/* Content div */
#content {
 background: url(../images/content_bg.png) repeat-y;
 width: 730px;
}

/* The info text */
#text {
 float: left;
 margin: 60px 0px 40px 60px;;
 width: 330px;
 /* IE margin fix */
 display: inline;
}

/* The info text P */
#text p {
 margin-top: 30px;
 font-size: 14px;
 line-height: 20px;
 color: #292929;
}

/* The links list */
#text ul {
 margin-top: 30px;
 margin-left: 0px;
 list-style: none inside;
 font-size: 12px;
 font-weight: bold;
 font-size: 15px;
}

/* The list items */
#text li {
 padding: 5px 0px;
 margin: 0;
}

/* The links */
#text a {
 color: #292929;
 text-decoration: none;
}

/* Link hover */
#text a:hover {
 text-decoration: none;
}



input:focus {
 outline: none;
}



/* COLOR CHANGER */
#colorchanger {
 text-align: left;
}

#showChanger {
 margin-left: 10px;
}

#colors {
 padding: 10px;
 background: #425a5e;
 height: 17px;
}

/* The div around the color change links */
.colorbox {
 width:15px;
 height:15px;
 border:1px solid #050505;
 float:left;
 margin:0px 2px;
 cursor:pointer;
 display:block;
}

/* Blue */
.colorblue {
 background-color:#1e82ac;
}
/* Blue Hover */
.colorblue:hover {
 background-color:#177197;
}

/* Red */
.colorred {
 background-color:#cc2b2b;
}
/* Red Hover */
.colorred:hover {
 background-color:#af1a1a;
}

/* Grey */
.colorgrey {
 background-color:#4d4d4d;
}
/* Grey Hover */
.colorgrey:hover {
 background-color:#7c7c7c;
}

/* Brown */
.colorbrown {
 background-color:#4b3a15;
}
/* Brown Hover */
.colorbrown:hover {
 background-color:#5e4b20;
}

/* Green */
.colorgreen {
 background-color:#6c8b2f;
}
/* Green Hover */
.cologreen:hover {
 background-color:#7da137;
}
</style>

Step 2:


Now is the time to place the backbone HTML part of the page. Likewise, copy paste the below code and throw it in the edit section again.

//** BloggingeHow Blogger Custom 404 Error Page**//

<!-- Colorchanger div -->
 <div id="colorchanger">
  <div id="colors">
   <!-- Blue -->
   <a class="colorbox colorblue" href="indexca00.html?theme=blue" title="Blue Theme"></a>
  
   <!-- Grey -->
   <a class="colorbox colorgrey" href="index0a59.html?theme=grey" title="Grey Theme"></a>
  
   <!-- Red -->
   <a class="colorbox colorred" href="index0e99.html?theme=red" title="Red Theme"></a>
  
   <!-- Brown -->
   <a class="colorbox colorbrown" href="index8e01.html?theme=brown" title="Brown Theme"></a>
  
   <!-- Green -->
   <a class="colorbox colorgreen" href="indexaf91.html?theme=green" title="Green Theme"></a>
  </div>
 

 </div>
 <!-- End colorchanger div -->

 <!-- Warp around everything -->
 <div id="warp">

 
  <!-- Header top -->
  <div id="header_top"></div>
  <!-- End header top -->
 

  <!-- Header -->
  <div id="header">
   <h2>Oops, page not found</h2>
   <h5>Somebody really liked this page, or maybe you mis-typed the URL.</h5>
  </div>
  <!-- End Header -->
  <br/> <br/> <br/>
<img src="http://1.bp.blogspot.com/-mkD1FKTdvXg/T26_v04_jLI/AAAAAAAADIY/mVwsA70MU78/s1600/404.jpg">
  <br/>
  <!-- The content div -->
  <div id="content">
 
   <!-- text -->
   <div id="text">
    <!-- The info text -->
    <p>Sorry, Evidently the document you were looking for has either been moved or no longer exists. Please use the navigational links to the right to locate additional resources and information.</p>
                <br />
    <h3>Lost? We suggest...</h3>
    <!-- End info text -->
   
    <!-- Page links -->
    <ul>
     <li><a href="http://www.bloggingehow.com">&raquo; Home</a></li>
     <li><a href="http://www.bloggingehow.com/p/write-for-us.html">&raquo; Write For Us!</a></li>
     <li><a href="http://www.bloggingehow.com/p/about-us.html">&raquo; About</a></li>
     <li><a href="http://www.bloggingehow.com/p/contact-us.html">&raquo; Contact</a></li>
    </ul>
    <!-- End page links -->
   </div>
   <!-- End info text -->
    
   <div style="clear:both;"></div>
  </div>
  <!-- End Content --> 
 
  <!-- Footer bottom -->
  <div id="footer_bottom"></div>
  <!-- End Footer bottom -->
 
  <div style="clear:both;"></div>


 </div>
 <!-- End Warp around everything -->

Thats all! Hit Save! And you're done.

How To View Your 404 Custom Page?

To view your page setup, simply type in anything random after your blog URL that doesn't exist for example.

http://yourbloglink.com/blabla

 

Confused?


In case of any problems, feel free to share them in the comment section below. smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Make/Design A Custom Blogger 404 Error Redirection Page CSS/HTML
Make/Design A Custom Blogger 404 Error Redirection Page CSS/HTML
http://1.bp.blogspot.com/-F8pzFL_5aWE/T27UThhv5QI/AAAAAAAADI4/SlxZe_xnci4/s1600/custom-404-error-page.jpg
http://1.bp.blogspot.com/-F8pzFL_5aWE/T27UThhv5QI/AAAAAAAADI4/SlxZe_xnci4/s72-c/custom-404-error-page.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/03/makedesign-custom-blogger-404-error.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/03/makedesign-custom-blogger-404-error.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade