Menú horizontal Blue Ice con buscador incluido
Hace ya bastante tiempo os presenté el menú horizontal flotante con buscador incluido. Esta vez te traigo algo similar, un menú que construí enteramente con una sola imagen de fondo (un sprite) a la que le atribuí propiedades distintas. Al tratarse de una única imagen, no retrasará en ningún aspecto la carga del contenido y el efecto al pasar el cursor sobre un link será inmediato.
Además, lleva incrustado en el lado derecho un buscador interno que facilitará a tus visitantes la búsqueda de una publicación específica en tu blog y, a diferencia del otro menú con buscador incluido, éste permanece fijo en el lugar que lo colocamos.
Lo creas o no, su instalación está basada en tan solo dos pasos y obtenerlo te llevará menos de un minuto.
Busca la etiqueta </head> y añade esta línea encima (antes):
Guarda la plantilla.
Pega este código en su interior:
Reemplaza URL PAGINA por la dirección del blog, la web o el artículo a enlazar así como Texto X por el nombre que llevará el enlace.
Puedes editar el término que llevará el botón del buscador borrando la palabra 'Buscar' y escribiendo algo personal.
En caso de querer agregar más enlaces al menú, incluye líneas como esta:
Házlo siempre antes del bloque que comienza por <li class="blbusc"><form...
Guarda el gadget y arrástralo hasta colocarlo bajo la cabecera. Accede a tu blog, comprueba el correcto funcionamiento del menú y... ¡Disfruta!
Además, lleva incrustado en el lado derecho un buscador interno que facilitará a tus visitantes la búsqueda de una publicación específica en tu blog y, a diferencia del otro menú con buscador incluido, éste permanece fijo en el lugar que lo colocamos.
Lo creas o no, su instalación está basada en tan solo dos pasos y obtenerlo te llevará menos de un minuto.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> y añade esta línea encima (antes):
<link href="https://sites.google.com/site/scriptsbalcon/b/blmenuBlueice.css" rel="stylesheet" type="text/css"/>
Guarda la plantilla.
Diseño>añadir gadget (elemento de página)>html-javascript
Pega este código en su interior:
<div id="menuBlueice">
<ul>
<li><a href="URL PAGINA">Texto 1</a></li>
<li><a href="URL PAGINA">Texto 2</a></li>
<li><a href="URL PAGINA">Texto 3</a></li>
<li><a href="URL PAGINA">Texto 4</a></li>
<li><a href="URL PAGINA">Texto 5</a></li>
<li class="blbusc"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="blcbuscc1" name="q" type="text"/><input id="blcbuscc2" value="Buscar" type="submit"/></form></li>
</ul>
</div>
Reemplaza URL PAGINA por la dirección del blog, la web o el artículo a enlazar así como Texto X por el nombre que llevará el enlace.
Puedes editar el término que llevará el botón del buscador borrando la palabra 'Buscar' y escribiendo algo personal.
En caso de querer agregar más enlaces al menú, incluye líneas como esta:
<li><a href="URL PAGINA">Texto 5</a></li>
Házlo siempre antes del bloque que comienza por <li class="blbusc"><form...
Guarda el gadget y arrástralo hasta colocarlo bajo la cabecera. Accede a tu blog, comprueba el correcto funcionamiento del menú y... ¡Disfruta!
También se muestra en dispositivo móvil y se adapta al tamaño?
ResponderEliminar