Error 404 Page for blogger

It is very bad if a new user comes to your blog and gets an error 404 or page not found. It can be happen for many number of reasons like URL typo, index problems or just bad template coding. And in this article I will be showing you how to add a custom error 404 page. Click here to see its live demo and click here to see in codepen

What is Error 404

The HTTP 404 Not Found Error means that the webpage you were trying to reach could not be found on the server. It is a Client-side Error which means that either the page has been removed or moved and the URL was not changed accordingly, or that you typed in the URL incorrectly.

How to add it in Blogger

1. Go to blogger>Click template>Edit html>Copy and paste the below code above ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Roboto:900);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

#error-404  {
    background: #333;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 400;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    , sans-serif;
    position: fixed;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
    z-index: 9999;
    left: 0px;
}
#error-text  {
    top: 30%;
    position: relative;
    font-size: 20px;
    color: #eee;
}

#error-text a {
    color: #eee;
    text-decoration:none !important;
}

#error-text a:hover {
    color:#f35d5c;
    text-decoration:none !important;
}


#error-text p  {
    color: #eee;
    margin: 50px 0 0 0;
}

#error-text i  {
    margin-left: 10px;
}

#error-text p.hmpg  {
    margin: 20px 0 0 0;
}

#error-text span  {
    position: relative;
    background: #ef4824;
    color: #fff;
    font-size: 450%;
    padding: 0 20px;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    ,  sans-serif;
    font-weight: bolder;
    transition: all .5s;
    cursor:pointer;
}
#error-text span:hover  {
    background: #d7401f;
    color: #fff;
    -webkit-animation: jelly .5s;
    -moz-animation: jelly .5s;
    -ms-animation: jelly .5s;
    -o-animation: jelly .5s;
    animation: jelly .5s;
}

#error-text span:after  {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "
     "
    ;
    height: 0;
    
width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #ef4824;
    border-width: 7px;
    margin-left: -7px;
}

@-webkit-keyframes jelly {
    
from, to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
25% {
    -webkit-transform: scale(.9, 1.1);
    transform: scale(.9, 1.1);
}
50% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
75% {
    -webkit-transform: scale(.95, 1.05);
    transform: scale(.95, 1.05);
}
}
@keyframes jelly {
    
from, to {
    -webkit-transform: scale(1,  1);
    transform: scale(1, 1);
}
25% {
    -webkit-transform: scale(.9, 1.1);
    transform: scale(.9, 1.1);
}
50% {
    -webkit-transform: scale(1.1, .9);
    transform: scale(1.1, .9);
}
75% {
    -webkit-transform: scale(.95,  1.05);
    transform: scale(.95,  1.05);
}
}

@media only screen and (max-width:640px) {
    
#error-text span  {
    font-size: 200%;
}

#error-text a:hover  {
    color: #fff;
}
}
.back:active {
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  transform:scale(0.95);
  background:#f53b3b;
  color:#fff;
}
.back:hover {
  background:#4c4c4c;
}

.back {
  text-decoration:none;
  background:#5b5a5a;
  color:#fff;
  padding:10px 20px;
  font-size:20px;
  font-weight:700;
  line-height:normal;
  text-transform:uppercase;
  border-radius:3px;
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
  transition:all 0.5s ease-out;
}

2. And paste the below code below <body> tag

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-404'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND</p><p class='hmpg'><a class='back' href='/'>Back To Homepage</a></p>
</div>
</div>
</b:if>

You May Also Like

2 comments