Crear página de error 404 en Blogger

Ya todos saben que Blogger ha incluido nuevas opciones en la nueva interfaz de Blogger. Una de estas opciones es la posibilidad de crear un mensaje personalizado en las páginas de error. Es decir, en las páginas que no existen, de modo que si un usuario ingresa a una entrada eliminada o una dirección mal escrita de nuestro blog, aparecerá un mensaje personalizado.

Pero podemos ir un poco más allá y eliminar las sidebar y otros elementos en esas páginas de error para que sólo se muestre la cabecera y el mensaje personalizado, algo como esto:

O bien, haz click en este enlace que dirige a una página que no existe.

Lo primero, para que este mensaje de error pueda aparecer es necesario que tengamos en la plantilla el INCLUDE status-message, ese es el que se encarga de mostrar el mensaje de error (y otros mensajes).
Así que si anteriormente lo eliminaste para que no aparezca el mensaje "Mostrando entradas con la etiqueta..." tendrás que ponerlo nuevamente, de lo contrario el mensaje de error no se mostrará.

Por lo tanto asegúrate de tener esta línea en tu plantilla (es necesario marcar la casilla Expandir plantillas de artilugios)

<b:include data='top' name='status-message'/>

Si no la tienes agrégala justo arriba de este código:

<data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>

Ya que lo tengas, o si ya lo tienes puesto entra en Configuración | Preferencias de búsqueda (por ahora disponible sólo en la nueva interfaz), y en donde dice Mensaje de página no encontrada personalizado haz click en Editar.

Ahí agrega este código:

<div id="error-404">
<div class="errort1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdq_HbQFRQNGnafm03OjLRjdTDGTISo_qPBF6nl-Dan_vNO55qqSNHRuDVezN831u_Jg8Ek5M2C8icDuPsfrafvMCIkFoBxDE6dtmY1KuVlH-Dv5Z8vTh0PF7yfpXvI9FbdM5m3d8nIs/s100/error.png" style="vertical-align:middle;"/> UPS!</div>
<div class="errort2-404">Página no encontrada</div>
<div class="errort3-404">
Parece que ha habido un error con la página que estabas buscando.<br/>
Es posible que la entrada haya sido eliminada o que la dirección no exista.
</div>
<div class="errort4-404"><a href='http://nombre-de-mi-blog.blogspot.com'>Ir a la página principal</a></div>
</div>

Ese es un código de ejemplo, en realidad tú puedes poner el que quieras y con los estilos deseados.
Ahora antes de ]]></b:skin> pega los estilos:

/* Error 404
----------------------------------------------- */
/* Contenedor general */
#error-404 {
padding:20px;
}
/* Estilos del primer texto */
.errort1-404 {
color: #fff;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del segundo texto */
.errort2-404 {
color: #fff;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/* Estilos del tercer texto */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:center;
font-size:20px;
}
/* Estilos del botón */
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}

Con eso ya tienes el mensaje de error personalizado como la imagen de ejemplo. Ahora vamos a eliminar la sidebar y otros elementos, para ello es necesario que conozcas los IDs o clases de todos esos elementos que deseas ocultar, aquí veremos los básicos de las plantillas originales de Blogger.

Así que antes de </head> agrega esto:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #sidebar-wrapper, #footer-wrapper { /* Aquí todos los elementos que queremos ocultar */
display: none;
}
.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {
border-left: 0px;
border-right: 0px;
}
#main, #main-wrapper {
width: 960px; /* Aquí va el ancho total del blog */
margin-left: -25px;
}
</style>
</b:if>

Y listo. Ahora unos detalles a tomar en cuenta. En el código que hemos añadido en la configuración verás en color azul la URL de la imagen del ícono de error, puedes cambiarlo por otro, de hecho puedes cambiar toda la estructura de ese código por la que desees. Ahí mismo pon en donde se indica el nombre de tu blog, esto es para el botón que aparecerá sugiriéndole al lector ir a la página principal.

En los estilos están en color verde definidas las áreas de cada elemento del mensaje de error.

En el segundo código verás también dos anotaciones en color verde, estas son muy importantes, en la primera pondremos todos los elementos que queremos ocultar antes de .column-right-outer, por ejemplo, si tuvieras una sidebar que se llama right-sidebar entonces antes de .column-right-outer, agregarías:

#right-sidebar,

Todos los elementos que agregues para ocultar deberán ir separados por una coma.

Después sigue el ancho del área donde se muestra el mensaje de error, ahí debes poner la medida del ancho de tu blog, quizá tengas que poner un valor un poco más bajo, o agregar otro margen después de él para acomodarlo, eso ya dependerá de cada caso y cada quién deberá experimentar con esos valores.

Como puedes ver en cuestión de códigos es poco, casi todo será creatividad de cada uno para que la página de error sea tan simple o tan compleja como cada quien quiera.