Hace un tiempo presentamos como
crear una página de error 404 estilo Taringa, hoy vamos a presentar como crear una página de error 404 estilo Facebook para nuestros blogs de Blogger.
Como ven el aspecto es casi idéntico a la página de error de Facebook, con un estilo sencillo pero muy funcional esta página esta hermosamente diseñada.
Para agregar este truco a tu blog entra en
Configuración | Preferencias de búsqueda y en donde dice
Mensaje de página no encontrada personalizado haz click en
Editar,allí pega lo siguiente:
<h2 class="_4-dp" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 24px; line-height: 28px; margin: 40px 0px 20px; padding: 0px; text-align: center;">
Lo sentimos; esta página no está disponible</h2>
<h3 class="_4-dq" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 16px; line-height: 20px; margin: 20px 0px; padding: 0px; text-align: center;">
Es posible que el enlace que seguiste esté roto o se haya eliminado la página.</h3>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4D_eu8G7Qu2iPqTT0QMabAKJg1Bvbiq-yQE7_PO10E1wa8-PAYXkJVGoCQ8jM5_zgnn2H9wqJNQArs7sPOBm5BkgiXjcAK7tJGRXqW13CkrO7jiFzl2Yex7Y2MKmYA_6msf2QQdOVV8g/s1600/pagina+de+error+estilo+facebook.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a data-gt="{"target":"back","marketing_page_click":"1","conversion":"1"}" href="URL A COLOCAR" role="button" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Volver a la página anterior</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;"> · </span><a data-gt="{"target":"home","marketing_page_click":"1","conversion":"1"}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Ir a la página de inicio de Facebook</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;"> · </span><a data-gt="{"target":"help","marketing_page_click":"1","conversion":"1"}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Visita el Servicio de ayuda</a>
</div>
<div>
<br /></div>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>
En color azul están resaltadas las URL'S que van al final de la página, las cuales puedes reemplazar por tus URL'S, respectivamente también resalte en negrita los nombres con los cuales se visualizan los enlaces.
Para que los estilos por defecto no afectaran al diseño de este mensaje añadí un
include que es una especie de
reset que anulara los estilos predeterminados de Blogger.
Para finalizar solo debes Guardar los cambios.
Esperamos que te haya gustado este tutorial y que sigas visitando Mil Trucos Blogger.