Tutorial: Personalizar página de error 404 en Blogger

  • Autor Autor Gorak
  • Fecha de inicio Fecha de inicio
Gorak

Gorak

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Error 404 (Página inexistente), se manifiesta cada vez que entramos a un enlace 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 “Lo sentimos, la página que estabas buscando en este blog no existe”.

Nota no es reponsive (Moviles, tabletas, etc)

error-404[1].webp

Ver Demo

Para integrarlo en nuestro blog nos dirigimos a Plantilla, Editar HTML y buscamos la etiqueta </body> y antes agregamos:

HTML:
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
<style>
#error-not-found {
    background: #ff0000;
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(http://4.bp.blogspot.com/--Ri7FNhfPuU/T3p0_rWUvLI/AAAAAAAAHzU/v_V5cF2O9YM/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );  
        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..Lo sentimos</h2>
 <h2>Esta pagina no existe</h2>
 <p> <a title="home page" href="/"> Volver a inicio</a></p>
</div>
</b:if>

Facil y sencillo no?
 
Rápido y Sencillo!

Gracias por el aporte! 😛8:

Lo ocuparé !!!
 
Excelente, ya mismo voy a aplicarlo a mi blog :encouragement:
 
Te felicito hermano muy buen aporte :encouragement:
 
muy bueno amigo gracias por el tutorial lo voy a probar en un blog nuevo para ver muchas gracias de todas formas
 
Muchas gracias , me ha sido de mucha utilidad.
 
Siempre pensé que solo blogger podía modificar eso :welcoming: muchas gracias.
 
Gracias 🙂
 
Muy buena gracias por el aporte!
 
Voy a probarlo grax :welcoming:
 
Muchas Gracias me a servido y lo agregue a mi Blog.
 
Genial, muy bueno..
No sabía que se podía personalizar eso en blogger.
 
Atrás
Arriba