Hace algunos días una nena me escribió un email preguntándome como podría personalizar su pagina de error 404 con una imagen. Es super sencillo, pero complicado explicarlo a través de un email, así que mejor lo comparto por aquí y así le puede ayudar a mas personas.

Hace ya algún tiempo Miss Lavanda compartió un tutorial sobre esto, esta es la que utilizo yo en THE BBT, es algo un poco mas complicado si no sabes nada de HTML y CSS, pero ademas de que  solo es texto.

Hoy yo te quiero enseñar como hacer tu pagina 404 pero con imagenes que tu mismo puedes personalizar y diseñar, es mas sencillo de instalar y no necesitas tocar tu plantilla. VA?

Quiero comenzar regalándote unas imágenes ya listas que puedes descargar y utilizar si lo deseas.


Si estas imagenes no son tu estilo siempre puedes crear las tuyas propias utilizando PicMonkey, Picadillo, PowerPoint o cual sea el sitio que utilices.
Si ya tienes lista la imagen que quieres utilizar, vamos a comenzar.

En esta ocasión yo voy a utilizar mi blog de pruebas , donde puedes ver la pagina 404. Va !

1. Lo primero que tienes que hacer es irte a preparar una entrada(ojo: que esta entrada no va publicada), agregar la imagen que ya debes de tener lista.


2. Ahora después de haber agregado tu imagen, Selecciona vista HTML y copia todo el código.


3. Ahora vamos Configuración > 4. Preferencias de Búsqueda > Mensaje de Pagina No encontrada. > 5. Pega el código que tenias copiado y finalmente GUARDA.
Ahora solo te queda hacer una prueba, y si sale todo bien, pues felicidades ya tienes tu pagina 404 personalizada.

Para hacer una prueba solo tienes que hacer lo siguiente. En este BLOG DE PRUEBAS solo borra una parte de la url que esta en la barra del buscador, como en el ejemplo de abajo.


ACTUALIZACIÓN:  Si quieres también agregar la opcion de buscador, solo tienes que agregar este código en el mismo lugar donde agregaste el código de tu imagen.

<!-- Inicio- Pagina error 404  -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='pagina-error'>
<h1>404</h1>
<h3>No se ha encontrado la página :(</h3>
<p>Introduce a continuación lo que buscabas:</p>
  <div id='caja-buscar-error'>
<form action='/search' id='buscar-error' method='get'>
  <input name='q' placeholder='' size='40' type='text'/>
</form>
  </div>
  </div>
</b:if>

<!-- Fin- Pagina error 404  -->

Lo que esta en amarillo es el texto y el tamaño de la caja que puedes modificar.

ACTUALIZACIÓN 2: Si no quieres que aparezca el recuadro gris alrededor de tu imagen de error 404, tienes que agregar un poco de CSS.
NOTA: Ten en cuenta que esto también modificara la opción de Mostrando etiquetas. 

/* Label Status Message
———————————————–*/
.status-msg-body {    /* esto cambiara la tipografía y el color */
font: 14px Century Gothic;
color: #000000;
text-transform: uppercase;
font-weight: bold;
}
.status-msg-bg {    /* Para cambiar el color de fondo */
background-color: #ffffff;
}
.status-msg-border {   /* para cambiar el color del borde */
border: 1px none;  

}

Lo que esta en amarillo es la tipografia,el tamaño, el borde y color de fondo que puedes modificar.


Sin las actualizaciones asi es como debe de aparecer la pagina 404 .
Con todas las actualizaciones, así debe quedar.


Verdad que no ha sido nada difícil ni complicado, ahora ya tienes tu pagina personalizada y la puedes cambiar cuantas veces quieras.

Bien es todo por hoy, que pases un excelente fin de semana, aquí en california tenemos finde largo(puente) se celebra Memorial Day, así que seguro vamos de vagos y no fijare las narices por aquí hasta el martes, pero el Lunes sin falta sale a la luz el post de nuestra invitada, No te la quieres perder que esta nena diseña cositas lindas, es todo lo que digo, el lunes ven y entérate de quien hablo. Un besete.
Taina !