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

De forma predeterminada las plantillas de Blogger muestran un mensaje enmarcado a la hora de mostrar las etiquetas o alguna búsqueda dentro de nuestro blog. Tutorial probado en las Plantillas Responsive: Contempo y Soho.

Aunque la forma de aparecer es algo no muy estético podemos realizar algunos cambios para que vaya de acuerdo al diseño de nuestro blog.

Estos son dos ejemplos de los mensajes predeterminados en Blogger:

Mensaje predeterminado para la "búsqueda"

Mensaje predeterminado para las "etiquetas"

A continuación dos 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.

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 rojo 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):

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> </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 ésto pegas lo siguiente:

Código 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 -----*/

"EL ÚNICO LÍMITE ES TÚ CREATIVIDAD"

Referencias:

[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