Un poco más sobre las páginas de error 404

Durante las pruebas para crear una página de error con las nuevas opciones de Blogger, siempre me encontraba con una traba: no funcionaba (menuda traba). Vi el ejemplo que mostraba Emilio Cobos y todo se veía perfecto ¿por qué no conseguía hacer los mismo y que apareciera un mísero texto?

Pensé entonces, que aparentemente, era algo que sólo funcionaba en las plantillas nuevas y que Blogger no lo informaba, cosa que siempre es probable ya que suelen ser mudos y no informar nada. Sin embargo, seguían mis dudas y llegó Felipe para despejarlas en un comentario:

"Para que funcione la página de error que se inserta desde la configuración de Blogger el siguiente includable debe aparecer dos veces, para la versión móvil, y para la de escritorio:
<b:include data='top' name='status-message'/>
Creo que hace un tiempo muchos quitamos o comentamos ese código para ocultar el mensaje que aparecía en la navegación por etiquetas."

Y es verdad. En mi caso, esos códigos estaban pero, lo que faltaba era el includable ya que lo había eliminado y se veía esto:

<b:includable id='status-message'/>

Así que bastó eliminar esa línea para que Blogger lo restaure ya que es uno de esos includables que no pueden ser quitados.

A partir de alí, las cosas se resolvieron y el sistema de Blogger funcionó por lo que simplemente, copié el código que usaba y lo pegue dentro del editor, incluyendo CSS, scripts y HTML, tal como lo haría en la plantilla misma.

El resultado fue ... parcial porque Blogger coloca eso como si fuera una entrada. Es decir, una página de error tiene la misma estructura que una entrada común y como quería mantener el diseño original, mezclé ambas cosas ya que el tipo de página sigue siendo el mismo: error_page por lo tanto, podemos condicionar la plantilla para que ciertas cosas no se muestren (la sidebar en mi caso) e incluso, condicionar el includable status-message de tal forma de que sólo se emplee en este tipo de páginas:

<b:includable id='status-message'>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
      </div>
      <div style='clear: both;'/>
    </b:if>
  </b:if>
</b:includable>

Además, eliminé algunos divs como status-msg-border porque sino, el código se repetía y sobrescribí las reglas de estilo que Blogger agrega de manera automática:

.status-msg-wrap {
  font-size: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.status-msg-body {
  padding: 0;
  position: relative;
  width: 100%;
}