x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 9.11.16 - Tutorial

Mejorando Themexpose: Personaliza los mensajes de error 404

error 404 en Blogger para Themexpose

Si lees blogs rutinariamente seguro que ya sabes de que plantillas hablo. Es que las plantillas Themexpose están tan en boga que incluso muchas personas las adquieren, editan sus estilos y revenden como productos exclusivos, para que así los blogueros tengan un sitio más personalizado.

Pero estas plantillas (sí, incluso las personalizadas por hasta cifras de 3 dígitos) tienen uno que otro detallito sin subsanar y hoy explicaré como solucionar uno de estos: el mensaje de error si el enlace está roto (ya no existe el post o fue mal escrito) o si la búsqueda de tu lector es infructuosa. Este tutorial es funcional en las siguientes plantillas Themexpose:
  • Claire
  • Voux
  • Elegant
  • Minimal
  • Rosemary
  • Sugar
  • Personal
  • Feminist
  • Life & Fashion


En las plantillas antes mencionadas notarás que si el enlace está roto lo único que muestra es 404 en el título de la pestaña y donde se supone que van los posts un enorme espacio en blanco, lo mismo sucede si quién nos lee utiliza el buscador incluido en la barra superior (de hecho es uno de los detalles más solicitados por blogueros para sus sitios) y no existe lo que buscaba.

Anteriormente mis conocimientos no me permitieron solucionar a totalidad estos dos detalles en la plantilla de mi blog personal; con el primero, la página 404 logré conseguirla a fuerza, pues ni un sólo tutorial funcionaba en esta plantilla y los pasos que seguí los encuentras en mi ebook, igualmente encuentras en él como opté por utilizar el script del buscador de Google para subsanar el error en la búsqueda, pero este como cualquier script agrega tiempo de carga a tu plantilla, sin contar los estilos CSS que siempre marcaban inconveniente en Pagespeed Insights.

Así que ahora decidí retomar esta 'batalla' y hoy te comparto una solución que cubre estos dos inconvenientes, pues no es nada agradable para quién nos lee toparse con un simple espacio en blanco. 

PASO 1: Como siempre, guardar una copia de seguridad de la plantilla.

PASO 2: Localizamos el siguiente fragmento de código:
          <b:includable id='main' var='top'>
            <b:loop values='data:posts' var='post'>
              <b:include data='post' name='post'/>
            </b:loop>

Y JUSTO debajo pegaremos
      <b:include data='top' name='status-message'/>

PASO 3: Localizamos <b:includable id='status-message'> y sustituiremos dentro de él TODO con el siguiente código:
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<b:if cond='data:numPosts == 0'>
<i aria-hidden='true' class='fa fa-frown-o'/><br/><br/>Parece que en este blog no hay información sobre <b><data:blog.searchQuery/></b>.<br/>
<b:else/>
</b:if>
<b:else/>
<data:navMessage/>
</b:if>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>

En rojo está la frase que se mostrará cuando lo que solicitan a través del buscador en nuestro blog no existe, es el mensaje que puedes modificar a tu antojo.

PASO 4: Vamos a <b:skin y dentro pegamos los estilos (estos son los que yo utilicé):

.status-msg-body{font-size:35px;line-height:45px;}
.status-msg-body i{font-size:105px;color: red;}
.status-msg-border{border:none;}
.status-msg-bg {background-color: white;}

Como siempre, el css es modificable y te explico a continuación cada línea:
  • .status-msg-body modifica el mensaje en sí: colores, fuentes, tamaño... .status-msg-body i afecta sólo al ícono de carita triste que escogí. Puedes eliminar esta línea si no usarás ícono de font awesome.
  • .status-msg-border es para las líneas que normalmente encierran este mensaje, puedes jugar con los distintos bordes.
  • .status-msg-bg se encarga del fondo (background) y aquí puedes incluso agregar imágenes.


Con todo esto ya tendremos el siguiente resultado que es específicamente para el error del buscador:

Aparecerá donde irían normalmente los post.



Ahora seguiremos con la página 404:

PASO 5: Seguimos dentro de la plantilla pero en esta ocasión localizamos </head> y después de este pegaremos el estilo de nuestra página 404:

  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <style>
#widget-area, #Instagram {display:none;}
.actions-404{width:100%;float:center!important;text-align:center!important}
.post-404{padding-top:60px;padding-bottom:60px}
.ops-404{width:70%;margin:0 auto;font-size:32px;
font-weight:400;text-align:center!important}
.ops-404 span{font-size:58px;line-height:1.1;font-weight:700}
.title-404, .title-404 i {font-size:200px;font-weight:700;line-height:1.1;
color:#000;float:center!important;text-align:center!important}
.link-404{font-size:26px;padding-top:20px;padding-bottom:0;
float:center!important;text-align:center!important}
.link-404 a{color:#000;font-weight:700}
#blog-pager{display:none}
    </style>
  </b:if>

PASO 6: Guardamos los cambios en nuestra plantilla y ahora nos dirigimos a Configuración > Preferencias de Búsqueda y en el apartado Errores y redireccionamientos veremos el cuadro Mensaje de página no encontrada personalizado donde pegaremos el siguiente fragmento de código:
            <div class='post-404'>
              <div class='actions-404'>
                <div class='ops-404'>
                  <span>
                    &#161;Ooops!
                  </span><br/>
                  Parece que lo que buscabas ya no existe<br/><br/>
                </div>
                <div class='title-404'>
4<i aria-hidden='true' class='fa fa-meh-o'></i>4
                </div>
                <div class='link-404'>
<br/>Puedes
                  <a href='/'>
                    <trans>
                      regresar
                    </trans> 
                  </a>
 o leer                   
                    <a href='ENLACE DE TU ENTRADA RECOMENDADA'><trans>
                      una
                    </trans> 
                  </a>
de mis historias favoritas.
                </div>
              </div>
            </div>

Nuevamente en rojo lo modificable y este sería el resultado:

Puedes modificar el CSS para que ocupe TODO el ancho de la pantalla, ahora mismo sólo ocupa el espacio de los posts.




Como verás la página de error ofrece dos opciones: regresar a la página principal o leer una historia recomendada, esta última la puedes eliminar. Finalizo así este tutorial para que nuestros blogs no queden en blanco para nuestros lectores.

Muchos bloggers no gustan del mensaje estándar de Blogger: Mostrando entradas con la etiqueta XXXXX. Mostrar todas las entradas. Y asumo que por esto los chicos de Themexpose eliminaron por completo de las plantillas que enumeré esta función, pero como afectaba además a la página 404 y a la de error del buscador he considerado agregar lo necesario. Si notas el código del PASO 4, luego de lo pintado en rojo hay un b:else en azul que no tiene ninguna expresión, justo luego de ese b:else iría el mensaje personalizado para cuando están en la página de etiquetas o cuando la búsqueda sí arroja resultados, yo lo he dejado en blanco porque lo prefiero así.

Espero que lo que te he mostrado hoy te sea de provecho y puedes con gusto compartir tu resultado y también a este tutorial.


Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *