Personalizar la página de error 404

Error 404 (Página inexistente), se presenta cada vez que entramos a un enlace que no existente, enlace roto o quizá se encuentra mal escrito. El Error 404 de los blogs de blogger tiene por defecto un aspecto simple que contiene el texto.

En esta entrada les mostraré una opción para personalizar la página no encontrada mediante el uso de javascript  con el que podrás personalizar la página de error 404.


Nos dirigimos a Configuración ► Preferencias para motores de búsqueda, ►editar la opción "Mensaje de página no encontrada personalizado".

Presionar en Editar dentro del recuadro pegar el siguiente código

<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<style>
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}
#error-not-found {
        background: #ff0000;    
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-not-found  h1 {
        font-size:640px!important;
        position:absolute;
        font-family:impact,sans serif!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:81px;
        line-height:66px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:40px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id="error-not-found">
 <h1>404</h1> 
 <h2>Ops...!</h2>
 <h2>Lo sentimos</h2>
 <h2>Esta pagina no existe</h2>
 <p> <a title="home page" href="/"> Volver a inicio</a></p>
</div>
</b:if>

Para finalizar presionar Guardar los cambios, así tendrás personalizada tu página de Error 404