Tutorial: Cómo crear una página de error 404 perfecta para Blogger

Si sabes un poco de marketing online y seo quizás ya sepas la necesidad de contar con una página de error 404 personalizada, informativa, amigable para el usuario, que le permita encontrar información relevante para que pueda seguir navegando por tu página en lugar de cerrar la ventana e irse sin encontrar lo que busca.

En la imagen a tu izquierda puedes ver la página de error 404 de mi blog. Puedes verla en vivo, por ejemplo aquí.

A continuación te enseñaré a crear una página de error 404 en Blogger, similar a la que he creado yo para mi blog:

1. En el panel de Blogger vas a => Configuración (si tienes el panel en inglés, Settings)

2. Click en => Preferencias para Motores Búsqueda (Search Preferences)

3. En la sección de Errores y redireccionamientos- Mensaje de Página no encontrada personalizado (Custom Page Not Found), click en => Editar

Puedes ver los primeros 3 pasos aquí:

4. A continuación, introducir el siguiente código en la casilla (Cambia los textos en azul por el nombre de tu página y la url en morado por la url de tu imagen personalizada. Los textos en rosa son personalizables):

<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 />
&nbsp;
     
<br />
<form action="http://NOMBRE DE TU BLOG.blogspot.com/search" class="formulariodemo cf" method="get">

<input name="q" placeholder="Introducir 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&amp;callback=getRandomPosts&amp;max-results=999" type="text/javascript"></script>
</div>
</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>

<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>

Tu página se verá así (recuerda que puedes personalizar los textos, colores y la imagen):

Fuente: miltrucosblogger

Espero que el post de hoy haya sido útil, recuerda dejar tus comentarios y compartirlo en las redes sociales si te ha gustado.

¡Hasta mañana!