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/AVvXsEgPxaf5u1MPWE7MuSvOjwmhEFfdCj-vI_8OL3xWCctd8e4yJwr70X_-SC5XYZY7_uoRmDUi44Yy7yTtYHM_dI3mY4OKJZIZIX4czs4hnU8WoBh1ncAoAZYVKYgcR6VSd1-NVWzg87Z8qMM/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.