Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

13

2 formas como personalizar el error 404 en Blogger

El error 404 es de los mas conocidos en mundo del Blogging, ya que es una alerta que podemos ver en nuestras estadísticas cuando, por algún error o no, los buscadores o visitas entran a una de nuestras paginas internas que ha sido cambiada en su estructura o ya no existe.

Existen dos formas de personalizar el error 404 en Blogger. La primera y mas facil es a través del nuevo panel y diseño de Blogger, basta con tan solo ingresar el texto a mostrar cuando un usuario entre a una pagina de nuestro sitio que ya no existe.

Primero debemos de seleccionar el blog donde personalizaremos el error 404 y vamos a Configuración o Ajustes. Seleccionamos la opción “Preferencias para motores de búsqueda” y seleccionamos “editar” en “Mensaje de página no encontrada personalizado“. Ahí debemos de ingresar el texto a mostrar y listo!

La segunda forma un poco mas completa es a través de la personalización con CSS. Para esto debemos de ir al cierre de nuestra etiqueta BODY

y agregamos el siguiente código antes:
<!– CBT 404 Page Error Start –>
     <b:if cond=’data:blog.pageType == &quot;error_page&quot;’>
    <style>
    #error-not-found {
        background: #ff0000;
        background: url(https://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(https://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…. The Page You are looking for</h2>
      <h2>Not Found</h2><br/>
     <p> <a href=’/’ title=’home page’> Back To Home page</a></p>
    </div>
    </b:if>
<!– CBT 404 Page Error End –>

Guardamos los cambios y listo!
Te ha gustado?

Show Comments

No Responses Yet

Leave a Reply