Como crear una página de error 404 personalizada en Blogger

Página error 404

Las páginas de Error 404 son aquellas en las que el usuario al intentar acceder a una entrada de nuestro Blog dicha página no existe porque ha sido eliminada o se ha escrito mal la dirección Url.

Este código nos muestra una bonita imagen comentando que ha habido un error y que la página no se encuenta, aparte lleva incorporado dos enlaces con botones para redirigirnos a la página principal o volver atrás.
Ver página error  Lo primero que deberemos hacer es seguir las instrucciones de +Ciudad Blogger
"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 == "false"'>
</div></div>
</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 que es el que tengo en este blog:

<div id="error-404">
<img src="https://lh4.googleusercontent.com/-wDxJbemQXr8/UVnKTXmHL-I/AAAAAAAALEE/Zap258AkgkI/s860/e404mm.jpg" style="vertical-align:middle;"/>
<div id="boton_inicio" style="position: absolute;width:183px;height:37px;top:324px;left:310px;">
<a href="http://nombredetublog.blogspot.com"><img src="https://lh5.googleusercontent.com/-bwAVR_cU8-I/UVnJYXDMgLI/AAAAAAAALDw/0andc5FJcwM/s185/inicio.jpg" border="0" height="40" width="185"></a>
</div>
<div id="boton_retroceder" style="position: absolute;width:183px;height:37px;top:380px;left:310px;">
<a href="javascript:history.go(-1)"><img src="https://lh5.googleusercontent.com/-rNf-PllDbE0/UVnJcoPDIkI/AAAAAAAALD4/oWBLYV1GPgo/s185/retroceder.jpg" border="0" height="40" width="185"></a>
</div>
<div style="text-align: right;">
<b><span style="font-size:x-small;">Diseñado por:<a href="http://www.amorsevillista.com" rel="dofollow">www.AmorSevillista.com</a></span></b></div>
</div>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.column-right-outer, .column-left-outer, .footer-outer, .feed-links, #blog-pager, #rsidebar-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: 980px; /* Aquí va el ancho total del blog */
margin-left: -5px;
}
</style>
</b:if>

Ahora veamos como configurar algunos aspectos del código:
1.- nombre-de-mi-blog: Cambiar por vuestro nombre
2.- Los estilos que están en color rojo sirven para ocultar todos los elementos que queremos.
   Todos los elementos que agregues para ocultar deberán ir separados por una coma.
3.-  margin-left: -5px; Con esto centraremos totalmente la página, añade o disminuye según tus necesidades.
Guarda y Listo
Otra opción interesante sería incluir un script que nos redirecionase automáticamente con un tiempo estimado a la entrada principal y para ello pegaríamos el siguiente código:

<script type = "text/javascript">
//Blogger 404 Redirecionado por Amor Sevillista
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>

Configuración:
5000: Segundos que tarda la redirección.