Como personalizar nuestra página de Error 404

Hola a todos¡¡
Acabamos de publicar una entrada en la que explicamos la existencia de la página "Error 404" en cual podéis ver en este post., pero vamos a explicar paso a paso como podemos adaptarlo a nuestra página.

LO primero que tenemos que hacer es irnos a plantilla y hacer una copia de seguridad por si algo no nos dale bien. (Es mejor ser precavidos)

Podéis verlo en este post paso a paso.
Hecho esto, tenemos que tener claro que el mensaje de error lo tenemos activo.
Para comprobarlo vamos a:
Plantilla> Editar HTML y buscamos:

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

Si lo encontramos en nuestra página quiere decir que lo tenemos activado.

¿Pero si no lo tenenos?

Tendremos que buscar este otro código.

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>

Y justo encima pegamos el anterior.

Nos quedará de la siguiente forma:

<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>

Ahora vamos a personalizar este mensaje:

Para ello nos vamos a:
Configuración > Preferencias para motores de búsqueda.
En la pestaña Errores y redireccionamientos encontramos otra pestaña de:
Mensaje de página no encontrada personalizado ? 
Le damos a editar.
Vamos a añadir este código:

<div id="error-404">
<div class="errort1-404"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNGT707D9-VcEeETmCeleh6-udvL19E_lRnl9oZ8XtKXjqYi2B5aKwZA8fG7xOEsG-LHv3YJId3ocv3NKuq0wMHIGVxDPxRv5UlCnX-KKSQvvpW05OCSNYxQ3WNH0B3vlR0HraXKuG-U/s100/error.png" style="vertical-align:middle;"/> ¡UPS!</div>
<div class="errort2-404">Página no encontrada</div>
<div class="errort3-404">
Parece que hay un error con la página que estabas buscando. 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-tu-blog.blogspot.com'>Ir a la página principal</a></div>
</div>

Lo que hemos marcado en azul es la imagen que va a aparecer, y la cambiamos por la imagen que nosotros queramos en este caso es esta:
Aseguraros que tiene el fondo transparente y que el tamaño se adapta a la página.
Lo que hemos marcado en verde, es el texto que va a aparecer en primer lugar.
Lo marcado en naranja el texto de página no encontrada que lo podemos modificara nuestro gusto.
Y lo marcado en rojo es la url que tenemos que poner de nuestra página.
Ahora solo queda guardarlo.
Todavia nos queda personalizarlo un poco.
Para eso tenemos que modificar este código.
Podemos cambiar el color del texto,estilo ect.

/* Error 404
----------------------------------------------- */
/* Contenedor general */
#error-404 {
padding:20px;
}
/* Estilos del primer texto */
.errort1-404 {
color: #000000;
font-size: 80px;
font-weight: bold;
text-transform: uppercase;
text-shadow: none;
}       
/* Estilos del segundo texto */
.errort2-404 {
color: #000000;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
text-shadow: none;
}
/* Estilos del tercer texto */
.errort3-404 {
padding:20px;
color:#414141;
text-shadow: 1px 2px 3px #fff;
text-align:justify;
font-size:20px;
}
/* Estilos del botón */
.errort4-404 {
margin-top:20px;
padding:10px;
display:inline-block;
text-decoration:none;
font: bold 13px Sans-Serif;
border:1px solid #DDD;
border-radius:3px;
border-color: #999;
background: #FAFAFA;
}

Una vez hayáis personalizado el texto, los botones...Solo tenéis que ponerlo encima de ]]></b:skin>
Y ya lo tenemos.