Themexpose: Personaliza el ERROR 404

22.11.16

Coding

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 ofrecen dentro de packs, 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
Plantillas 2017  con el mismo problema
  • Cheer Up 
  • November
  • Best
Plantillas 2018 con el mismo problema
  • Carolina
  • TrueBlog

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  y no existe lo que buscaba.

Así que  hoy te comparto una solución que cubre estos dos inconvenientes, pues no es nada agradable para quién te  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/><data:blog.searchLabel/></b>.<br/>
<b:else/>
</b:if>
<b:else/>
<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='/'>regresar</a> o leer                   
                    <a href='ENLACE DE TU ENTRADA RECOMENDADA'>una</a> de mis historias favoritas.
                </div>
              </div>
            </div>
            </b:if>
</div>
</div>
<div style='clear: both;'/>
</b:if>

En rojo están los mensajes que puedes modificar a tu antojo.


PASO 4

Vamos a <b:skin y dentro pegamos los estilos:
.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;}

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


Ahora seguiremos con la página 404:

Seguimos dentro de la plantilla pero en esta ocasión localizamos </head> y después de este pegaremos el estilo específico para la página de error:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <style>
(COLOCA AQUÍ LA CLASE O ID DE ELEMENTO QUE QUIERAS OCULTAR) {display:none;}
.actions-404{width:100%;float:none;text-align:center!important;margin:0 auto;}
.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;text-align:center!important}
.link-404{font-size:26px;padding-top:20px;padding-bottom:0;text-align:center!important}
.link-404 a{color:#000;font-weight:700}
#blog-pager{display:none}
   </style>
  </b:if>


Estos serían los resultados obtenidos:

Página 404



Mensaje de error en buscador


Finalizo así este tutorial para que tu blog no quede en blanco para los 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 3, 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í.



Editado en Junio 2018




yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio donde encuentras recursos y consejos para tu espacio en Blogger.






Otros artículos...



Se ha comentado...

  1. Hola!
    Me encantan los tutoriales pero que sencillo era cuando podía personalizar todo en blog, ahora en wordpress no puedo porque solo admiten pagos u.U
    Es muy valioso tu aporte porque crear codigos html es muy dificil ademas lo explicas de una manera que se entiende.
    Un beso!

    ResponderEliminar
  2. Holaaa! Yo lo tengo puesto en mi blog y me va genial. Lo has explicado estupendamente y seguro que aquellos que quieran ponerlo no tendrán problema :) Gracias por tu aportación! Es un recurso que puede interesarle a mucha gente. Besos

    ResponderEliminar