Agregar una barra de búsqueda a Blogger

 Este fragmento HTML implementa una barra de búsqueda para un blog. A continuación, explico cada parte de manera concisa:

Barra de búsqueda

<div id='nav-search'>
    <form class='search-form' expr:action='data:blog.searchUrl' role='search'>
      <input autocomplete='off' class='search-input' expr:placeholder='data:messages.searchThisBlog' name='q' type='search' value=''/>
      <span class='hide-search'/>
    </form>
</div>
<span class='show-search'/>
<span class='mobile-menu-toggle'/> 

-----------------------------------

1. <div id='nav-search'>

   • Contenedor principal del componente de búsqueda con el identificador nav-search.

2. <form class='search-form' expr:action='data:blog.searchUrl' role='search'>

   • Etiqueta de formulario con la clase search-form.
   • El atributo expr:action utiliza una expresión que establece la URL de búsqueda del blog usando data:blog.searchUrl, permitiendo que la búsqueda redirija al resultado correcto.
   • El atributo role='search' indica que este formulario es una barra de búsqueda.

3. <input autocomplete='off' class='search-input' expr:placeholder='data:messages.searchThisBlog' name='q' type='search' value=''/>

   • Campo de entrada de texto para que el usuario introduzca el término a buscar.
   • autocomplete='off' desactiva la función de autocompletar del navegador.
   • La clase search-input se utiliza para aplicar estilos al campo de entrada.
   • El atributo expr:placeholder toma un valor de mensaje personalizado data:messages.searchThisBlog, que será un texto como "Buscar en este blog".
   • name='q' define el nombre del parámetro de búsqueda.
   • type='search' establece el campo como tipo de búsqueda.

4. <span class='hide-search'/>

   • Un elemento span vacío con la clase hide-search, posiblemente para ocultar o dar un estilo adicional al campo de búsqueda (según el CSS definido).

Cómo reutilizarlo en otro blog:

Para reutilizar este código en otro blog, sigue estos pasos:

1. Copiar el HTML tal como está.
2. Asegurarte de que el nuevo blog soporte la funcionalidad expr:action y data: variables, ya que estas suelen ser específicas de plataformas como Blogger (Google Blogs). Si estás en otra plataforma, deberás ajustar el código backend o frontend para que funcione con los valores dinámicos.
   • Por ejemplo, en WordPress, tendrías que usar <?php echo get_search_form(); ?> para obtener la URL correcta de búsqueda.
3. Ajusta el CSS para que coincida con el diseño de tu blog. Puedes reutilizar las clases search-form, search-input y hide-search o modificarlas para que coincidan con tu estilo actual.

Este código debería funcionar sin problemas si estás en una plataforma que soporte la sintaxis de expresiones como Blogger.