Con esto de las últimas opciones de blogger, nos han dejado realizar una página 404 personalizada. Yo en seguida me he puesto a ello y con la inspiración de HTML5BP y el widget de mejora para las páginas 404 de Google, creo que ha salido algo bastante decente.

Si queréis verlo funcionando, entrar en una página inexistente del blog.

Crear una página de error 404

Actualización: Si tenéis una plantilla antigua, tendréis que usar este método.

Para hacerlo, sólo tenéis que ir a Configuración » Preferencias de búsqueda » Mensaje de página no encontrada personalizado y copiar:

Doble click para copiarlo todo



<style>
/*Resetear los estilos de blogger*/
.status-msg-body{position:relative!important}
.status-msg-border{display:none!important}
/*El encabezado principal*/
.contenedor h1 {
font-weight: 600;
margin: 0 10px;
font-size: 50px;
text-align: center;
}
/*La cara*/
.contenedor h1 span { color: #bbb; }
/*El encabezado "otras sugerencias"*/
.contenedor h3 {
margin: .8em 0 .3em;
font-size:25px;
}
/*La lista de posibles causas*/
.contenedor ul{
list-style-type:disc;
padding: 0 0 0 40px;
margin: 1em 0;
}
/*El contenedor en sí mismo*/
.contenedor {
text-align:left;
width: 380px;
margin: 0 auto;
color:#515151;
font-weight: 600;
font-size: 16px;
box-shadow: 0 0 10px #bbb;
background: white;
padding:30px;
}
/*La fuente*/
.contenedor, .contenedor input {
font-family: "Open Sans","Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Estilos de Google Search */
#goog-wm .content{text-align:center}
/*La lista debajo de "otras sugerencias"*/
#goog-fixurl ul {
list-style: none;
padding: 0;
margin: 0;
}
/*El formulario de búsqueda*/
#goog-fixurl form {
margin: 0;
text-align:center;
}
/*El botón y el campo*/
#goog-wm-qt, #goog-wm-sb {
border: 1px solid #bbb;
font-size: 16px;
line-height: normal;
vertical-align: top;
color: #444;
border-radius: 2px;
}
/*El campo de búsqueda*/
#goog-wm-qt {
width: 220px;
height: 20px;
padding: 5px;
margin: 5px 10px 0 0;
box-shadow: inset 0 1px 1px #ccc;
}
/*El botón*/
#goog-wm-sb {
font-weight: bold;
display: inline-block;
height: 32px;
padding: 0 10px;
margin: 5px 0 0;
cursor: pointer;
background-color: #f5f5f5;
background-image: -webkit-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -moz-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -ms-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -o-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
}
/*Campos y búsquedas*/
#goog-wm-sb:hover, #goog-wm-sb:focus {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
#goog-wm-qt:focus, #goog-wm-sb:focus {
border-color: #105cb6;
outline: 0;
color: #222;
}
</style>

