Poner una página de error 404 personalizada

1 de diciembre de 2015
poner una pagina 404 personalizada blogger

Hola angelitos, ¿Cómo están? ♥ El día de hoy les traigo un tutorial bastante fácil, en el que les explicaré como colocar en su blog, una página de error 404 personalizada.

¿Qué es eso? Es una página a la que tus lectores son enviados cuando hacen click en una url inexistente o errónea, pueden ver aquí una vista previa, con este tutorial les mostraré como personalizarla a su gusto y dejarla bonita  

Bueno les dejo también una imagen de ejemplo por si tienen problemas con la vista previa:


Paso 1 - Colocar el código del mensaje

Debes ir a Plantilla | Edición HTML y con Ctrl + F debes buscar data:navMessage

Aparecerá repetido 3 veces, nos interesa la segunda de ellas.



Debemos remplazarlo por el siguiente código:
<div class='esconder-status'><data:navMessage/></div>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div aling='center'>
<div id='error-404'>
<div class='errort1-404'><img src='http://i.imgur.com/yofXhBX.png' style='vertical-align:middle;' width='200px'/> UPS!</div>
<div class='errort2-404'>Página no encontrada</div>
<div class='errort3-404'>
Puedes introducir a continuación lo que buscabas</div>
<form action='/search' id='buscar-error' method='get'>
<input name='q' placeholder='' size='40' type='text'/>
</form>
<div class='errort3-404'>
O si quieres puedes:</div>
<div class='errort4-404'><a href='url de tu blog'>Ir a la página principal</a></div>
</div></div>
</b:if>
Todo lo que está subrayado puede cambiarse con otro texto que desees
Lo que esta en verde es la url de la imagen de error si quieren pueden cambiarla
Lo que está en naranja es el tamaño de la imagen yo lo puse a 200px pueden cambiarlo Lo que está en rojo es el mensaje que dice "Mostrando entradas con la etiqueta.."

Nota: Si utilizaste previamente mi tutorial en donde explico como modificar o eliminar el mensaje "Mostrando entradas con las etiquetas.." debes de hacer lo siguiente:

En lugar de buscar data:navMessage debes buscar con Ctrl + F alguna palabra del mensaje personalizado que pusiste y una vez que encuentres donde esta tu mensaje debes remplazarlo con el código que puse arriba.



Si quieres que vuelva tu mensaje personalizado mas arriba en el código a colocar indique en rojo donde puedes volverlo a poner

Paso 2 - Ocultar en la página de error los gadgets

Ahora hay que hacer que en la página de error no se vean los gadgets y otras cosas así queda mas lindo todo, hacerlo es muy sencillo, se pega el siguiente código arriba de </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper, #header, #sidebar-right-1, #copyright, .fly
 { display: none;}.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {border-left: 0px; border-right: 0px;}
#main, #main-wrapper {width: 760px; right: -200px;} .status-msg-body {width:660px;background: #;border: none;}.status-msg-border, .status-msg-body, .status-msg-bg, .status-msg-wrap {border: none;color: #fcb6c2;background: transparent;} .esconder-status {display:none;}
</style>
</b:if>
Los que están indicados en negrita son los elementos ocultados..
(los subrayados los puse por la barra de copyright y el botón subir)

Paso 3 - Cambiarle el aspecto

Para hacerlo solo debemos pegar arriba de ]]></b:skin> el siguiente código y personalizarlo:

/* Error
----------------------------------------------- */
#error-404 {
background: #fff;margin: 10px 6px 30px!important;
padding: 15px 20px!important;
}
.errort1-404 { /* Efectos en el texto más grande */
color: #ec1648;font-size: 100px;font-weight: bold;
text-transform: uppercase;
}
.errort2-404 { /* Efectos en el texto mediano */
color: #ec1648;font-size: 50px;top: -10px;
font-weight: bold;
text-transform: uppercase;
}
.errort3-404 { /* Efectos en el texto pequeño*/
font-size:16px;color:#777;margin-top: -10px;
padding:20px;
text-align:center;
}
.errort4-404 a { /* Efecto en Ir a la pagina principal */
background: #777;color: #fff;font-size: 16pt;padding: 5px;
text-align: center;
top: 5px;
}

color: color del texto
font-size: tamaño de los textos
background: color de fondo

Espero les haya servido el tutorial ♥


7 comentarios:

  1. ¡Que guay! siempre he querido saber como hacian algunos para cambiarlo jeje <3
    Si me pongo a trastear de nuevo con mi blog lo miraré seguro :)
    besitos

    ResponderEliminar
  2. Hola!
    Esta super guay, interesante y útil este tutorial.
    Gracias por compartirlo con nosotras.
    Besos

    ResponderEliminar
  3. Creo que lo añadiré a la nueva plantilla que estoy haciendo
    Saludos:3

    ResponderEliminar
  4. Por cierto, Podrías hacernos un tutorial del gadget que tienes actual de seguidores? que lo tienes para seguir con google plus y demás?
    saludos

    ResponderEliminar
    Respuestas
    1. Gracias por pasarte por mi blog, yo ya sigo tu blog, es muy lindo ♥ .. Ah y en este mes andaré publicando un tutorial de como hacer eso :D

      Eliminar
  5. Holaaaas ( ̄ω ̄)/

    Me encanta!!! gracias por el tutorial aunque yo utilizo plantillas clasicas podrias hacer tutoriales para plantillas clasicas?? estoy detras de uno para poner respuestas a los comentarios de mi blog y otro para poner entradas relacionadas no he podido encontrar nada en la web >.< y ami ya no me cruje XDDD seria genial si hicieras tutos para las plantillas clasicas tambien :D

    ResponderEliminar
    Respuestas
    1. Claro veré si puedo hacerlos gracias por tu comentario ♥

      Eliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)