Página para error 404 a mi manera y a la de otros | Oloblogger Ya hay un montón de sitios que explican cómo se maneja esa nueva utilidad Blogger que nos permite crear un página 404, así que simplemente v...

27 de marzo de 2012

Página para error 404 a mi manera y a la de otros

404 Room not found
Ya hay un montón de sitios que explican cómo se maneja esa nueva utilidad Blogger que nos permite crear un página 404, así que simplemente voy explicar cómo la hice yo por si a alguien le viene bien copiar el sistema. Al final de la entrada ya os pongo unos enlaces para que también podáis ver cómo lo hicieron otros.


En primer lugar y para los menos avezados, una página 404 es aquella a la que se redirigen todas las peticiones de páginas de un dominio, cuando esa dirección no existe. Dicho de otra manera, es aquella página a la que llegamos cuando el navegador ha sido capaz de comunicarse con el servidor, pero no existe la dirección solicitada. Y realmente no sólo ocurre esto con las páginas, sino también con cualquier fichero que se solicite. Ese fallo se conoce como Error 404 o HTTP 404 y de ahí el apodo de este tipo de páginas.

Su utilidad es evitar en lo posible perder tráfico, ya que si alguien accede a tu sitio desde un enlace redactado con alguna errata o mediante un resultado de búsqueda sobre una página que has borrado, no verá en su navegador mas que un escueto mensaje y lo más probable es que elija otro resultado y no se ponga a buscar por todo el dominio. En este enlace un ejemplo.


Para que esto funcione en Blogger, lo primero es comprobar que tenemos la línea <b:include data='top' name='status-message'/> en nuestra plantilla. Si no la tenéis, ya estáis tardando en situarla debajo de esta otra que he marcado en gris. Debe aparecer en dos sitios, en la parte normal y en la destinada a dispositivos móviles (Expandir plantillas de artilugios):

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>

Esa línea es la que nos muestra el mensaje "Mostrando entradas con la etiqueta xxxxxx. Mostrar todas las entradas", pero también es ahora la que nos da el siguiente mensaje cuando accedemos a una página errónea:



La novedad es que desde hace unos días, ese mensaje se puede personalizar desde el Escritorio para que salga el texto que queramos:

Errores y redireccionamientos


Pero lo más interesante no es que podamos cambiar el texto, sino que también podemos meter en ese formulario código HTML y JavaScript. O sea, que con poco se puede hacer algo más personalizado. Esta captura es de momento mi opción y pinchando en ella la podéis ver en acción (¿Cómo era eso de '...me ha salido un pareado'?).

Error Chuck Norris 404


El código que utilicé es simple, una imagen flotando a la derecha, un encabezamiento, un texto con enlace a la página de Inicio y una pequeña lista con un par de opciones para que el usuario pueda seguir buscando por el blog.  Si no queréis que salga todo el texto seguido, no olvidéis utilizar <br/> para los saltos de línea::

<img border="0" style="float:right;" src="http://1.bp.blogspot.com/s1600/chuck.gif" /><h1>¡Vaya! Parece que a Chuck Norris no le gustó esa dirección</h1>
<br/>
<p>De todas formas, antes de discutir con él la conveniencia o no de su eliminación, comprueba que tecleaste bien la URL en tu navegador.</p>
<b>Abajo encontrarás un enlace para ir a la página de <a href="/">Inicio</a>, pero desde la barra lateral también puedes:</b><br/>
<ul>
<li>Buscar una información concreta</li>
<li>Navegar por las distintas categorías del blog</li>
</ul>

Y para que los estilos por defecto no afectaran al diseño de este mensaje, además añadí tras el include que vimos al principio, una especie de reset que anulara los estilos de Blogger para el status. Como estos estilos sólo son para la página de error, los metí a su vez dentro de una condición que detecta cuando estamos en ese tipo de páginas. Las dos últimas clases las necesité particularmente para el encabezado y la lista:

<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>


