miércoles, 8 de enero de 2014

Personalizar la página de error 404 - Mundo Blogger


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,  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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy1MLxP8v73Cy8zdBX6-JP6iTgy5Vyr-kAMXd0yukX5SNkqKXg1Qg1qswbIGynMuLO8Cz8HNdvLU2CO8ur2DtQfY7Q57QSNzJ15KCjhYw3sVuBEwfcf3jSPwSzBqQ3ES_dLbV9cXEeOEw/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy1MLxP8v73Cy8zdBX6-JP6iTgy5Vyr-kAMXd0yukX5SNkqKXg1Qg1qswbIGynMuLO8Cz8HNdvLU2CO8ur2DtQfY7Q57QSNzJ15KCjhYw3sVuBEwfcf3jSPwSzBqQ3ES_dLbV9cXEeOEw/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 comentarios:

Publicar un comentario

Atencion

Si deseas publicar alguno de nuestros posts en otro sitio web o blog, sólo te pedimos que coloques un enlace al post original de nuestro blog, un enlace es nuestro único requisito.

Buscador

Total visitas

Con la tecnología de Blogger.

Lo Más Visto de la Semana

Categorias

Mapa de visitas en 2D

Mapa de visitas en 3D