Mil Trucos Blogger

Página de error 404 estilo Facebook

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

DEMO DEL TRUCO

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="http://4.bp.blogspot.com/-3GyiPk15CWI/UngQtrjIsGI/AAAAAAAADUY/_gS590VH448/s1600/pagina+de+error+estilo+facebook.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a data-gt="{&quot;target&quot;:&quot;back&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" 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;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;home&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" 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;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;help&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" 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 == &quot;error_page&quot;'>
<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.

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

! Comentario

  1. esau riveroll esau riveroll
    Noviembre 7, 2013    

    Muy bueno lo pondre en mi blog! http://www.juegomiandroid.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo