Modificar y personalizar el mensaje de las etiquetas y búsqueda en Blogger

Este tutorial te guía para reemplazar los mensajes predeterminados que Blogger muestra en las páginas de resultados de búsqueda y etiquetas. Aprenderás a modificar el HTML de tu plantilla y a añadir estilos CSS para crear textos más descriptivos, personalizados y visualmente atractivos. Esta optimización mejora la experiencia del usuario, refuerza la identidad de tu marca y ofrece beneficios sutiles pero importantes para el SEO de tu blog, haciéndolo lucir más profesional y coherente.

Figuras 1
Mensajes predeterminados en Blogger

Mensaje predeterminado para la "búsqueda"

Mensaje predeterminado para las "etiquetas"

Figuras 2
Imágenes del resultado de este tutorial

Mensaje modificado de la "búsqueda"

Mensaje modificado de las "etiquetas"

Vamos a modificar los mensajes. Te diriges a TEMA, EDICIÓN HTML y buscas el código de a continuación.

Tabla 1
Código original

<b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessageHtml)'> 
<div class='post-filter-message'> <div> 
<b:if cond='data:view.isArchive'> <data:view.archive.rangeMessage/> 
<b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/> <data:view.search.resultsMessageHtml/> </b:if> </div> 
<div> <a class='flat-button ripple' expr:href='data:blog.homepageUrl'> <data:messages.showAll/> </a> 
</div> </div> </b:if>

Lo que está en color amarillo lo vamos a sustituir por el siguiente código de color azul y verde (lo que está en color verde puedes cambiarlo como mejor te convenga):

Tabla 2
Código Modificado

<b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessage)'> 
<div class='post-filter-message'><div> 
<b:if cond='data:blog.searchLabel'> <div id='etiqueta-categorias'><data:blog.searchLabel/> </div> 
<b:else/> <span id='mensajebusqueda'>Resultado(s) de la búsqueda sobre: </span> 
<span id='busquedapersonal'><data:blog.searchQuery/></span><span id='busquedapersonal'><data:blog.searchLabel/></span> </b:if> </div> 
<div class='home-link-container'> <a class='home-link' expr:href='data:blog.homepageUrl'>[inicio]</a> 
</div> </div> </b:if>

Vamos a personalizar los mensajes. Te diriges a TEMA, EDICIÓN HTML y buscas ]]></b:skin> antes de esto pegas lo siguiente:

Tabla 3
Estilos CSS

/*----- ETIQUETAS Y BUSQUEDA -----*/

#etiqueta-categorias { /*tamaño y fuente del texto */
text-transform: capitalize;
margin-top: -10px;
font-family: Trebuchet MS, sans-serif;
font-size: 23px;
font-weight: bold;
color: #F4D03F;
}
.post-filter-message { /*color de fondo */
background-color: transparent;
}
.status-msg-border{ /*borde*/
border: 0px solid #fcc;
}
#mensajebusqueda { /*mensaje que se mostrara en la busqueda*/
font-family: Trebuchet MS, sans-serif;
font-weight: bold;
font-size: 20px;
color: #E8DAEF;
}
#busquedapersonal { /*palabra o frase a buscar*/
font-family: Trebuchet MS, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.6em #000;
}

/*----- FIN DE ETIQUETAS Y BUSQUEDA -----*/
 

Beneficios en SEO y Percepción de Marca

Modificar estos mensajes ofrece beneficios indirectos pero valiosos para el SEO, principalmente al mejorar la experiencia del usuario, una señal cada vez más importante para los algoritmos de búsqueda. Al personalizar el mensaje, puedes asegurar que los términos de búsqueda o el nombre de la etiqueta se presenten de forma prominente y coherente en la página.

Un diseño coherente y personalizado, en lugar de uno genérico, transmite atención al detalle. Proporciona una retroalimentación visual clara e inmediata que confirma la acción del usuario. Cuando alguien hace clic en una etiqueta, un encabezado personalizado le asegura que ha llegado al lugar correcto. Permite utilizar la tipografía, los colores y el tono de voz que definen la marca del blog. En lugar de un mensaje estándar de Blogger, el visitante ve un elemento más que forma parte de una experiencia de marca consistente y cuidada.

Notas

[1] Soraya Lambrechts (2021, 29 de julio). data:messages.searchBlog (Publicación en un blog). Revisado el 30 de julio del 2021 en https://bloggercode-blogconnexion.blogspot.com/1978/04/data-messages-searchBlog.html

[2] JMiur (2010, 07 de abril). Blogger y el uso de códigos condicionales (Publicación en un blog). Revisado el 03 de julio de 2021 en http://vagabundia.blogspot.com/2010/04/blogger-y-el-uso-de-codigos.html

[3] El Potro (2010, 29 de marzo). Condicionales de Blogger (Publicación en un blog). Revisado el 03 de julio de 2021 en http://www.ciudadblogger.com/2010/03/condicionales-de-blogger.html

[4] Sid Vishnoi (s/f). Etiquetas condicionales de Blogger para diferentes tipos de páginas (Publicación en un blog). Revisado el 02 de julio de 2021 en https://ultimatebloggerguide.blogspot.com/2016/07/blogger-conditional-tags-for-page-types.html

[5] Etiquetas de datos para Diseños (s/f). Ayuda de Blogger. Revisado el 01 de julio de 2021 en https://support.google.com/blogger/answer/47270?hl=es-419

[6] Abel Daniel Moreira Moreno (2020, febrero 23). Datos de Blogger (Publicación en un blog). Revisado el 01 de julio del 2021 https://docs.zkreations.com/2020/02/datos-de-blogger.html