Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

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!

Ariana dice...

Chico yo no entiendo como haces estas cosas. Otro aparatito más que funciona de maravilla en mi blog.

Marcos dice...

Lindo menu, vos sois una joya. Ya lo puse a mi blogg!

Jaime Trujillo Escobedo dice...

Ariana, ¿Verdad que es fácil de instalar? Lo mejor de todo es que apenas tiene que cargarse, aparece junto al contenido sin retrasar la carga del blog.

Jaime Trujillo Escobedo dice...

Perfecto Marcos, ahora disfruta de una cómoda herramienta para navegar por el blog.

Onalem! dice...

Pongo el código de CENTER al principio y al final /CENTER y me queda como podrías ver en mi blog, ¿Cómo puedo arreglar eso?.

Jaime Trujillo Escobedo dice...

Onalem, ¿Dónde incluyes las etiquetas? Debes hacerlo antes de la línea <div id="menuBlueice"> y después del cierre </div>.

Tomaster dice...

Jaime realemente debo felicitarte por tu gran trabajo. Este menu va de maravilla. Te invito a que te pases por mi proyecto blog musical

www.el-vinilo.blogspot.com

Quiza podamos hacer un intercambio de links si te interesara.
Por cierto al pasar el mouse sobre los links de la barra esta se torna blanca y no azul como deberia, podrias ayudarme?

Jaime Trujillo Escobedo dice...

Gracias por las felicitaciones, Tomaster. Para deshacerte del fondo blanco (el cual aparece por un atributo en tu plantilla, no por el menú -que instalaste a la perfección-) encuentra esto en tu plantilla:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: #FFF9EE;

Reemplaza la línea en negrita con background:none;.

El resultado no aparecerá en vista previa por lo que debes guardar la plantilla para asegurarte de su correcto funcionamiento.

Con respecto al intercambio de enlaces, debo decirte que actualmente no lo hago pero puede que en el futuro me proponga ampliar la lista.

PuroJuego dice...

Hola Jaime me gusto mucho este menu que ya tengo aplicado, gracias. Aparte de esto tengo un gran problema cuando salgo de mi cuenta en blogger los efectos y trucos aplicados en mi plantilla pierden su efecto, no se que es ya cree el blog de pruebas y sucede lo mismo.
Por favor si me puedes ayudar,saludos.
Mi Blog de Prueba

Jaime Trujillo Escobedo dice...

PuroJuego, aunque desconozco a que efectos te refieres, puedo comentarte que -tal y como describes el problema- se trata de un problema con el hosting de archivos. ¿Haces uso de Google Sites para subir los scripts a tu cuenta y posteriormente utilizar su dirección o simplemente copias la URL ofrecida por el autor del truco?

PuroJuego dice...

Gracias Jaime ya lo he solucionado los scripts los tengo alojados en Google Sites, pero los tenia en Modo Privado, al cambiarlo Modo Publico cargan a la perfeccion. Muchas Gracias.

Jaime Trujillo Escobedo dice...

Perfecto entonces. Ten en cuenta que cosas tan simples como la configuración de un servicio de hosting puede afectar a la carga de scripts.

Juan Carlos Segales L. dice...

Estimado jaime como hago para que quede mas limpio y sin los blancos que queda en mi blog, http://juancarlosegales.blogspot.com/ bueno un saludo y gracias por pasarnos estos trucos...

Jaime Trujillo Escobedo dice...

Juan Carlos, prueba a incluir el siguiente bloque de CSS en tu plantilla, bajo la primera línea de código a insertar:

<style>#menuBlueice ul {
background: url("http://1.bp.blogspot.com/_Bvhqq3YFEx4/TPDcYFVynnI/AAAAAAAAAeM/ESlN88fvuWc/s320/blblackiceblcn.png") repeat-x scroll 0 0 transparent;
list-style: none outside none;
}</style>

Esto hará que el menú pierda el color grisáceo y se iguale el fondo. Si deseas centrar los enlaces del menú, encierra el código que agregaste en un gadget html-javascript entre las etiquetas que se citan en esta entrada. Gracias a ti seguir las entradas del Balcón.

Juan Carlos Segales L. dice...

muchas gracias Jaime, tus concejos siempre nos ayudan, gracias nuevamente...

Jaime Trujillo Escobedo dice...

Gracias a ti, Juan Carlos. Por cierto, quedó muy bien el menú vertical desplegable; es muy cómodo navegar por tu blog ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo