› › Hacer una página 404 en condiciones en el blog

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>