27 de diciembre de 2016

Tutorial: Agregar una imagen a tu página 404 (Error)

Estoy muy alegre.. Esta semana estuve viendo las estadísticas del blog y note que las visitas de los post de tutoriales han incrementado, eso quiere decir que mis horas y horas de trabajo para traerles lo mejor para que personalicen sus blogs ha dado frutos. No saben lo contenta que me eso me hace. Así que para seguir celebrando les traigo un nuevo tuto. El cual probe y me encanta, porque ya saben que adoro perfeccionar hasta los detalles más pequeños de mi blog para que su estadía aquí sea la mejor. 
Soo... manos a la obra.
  
404 Error en blogger es como una página que por defecto, cuando tienen mal el url o no se encuentra lo que estas buscando te es mostrada.  En mi blog he personalizado el 404, pueden tener un ejemplo (Aquí). Pueden notar que ahí he agregado una imagen. Ahora si tambien quieres que tu página se muestre parecida a la mía es muy fácil de hacer, solo dirígete a
  • ConfiguraciónPreferencias para motores de búsqueda → Mensaje de página no encontrada personalizado.

Una vez que estés ahí, pega el siguiente código:
<div style="text-align: center;">
<img border="0" src="URL-DE-TU-IMAGEN-404" /><br />
<br /></div>
  • Agrega la imagen que aparecerá y da clik a guardar cambios.
Eso dará como resultado que tu página 404 quede parecida este ejemplo:
Ahora, para quitar el fondo gris debajo de tu imagen de error, tienes que agregar un poco de CSS, el cual pueden hacerlo en la plantilla HTML de tu blog. Pero para que no te afecte el mensaje de Mostrando etiquetas. Lo haremos en la misma sección en donde colocamos la imagen, o sea en "Mensaje de página no encontrada personalizado."
  • Encima del código de la imagen (<div style="text-align: center;">) agrega lo siguiente:
<style>
/* Mensaje
———————————————–*/
.status-msg-body {
font: 14px Century Gothic;
color: #000000;
text-transform: uppercase;
font-weight: bold;
}
.status-msg-bg {
background-color: #ffffff;
}
.status-msg-border {
border: 1px none;
}
#blog-pager {
    margin: 60px 5px 5px 5px;

}
</style>
  • background-color: #ffffff; Fondo de la página de error. En mi caso la he puesto de colo Blanco. Para que quede acorde a la imagen.
  • #blog-pager: Separación del blog-pager (Home) y la imagen de error 404. Tu blog puede ser diferente al mio. Por lo que esta opción (margin: 90px 5px 5px 5px;) debes de cambiarla a conveniencia. O incluso la puedes eliminar. 
→ Da click a guardar cambios.
Resultado:

Buscador y mensaje...

Si Quieres agregarle un mensaje y un buscador, debajo del código de la imagen (<br /></div>) agrega: 
<!-- Inicio- Pagina error 404  -->
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
</b:if><br />
<div id="pagina-error">
<h1 style="text-align: center;">
404</h1>
<div style="text-align: center;">
No se ha encontrado la página 😫</div>
<div style="text-align: center;">
Introduce a continuación lo que buscabas:</div>
<div id="caja-buscar-error">
<form action="/search" id="buscar-error" method="get">
<div style="text-align: center;">
<input name="q" placeholder="" size="40" type="text" />
</div>
</form>
</div>
</div>
<!-- Fin- Pagina error 404  -->
  • Nota: Si lo deseas, cambia el mensaje, por el texto de tu preferencia.
→ Da click a guardar cambios.

ResultadoUna muy bonita página de error.

 En total, tu código introducido en Mensaje de página no encontrada personalizado debe de ser así:
<style>
/* Mensaje
———————————————–*/
.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;
}
#blog-pager {
    margin: 60px 5px 5px 5px;
}
</style>
<div style="text-align: center;">
<img border="0" src="URL-DE-TU-IMAGEN-404" /><br />
<br /></div>
<!-- Inicio- Pagina error 404  -->
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
</b:if><br />
<div id="pagina-error">
<h1 style="text-align: center;">
404</h1>
<div style="text-align: center;">
No se ha encontrado la página 😫</div>
<div style="text-align: center;">
Introduce a continuación lo que buscabas:</div>
<div id="caja-buscar-error">
<form action="/search" id="buscar-error" method="get">
<div style="text-align: center;">
<input name="q" placeholder="" size="40" type="text" />
</div>
</form>
</div>
</div>
<!-- Fin- Pagina error 404  -->

Feebies

Si no tienen tiempo para crear una imagen de error, aquí les traigo unas que he creado en CANVA







Y este es el tutorial de hoy. Espero les guste.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

6 comentarios:

  1. Por fin alguien lo explica lo bien!!!
    Muchas gracias, como ando haciendo cambios en el blog, me pondré con ello :)
    Besos :33

    ResponderEliminar
    Respuestas
    1. Que bueno que te guste y te sirva de mucho. Ya me pasare por tu blog para ver los cambios. xD

      Saludos....

      Eliminar
  2. Hola!
    Me ha encantado el tutorial, andaba buscando algo parecido para personalizar al máximo mi blog. Muchas gracias por compartirlo y por explicar todo tan detalladamente.
    Besos

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu visita. 😀 Que bueno que te gustara. Cuando hago un tutorial siempre busco la manera de responder todas las dudas que yo tenia cuando comencé con blogger. Eso hace que explique detalladamente los tutos.
      Saludos. 😘

      Eliminar
  3. Hola! Te sigo :)
    Muchas gracias por el tutorial! Muy útil.
    Un beso.

    ResponderEliminar
    Respuestas
    1. Hola Carolina, gracias por tu visita y por seguirme!!!!!
      Que bueno que te fuera útil.
      Hasta la próxima... 😀

      Eliminar