Una última cosa. Por el diseño de mi blog prefiero que siga sin salir el "Mostrando entradas con la etiqueta...", así que simplemente metí también el include dentro del condicional y de esta manera, los mensajes de este tipo seguirán sin salir, excepto cuando hay un 404.


Más información y otros ejemplos en Ciudad Blogger, Vagabundia, Emilio Cobos, Utopia Blogs, MBT y Blogger Plugins (los dos últimos en inglés).

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

34 comentarios :

  1. En cuanto tenga un rato me pongo a ello, gracias por la información. Aunque no creo que me quede nada como esto: http://petshopboxstudio.com/blog/inspiration/40-illustrative-404-web-page-you-must-visit/

    ResponderEliminar
    Respuestas
    1. Gracias Malapata. Una fuente de inspiración nunca viene mal ;)

      Eliminar
  2. jajaja tu pagina de error es una de las mas simpaticas que he visto, aunque yo jamas de los "jamases" le discutiria nada a Chuck Norris, no señor!

    Mejor me regreso por donde vine y tecleo bien :)

    ResponderEliminar
  3. Me gusta tu pagina. Lol
    Muy buena e divertida. :D

    Un Abrazo. :)

    ResponderEliminar
  4. jaja, te quedó padre, sin quitar todos los elementos :)

    Lo que mencionas creo que es importante: condicionar el CSS para que sólo se cargue en la página de error, de otro modo se carga desde el principio y hace el CSS más extenso, tal vez no sea tanto, pero no se necesita desde ahí...

    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Creo que no es demasiado correcto poner estilos en el HTML, pero como tú dices, se mejora un poco la carga.

      Eliminar
  5. Muy interesante, la página de error 404. Como me gusta investigar, probar y toquetear. Directamente te hago un copy-paste y unos pequeños arreglillos y ya tenemos un trabajo de I+D+I y todo solucionado.

    ResponderEliminar
  6. Me gusto con Chuck Norris.

    Me gustaría Compartir enlaces de referencia.

    Saludos

    ResponderEliminar
    Respuestas
    1. Supongo que te refieres a hacer intercambio de enlaces. Si es así, no es mi costumbre.

      Eliminar
  7. WOW new design...cool \m/
    http://beben-koben.blogspot.com/404
    hihihi...cheers :)

    ResponderEliminar
  8. Hola no se donde preguntarlo, pero en herramientas del webmaster me dice que tengo mas de 500 paginas con error 404, por lo cual me gustaria saber como arreglarlo, es un fallo que tuve hace poco al actualizar el blog y se me duplicaron las entradas.

    ResponderEliminar
    Respuestas
    1. Google fue más rápido en indexarlas que tú en borrarlas, porque supongo que ya no las tendrás duplicadas. Bueno, si ya lo tienes arreglado es cuestión de tiempo que Google las desindexe y ya no te saldrá el aviso en Webmasters Tools... al menos con tantas.

      Eliminar
  9. Hola. Probablemente es porque no tienes incluido eso del status-message que se cita al principio del post.

    ResponderEliminar
  10. Prueba a añadir esta clase a tu CSS con las reglas que prefieras:
    h2.pagetitle {PROPIEDADES}

    Y si el problema no estaba en el status-message, por favor cuéntanos dónde andaba el problema.

    ResponderEliminar
  11. saludos Oloman ... puede ser que ya no funcione ??? o yo nomas tengo inconvenientes...estaba funcionando bien y no e modificado la plantilla.
    no dejo el link de mi pagina por motivos de spam .
    gracias .

    ResponderEliminar
    Respuestas
    1. Hola Gabriel. No sé si pudo fallar justo cuando lo viste, pero ahora mismo he comprobado página de error y sigue funcionando correctamente.

      Eliminar
    2. Gracias ...funciona correctamente ...

      Eliminar
  12. Hola Oloman!

    Optimicé mi página de error y hay algo que no puedo solucionar. Son nuevamente las distancias enormes, ahora entre la imagen con la leyenda (404 page not found) y el pie del blog. Ideas de como arreglarlo?

    Este es un ejemplo de página de error: http://creativo2cero.blogspot.com.ar/2015/03/historia-y-jhjh-de-las-redkes.html

    ResponderEliminar
    Respuestas
    1. Sí. Se me ocurre algo.
      Añade al CSS de tu página de error esto:
      .status-msg-hidden {
      display: none;
      }

      ;)

      Eliminar
    2. Gracias!, solucionado!

      Te pregunto de curioso, hay alguna forma de hacer invisible la imagen 404 error que coloque en mi blog, dentro de los resultados de búsqueda arrojados por el buscador interno de mi blog?

      Saludos!

      Eliminar
    3. ¿Aparece la imagen cuando utilizas el buscador interno? Raro me parece.

      De todas formas no sé cómo se puede ocultar frente al buscador si es que es así.

      Eliminar
  13. Si, aparece, veremos si se me ocurre algo jaja

    Ahora estoy luchando con el responsive, casi lo termino! :D

    ResponderEliminar
  14. Oloman, me gustaría colocar un script que redireccione desde la page 404 al inicio de mi blog, blogger sanciona scripts de este tipo?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Y en tal caso, sabes de algún script que haga eso?

      Eliminar
    2. Cristina, de SEO sé lo justo, así que no te puedo confirmar si penaliza esa acción o no. De todas formas me parece más correcto para todos (usuarios incluidos), que salga el aviso 404 para saber que la dirección a la que se accedió no existe. Allí ya puedes poner un enlace a Inicio.

      Eliminar
  15. Claro, bueno, lo tendré en consideración!

    Abrazo desde Buenos Aires!

    ResponderEliminar
  16. ¡Hola de nuevo Oloman!
    Como verás, siempre que te escribo es por algún problema, si algú día nos vemos te pago algo ;)
    El caso es que tengo configurado la página 404, pero no funciona, en vez de salir la página que tengo configurada, me sale una que pone "No hay más artículos sobre ."
    Ya no sé donde mirar ni que hacer, no hay manera de que funcione. No se si tendrá que ver que he cambiado a un dominio .es.
    Me puedes hacer ver la luz.
    Muchas gracias y saludos.
    http://www.mondejarfoto.es/

    ResponderEliminar
    Respuestas
    1. Me respondo a mi mismo, pero por tu entrada "Blogger: Cambiar el rótulo 'Mostrando entradas con la etiqueta...'" donde viene la solución a mis problemas. Muchas gracias de todos modos

      Eliminar
  17. Hola Oloman: Me podrías dar una mano con lo siguiente? Resulta que, hace un tiempo, cargué en el lugar correspondiente a mi blog (tal y como lo señalas en este post), el siguiente código de página de error 404. Hasta ahora, no me hacía demasiados problemas pues, cuando pasaba mi página por una sitio para webmaster (por ej., el WebSite Auditor de PowerSuite) me decía algo así como "Felicidades Ud. tiene una página 404 configurada correctamente" (o algo así). Pero, sin embargo, dicha página, Nunca funcionó (je!). Cuando marcabas mi sitio con algo "erróneo", sencillamente entrabas a mi página pero, "cortada" (es decir, veías el encabezado y el pié) Pero, si lo deseabas, igual, podías "navegarla". Pero, desde que, hice clic en "Redirigir a HTTPS" en mi blog de blogger, en dicho WebSite Auditor, empezó a aparecer que ..."no esta configurada correctamente"..., je! (aunque no sé si esto tenga algo que ver o no:)) Desde ya, muchas gracias. Saludos! PD: Por las dudas, antes de enviarte esto, volví a chequear que ..."eso del status-message que se cita al principio del post"...estuviera las 2 veces que mencionas:)

    ResponderEliminar
    Respuestas
    1. La culpa de que no se vea esa imagen que pusiste para ilustrar el error en la dirección, es de este CSS:
      .status-msg-wrap {
      visibility: hidden;
      display: none;
      }

      Si quitas eso (o lo contrarrestas con CSS contrario), comprobarás que sí se ve.

      Eliminar