miércoles, 15 de enero de 2014

Pagina de error 404 estilo Facebook Para tu pagina

Como veran el aspecto es casi igual 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 pagina, blog entra en Configuración | Preferencias de búsqueda  y en donde vez que diga  Mensaje de página no encontrada personalizado y 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/AVvXsEhfPs2rc7xc4D9mcvmzKlbV8XN8zCm7h4lia4zmvFBItEGx2J5Msq4BfPBSJnGy9dp5y9fkE3HvGFjdFvyMA_scSaHKf4pRPzB8k8hhRLqZxOUyh2Bs2zhynrIVvLpGiRYa43YtO2y9cbQ/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>
El color azul están resaltadas las URL'S que estan colocada al final de la página, las cuales puedes reemplazar por tus URL de tu blog pagina, respectivamente también resalte en negrita los nombres con los cuales se visualizan los enlaces.


Comparte este post con tus amigos!

...o tambien puedes seguir el blog en:

0 comentarios:

Comparte tu opinion con los demas, deja un comentario. ↓

Los comentarios no son moderados, sin embargo si contienen insultos o son ofensivos, pueden ser borrados.

 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