Mil Trucos Blogger

Personalizar la página de error 404

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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.”.

En este tutorial les mostraré una opción para modificar la página no encontrada, este truco lo ví en Tutoriales-Blogger, puedes el funcionamiento haciendo click en el siguiente botón:

Para integrarlo en nuestro blog nos dirigimos a Plantilla, Editar HTML y buscamos la etiqueta </body> y antes agregamos:
<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>
0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

8 Comentarios

  1. Anonymous Anonymous
    diciembre 28, 2013    

    Da error ;-(

    • enero 4, 2014    

      Perdon hubo un problema con el código, ya lo modifiqué :p

  2. Anonymous Anonymous
    diciembre 29, 2013    

    1 – b:if cond=”data:blog.pageType == “error_page””
    2 – style

  3. abril 14, 2014    

    :p thanks man

  4. diciembre 10, 2014    

    amigo tengo que darte las gracias me sirvioooooooooooooooooo graciassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo