Aprovechando una de las ultimas novedades que Blogger ha implementado (la de la pagina de error 404) decidí darle un nuevo aspecto a mi pagina de error y para ello tome como referencia la pagina de error de Taringa! y luego de un duro trabajo he logrado un aspecto similar a esta.
Entre las características que le añadí están las siguientes:
-Un buscador similar al de Taringa!
-Una lista de entradas tal como la muestra Taringa!
- Otros aspectos menores como estilos..
Para realizar este truco use CSS,JavaScript (exactamente JSON) y otras propiedades CSS para el buscador y ocultar el sidebar.
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,allí pega lo siguiente:
<div class="warning-header">
<h1>
<span class="orange" style="color: orange;">Oops!</span> lo que estás buscando no está por aquí!</h1>
<i>Pero no te escapes, aun puedes seguir buscándolo..</i><br />
<br />
<br />
<form action="http://NOMBRE DE TU BLOG.blogspot.com/search" class="formulariodemo cf" method="get">
<input name="q" placeholder="ingresar texto ..." required="required" type="text" />
<button type="submit">buscar</button>
</form>
<br />
<style>
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {clear:both; }
.cf { zoom:1; }
/* el formulario en si mismo */
.formulariodemo {
background-color: #303941;
border-radius: 10px;
box-shadow: 0 0 2px #606971 inset;
margin: 0 auto;
padding: 15px;
width: 450px;
}
/* la caja donde se ingresa el texto a buscar */
.formulariodemo input {
background-color: #EEE;
border: none;
border-radius: 3px 0 0 3px;
float: left;
font-family: Tahoma;font-size:15px;font-weight: bold;
height: 20px;
padding: 10px 5px;
width: 330px;
}
.formulariodemo input:focus {
outline: 0;
background: #FFF;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
/* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
.formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
.formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
.formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
/* aquí iría el estilo de del atributo required si es que se desea definirlo */
.formulariodemo input:required { box-shadow: none; }
/* el botón de envio */
.formulariodemo button {
background-color: #32CD32;
border: none;
border-radius: 0 3px 3px 0;
color: #FFF;
cursor: pointer;
float: right;
font-family: Tahoma;
font-size: 15px;
font-weight: bold;
height: 40px;
overflow: visible;
padding: 0;
position: relative;
text-transform: uppercase;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
width: 110px;
}
.formulariodemo button:hover{ background: #238E23 ; }
.formulariodemo button:active, .formulariodemo button:focus{ background: #32CD32; }
.formulariodemo button:before { /* el detalle del triángulo izquierdo */
content: "";
border-color: transparent #238E23 transparent;
border-style: solid solid solid none;
border-width: 8px 8px 8px 0;
left: -6px;
position: absolute;
top: 12px;
}
.formulariodemo button:hover:before { border-right-color: #32CD32; }
.formulariodemo button:focus:before { border-right-color: #238E23; }
</style>
<br />
<div class="title clearfix">
<h2>
..o visita el mejor contenido de la semana</h2>
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://o1.t26.net//img/404graph.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://o1.t26.net//img/404graph.png" /></a></div>
<br />
<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 15;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://NOMBRE DE TU BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>
</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>
<b:if cond='data:blog.pageType == "static_page"'>
<style type="text/css">
#sidebar-wrapper {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style type="text/css">
#sidebar-wrapper {display:none;}
#main-wrapper {width:940px;}
#main {width:100%;}
.post {width:90%;}
</style>
</b:if>
Ahora solo reemplaza lo que esta en
azul por lo que se indica y guardas los cambios.
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.