<div class="contenedor">
<h1>Error 404 <span>:(</span></h1>
<p>Lo siento, pero la página que intentas ver no existe.</p>
<p>El motivo puede ser:</p>
<ul>
<li>Una dirección mal escrita</li>
<li>Un link no actualizado</li>
</ul>
<script>
var GOOG_FIXURL_LANG = (navigator.language || 'es').slice(0,2),
GOOG_FIXURL_SITE = location.host ;
</script>
<script
src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>
</div>

Por supuesto, podéis cambiar los textos, o lo que queráis.

Si usáis plantillas antiguas

Para una gran cantidad de plantillas, esto servirá, pero para las antiguas, que no tienen esta opción, no queda más remedio que tirar del HTML de la plantilla. Gracias a Vagabundia sabemos como hacerlo.

Nota: De esta forma sólo agregamos el error. Si se quieren ver cómo crear estructuras más complejas y demás, recomiendo ver su entrada.

Si es vuestro caso, sólo tenéis abrir la edición de HTML, expandir artilugios, y buscar <b:includable id='main' var='top'>. Justo debajo, tenéis que añadir el siguiente código:

Mostrar/ocultar código
La falta de espacios es importante
Doble click para copiarlo todo


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<!--Inicio CSS-->
<style>
/*Resetear los estilos de blogger*/
.status-msg-body{position:relative!important}
.status-msg-border{display:none!important}
/*El encabezado principal*/
.contenedor h1 {
font-weight: 600;
margin: 0 10px;
font-size: 50px;
text-align: center;
}
/*La cara*/
.contenedor h1 span { color: #bbb; }
/*El encabezado &quot;otras sugerencias&quot;*/
.contenedor h3 {
margin: .8em 0 .3em;
font-size:25px;
}
/*La lista de posibles causas*/
.contenedor ul{
list-style-type:disc;
padding: 0 0 0 40px;
margin: 1em 0;
}
/*El contenedor en sí mismo*/
.contenedor {
text-align:left;
width: 380px;
margin: 0 auto;
color:#515151;
font-weight: 600;
font-size: 16px;
box-shadow: 0 0 10px #bbb;
background: white;
padding:30px;
}
/*La fuente*/
.contenedor, .contenedor input {
font-family: &quot;Open Sans&quot;,&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
}
/* Estilos de Google Search */
#goog-wm .content{text-align:center}
/*La lista debajo de &quot;otras sugerencias&quot;*/
#goog-fixurl ul {
list-style: none;
padding: 0;
margin: 0;
}
/*El formulario de búsqueda*/
#goog-fixurl form {
margin: 0;
text-align:center;
}
/*El botón y el campo*/
#goog-wm-qt, #goog-wm-sb {
border: 1px solid #bbb;
font-size: 16px;
line-height: normal;
vertical-align: top;
color: #444;
border-radius: 2px;
}
/*El campo de búsqueda*/
#goog-wm-qt {
width: 220px;
height: 20px;
padding: 5px;
margin: 5px 10px 0 0;
box-shadow: inset 0 1px 1px #ccc;
}
/*El botón*/
#goog-wm-sb {
font-weight: bold;
display: inline-block;
height: 32px;
padding: 0 10px;
margin: 5px 0 0;
cursor: pointer;
background-color: #f5f5f5;
background-image: -webkit-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -moz-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -ms-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
background-image: -o-linear-gradient(rgba(255,255,255,.1), #f1f1f1);
}
/*Campos y búsquedas*/
#goog-wm-sb:hover, #goog-wm-sb:focus {
border-color: #aaa;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
#goog-wm-qt:focus, #goog-wm-sb:focus {
border-color: #105cb6;
outline: 0;
color: #222;
}
</style>
<!--Inicio HTML-->
<div class='contenedor'>
<h1>Error 404 <span>:(</span></h1>
<p>Lo siento, pero la página que intentas ver no existe.</p>
<p>El motivo puede ser:</p>
<ul>
<li>Una dirección mal escrita</li>
<li>Un link no actualizado</li>
</ul>
<script>
//<![CDATA[
      var GOOG_FIXURL_LANG = (navigator.language || 'es').slice(0,2),
          GOOG_FIXURL_SITE = location.host ;
//]]>
</script>
<script src='http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js' type='text/javascript'/>
</div>
</b:if>

17 pensamientos en “Hacer una página 404 en condiciones en el blog

  1. Imagen de Chary Serrano el dijo:

    Emilio, no entiendo para que sirve este código.

    Quería preguntarte si sabes porque los slides que tenía ya no se ven en ninguno de mis blogs.
    He vuelto a poner uno a modo de prueba, como antes, con gadget HTLM/Javascrit y no va.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Este código sirve para que se vea en una página que no existe, es decir, un link roto, o lo que sea…

      Hay que copiarlo en Configuración » Preferencias de búsqueda » Mensaje de página no encontrada personalizado.

      Sobre las slides, me tendrás que decir en cual de tus blogs tienes el problema, e intentaré solucionarlo.

      De todas maneras (y eres la segunda persona en saberlo) estoy trabajando en un slider automático, ya sea sin o con jQuery.

      Por ahora solo tengo las demos 1 y 2…

      Bueno, lo dicho, que gracias por comentar, y si me pasas el blog te intentaré ayudar :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      Vale, creo que ya se a que slides te referías…

      Resulta que la página slide.com cerró el día seis de este mes, así que esos slides ya no funcionarán más.

      Ante eso yo no puedo hacer gran cosa… si son imágenes, sí te puedo decir que un slider de javaScript te podría venir bien, pero poco más…

    • Imagen de Chary Serrano el dijo:

      Gracias Emilio, con razón no encontraba nada en las direcciones habituales.
      Están bien las Demos.
      Yo tenía los slides como un resumen de algunas imágenes de los blogs y otro con los premios a mis recetas. Así en un recuadro se iban viendo en orden del concurso y la receta premiada, sin hacer nada.
      Si ves que esos slides tuyos funcionan, te agradecería me dijeses como hacer al menos uno, el de los premios.

  2. Imagen de Silvio Sánchez el dijo:

    Buen post, muy util. Cuento con una plantilla antigua y utilicé el segundo fragmento. Pueden ver el resultado de mi pagina de error en mi blog EcoSiglos. no dejo link para que no suene a spam :P Saludos!

  3. Imagen de Marina el dijo:

    Hola Emilio. Ante todo gracias por tu entrada, me está sirviendo para optimizar un poquito el blog. Me gustaría saber si es posible cambiar el texto "otras sugerencias", he tocado el código pero parece un script estable. ¿Podría cambiarse para que dijese otra cosa?

    Gracias!

    • Imagen de Emilio Cobos Álvarez el dijo:

      No desde el principio (es un texto que usa el script automáticamente), pero es posible cambiarlo después de que se ejcucte con javascript. Pon encima de la etiqueta </style>:
      .other-things{display:none}
      y debajo de todo:
      <script>
      (function(){
      var encabezado = document.getElementById("goog-fixurl").getElementsByTagName('h3')[0]
      encabezado.style.display = "block"
      encabezado.innerHTML = "Tu texto"
      })()
      </script>

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.