Poner una página de error 404 personalizada

Hola angelitos, ¿Cómo están? ♥ El día de hoy les traigo un tutorial bastante fácil, en el que les explicaré como colocar en su blog, una página de error 404 personalizada.

¿Qué es eso? Es una página a la que tus lectores son enviados cuando hacen click en una url inexistente o errónea, pueden ver aquí una vista previa, con este tutorial les mostraré como personalizarla a su gusto y dejarla bonita ♥ 

Bueno les dejo también una imagen de ejemplo por si tienen problemas con la vista previa:

Paso 1 - Colocar el código del mensaje

Debes ir a Plantilla | Edición HTML y con Ctrl + F debes buscar data:navMessage

Aparecerá repetido 3 veces, nos interesa la segunda de ellas.



Debemos remplazarlo por el siguiente código:

<div class='esconder-status'><data:navMessage/></div>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div aling='center'>
<div id='error-404'>
<div class='errort1-404'><img src='http://i.imgur.com/yofXhBX.png' style='vertical-align:middle;' width='200px'/> UPS!</div>
<div class='errort2-404'>Página no encontrada</div>
<div class='errort3-404'>
Puedes introducir a continuación lo que buscabas</div>
<form action='/search' id='buscar-error' method='get'>
<input name='q' placeholder='' size='40' type='text'/>
</form>
<div class='errort3-404'>
O si quieres puedes:</div>
<div class='errort4-404'><a href='url de tu blog'>Ir a la página principal</a></div>
</div></div>
</b:if>

Todo lo que está subrayado puede cambiarse con otro texto que desees
Lo que esta en verde es la url de la imagen de error si quieren pueden cambiarla
Lo que está en naranja es el tamaño de la imagen yo lo puse a 200px pueden cambiarlo Lo que está en rojo es el mensaje que dice "Mostrando entradas con la etiqueta.."

Nota: Si utilizaste previamente mi tutorial en donde explico como modificar o eliminar el mensaje "Mostrando entradas con las etiquetas.." debes de hacer lo siguiente:

En lugar de buscar data:navMessage debes buscar con Ctrl + F alguna palabra del mensaje personalizado que pusiste y una vez que encuentres donde esta tu mensaje debes remplazarlo con el código que puse arriba.

Si quieres que vuelva tu mensaje personalizado mas arriba en el código a colocar indique en rojo donde puedes volverlo a poner ♥

Paso 2 - Ocultar en la página de error los gadgets

Ahora hay que hacer que en la página de error no se vean los gadgets y otras cosas así queda mas lindo todo, hacerlo es muy sencillo, se pega el siguiente código arriba de </head>

<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, #header, #sidebar-right-1, #copyright, .fly
 { display: none;}.fauxcolumn-right-outer .fauxcolumn-inner, .fauxcolumn-left-outer .fauxcolumn-inner {border-left: 0px; border-right: 0px;}
#main, #main-wrapper {width: 760px; right: -200px;} .status-msg-body {width:660px;background: #;border: none;}.status-msg-border, .status-msg-body, .status-msg-bg, .status-msg-wrap {border: none;color: #fcb6c2;background: transparent;} .esconder-status {display:none;}
</style>
</b:if>

Los que están indicados en negrita son los elementos ocultados..
(los subrayados los puse por la barra de copyright y el botón subir)

Paso 3 - Cambiarle el aspecto

Para hacerlo solo debemos pegar arriba de ]]></b:skin> el siguiente código y personalizarlo:

/* Error
----------------------------------------------- */
#error-404 {
background: #fff;margin: 10px 6px 30px!important;
padding: 15px 20px!important;
}
.errort1-404 { /* Efectos en el texto más grande */
color: #ec1648;font-size: 100px;font-weight: bold;
text-transform: uppercase;
}
.errort2-404 { /* Efectos en el texto mediano */
color: #ec1648;font-size: 50px;top: -10px;
font-weight: bold;
text-transform: uppercase;
}
.errort3-404 { /* Efectos en el texto pequeño*/
font-size:16px;color:#777;margin-top: -10px;
padding:20px;
text-align:center;
}
.errort4-404 a { /* Efecto en Ir a la pagina principal */
background: #777;color: #fff;font-size: 16pt;padding: 5px;
text-align: center;
top: 5px;
}

color: color del texto
font-size: tamaño de los textos
background: color de fondo

Espero les haya servido el tutorial ♥