Aún no has personalizado el mensaje de Error 404 en Blogger: a qué esperas?

16.7.14

Te ha pasado alguna vez que quieres entrar en una página, y sin quererlo escribes mal la dirección y te aparece un mensaje de error? Este es el Error 404 (también lo podéis encontrar como No encontradoNot Found) y quiere decir que tu navegador no es capaz de encontrar la página a dónde quieres ir. No es nada malo, seguramente la página que quieres leer (por la razón que sea) ya no existe.

Normalmente el mensaje de error que aparece es bastante feo y viene predeterminado por Blogger, pero que no cunda el pánico, se puede cambiar! Ya lo has modificado? A qué esperas? Seguro que a más de uno ya le ha salido este mensaje algún día buscando en tu blog y tu, sin darte cuenta!


Error 404


Como te he dicho, el mensaje de error 404 predeterminado por Blogger es este:
Error 404 predeterminado

Lo habías visto alguna vez? Estoy segura que si. Y en tu página cuál aparece? Sólo tienes que escribir algo del estilo
www.nombredetublog.com/hola

y verás qué ve la gente cuando se da el error 404 en tu blog (simplemente tienes que escribir el nombre entero de tu blog, seguido de "/" y luego lo que tu quieras. Cómo no existe la página, harás saltar el error). He puesto .com porqué supongo que ya has leído "Cómo registrar tu propio domino" y lo has cambiado, pero si no lo has hecho, debe ser .blogspot.com, como lo tenías hasta ahora.

Si entras en mi página y te salta el error verás esto:  Clica aquí (y te saltará el mensaje de error). Lo ves?

Tiene harmonía con el resto del blog, está a  mi gusto y con mucha más información para los visitantes a mi página, que hayan ido a parar al mensaje de error "Not found". Así si la gente se equivoca no se asusta. Se queda y continua mirando! Mucho mejor, verdad?

Como acabas de ver, en Blogger se puede modificar casi todo. Te voy a explicar cómo puedes personalizar el mensaje de error 404 a tu gusto, para que tenga sentido con el resto del blog y para que tus visitas no se vayan pitando a otro lugar, pensando que se te ha estropeado la página!

Dónde cambiar el código del error 404

  1. Entra en "Configuración"
      Menú Blogger configuración
  2. En el apartado "Preferencias para motores de búsqueda"

    Editar error 404
  3. Edita los "Errores y redireccionamientos"

    Editar error 404 Blogger
  4. A continuación te aparece un recuadro dónde debes poner el código HTML del mensaje que quieres que se vea, en vez del que viene predeterminado por Blogger, que no es muy bonito ni útil.
    Modificar error 404 Blogger
  5. Ahora que ya sabes esto, tienes que crear el código HTML para el mensaje. No te asustes, yo te presto el mío, que es sencillo y resultón y te ayudo a modificarlo a tu gusto. Cuando lo tengas modificado, lo tendrás que pegar en el recuadro que acabamos de ver.

Cómo crear el código


Te enseñaré cómo modificar el código de mi mensaje, para que lo puedas adaptar a tu gusto! Este es el código que he utilizado para personalizar el mensaje 404.


<div style="background-color:#ebb5e0;">
  <div style="color:#666666; text-align:center;">
    <span style="font-size:5em;">ERROR</span>
    <br />
    <span style="font-size:x-large;">La página no se ha 
encontrado!</span>
    <br />
    <br />

    <div style="font-size:x-large;">
      Puede ser debido a que la dirección esté mal escrita<br />
      o que el post ya no exista.

      <br />
      <br />

      Te recomiendo que vuelvas a la página principal<br />
      o que entres en uno de mis posts más leídos:

    </div>
  </div>
  <div style="font-size:large;">
    <ul>
      <li><a href="http://www.thelittlecoccinelle.com/2014/07/como-registrar-tu-propio-dominio.html">Cómo registrar tu propio dominio</a></li>
      <li><a href="http://www.thelittlecoccinelle.com/2014/06/quitar-barra-navegacion-blogger.html">Cómo quitar la barra de navegación de Blogger</a></li>
      <li><a href="http://www.thelittlecoccinelle.com/2014/04/tutorial-crear-tu-favicon.html">Crea tu favicon e instálalo</a></li>
      <li><a href="http://www.thelittlecoccinelle.com/2014/03/gadget-sin-titulo.html">Gadget sin título</a></li>
    </ul>
  </div>
</div>




Para modificarlo, lo que te aconsejo es que abras "Crear nuevo post" y pegues allí el código que te he dejado y allí mismo lo vas modificando a tu gusto. Si te fijas bien, arriba a la izquierda te da la opción de "Redactar" o "HTML". 


Redactar o HTML

Lo tienes que pegar en HTML, así podrás modificar el código. Entonces, a medidas que lo vayas modificando, puedes pasar a "Redactar" o mejor aún "Vista previa" y verás cómo te está quedando. Pero recuerda que las modificaciones las haces en "HTML".

Ahora vamos a mirar detalladamente el código en tres partes para que lo puedas modificar a tu gusto.

Codigo error 404 parte 1
Esta es la parte que corresponde a "ERROR la página no se encuentra". Como ves detallado puedes modificar:

  • el color de fondo: cambiando el código del color
  • la alineación del texto: a la derecha, centrado o a la izquierda
  • el tamaño del título
  • el tamaño del subtítulo

Codigo error 404 parte 2

Esto corresponde al resto del texto. Puedes modificar:
  • el tamaño del texto
  • si quieres puedes añadir la alineación también

Codigo error 404 parte 3


Esta es la parte un poco más complicada, pero no te vayas, no te desanimes y no lo dejes para más tarde! Juntas será más fácil, de verdad! Aquí vemos los 4 enlaces a otros posts que he puesto. Cómo mínimo si la gente se ha equivocado, que se quede en la página leyendo otros posts, no?

Si te fijas bien en el código cada vez que hay <a>....</a> es un enlace, te los he separado en espacios para que los veas bien. Yo he puesto 4, pero tu puedes poner los que quieras!


Entonces, aquí debes modificar (para cada enlace):

  • la URL de tu enlace, que es la dirección que hay arriba de todo, cuando clicas tu enlace!
  • el título de tu enlace
  • y también puedes cambiar el tamaño de los enlaces

Poner el mensaje de error 404


Vale, pues ya tienes el código en un nuevo post. Lo copias todo entero (sin borrarlo, por si las moscas!) te vas al cuadradito de texto del que hemos hablado al principio (en Configuración --> Preferencias para motores de búsqueda --> Errores y redireccionamientos) y pegas allí tu código y le das a "Guardar cambios"! Tatxan!!! 

Si quieres comprobar cómo se ve cuando se muestra por pantalla, no tienes nada más que escribir algo así

www.elnombredetublog.blogspot.com/error
(o sea el nombre correcto de tu blog, una "/" y detrás escribes lo que te de la gana)

Como esto no existe, te saldrá el mensaje que has estado creando todo este rato! Valió la pena verdad? Ahora ya lo tienes para siempre.

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.