 |
| 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.
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.
Publicaciones Relacionadas
trucos blog
