JMiur [E]

Había visto esto implementado en algunos blogs pero nunca se me ocurrió averiguar de que se trataba. Gem@ lo hizo y la respuesta la muestra en su blog así que simplemente, paso a transcribirla.

Este truco hará que la Navbar aparezca y desaparezca gradualmente cuando acercamos el puntero del ratón.

Para implementarlo, basta agregar el script en la plantilla. Vamos a DISEÑO / EDICION HTML y justo antes de </head>; añadimos lo siguiente:
<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>
Como prototype y scriptaculous son scripts muy utilizados por muchos efectos, conviene verificar si ya no las tenemos incluidas; de ser así, no debemos volver a hacerlo y sólo es necesario agregar la última parte.

El truco es parte de una serie de posts publicados en hodavame, que, bajo el título de Jugando con la Navbar, muestra algunas posibilidades conocidas y desconocidas.

Otra alternativa que desarrollan es la hacerla semi-traslúcida, controlando su opacidad, de tal modo, se pueden obtener combinaciones de color más adecuados al estilo de cada blog.

Nuevamente, vamos a DISEÑO / EDICION HTML y justo antes de </head>; añadimos lo siguiente:
<style type="text/css">
#navbar {
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity: 0.5;
}<style<g;
Por último, también es posible ocultar la Navbar automáticamente según sea la posición del puntero del mouse. El efecto, mantiene oculta la barra y la muestra cuando se coloca el mouse en la parte superior de la pagina.
<style type="text/css">
#navbar-iframe {
opacity: 0.0;
filter: alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity: 1.0;
filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>

35 comentarios:

Gem@  

Gracias por citarme genio ;)

Responder
JMiur  

Un placer, Gem@ y un par de ideas interesantes aunque yo, con la Navbar no me llevo bien :D

Responder
Gem@  

Ya somos dos :)

Responder
CA Cuatro Caminos  

Joder muchas gracias por la info, esta muy bien

Responder
Anónimo  

amigos como hago para que mis comentarios se vean en mi blogger. y tambien colocar un foro. te agradezco que me expliques paso a paso..

Responder
JMiur  

De foros no puedo hablar pero, es necesario tener algún servicio externo, por ejemplo:
http://www.foroactivo.com/es/crear-un-foro/

Respecto de los comentarios, no entiendo tu problema ya que esto es algo que se muestra por defecto con cualquier plantilla. En todo caso, deja la URL de tu blog para verlo.

Responder
Marcos Cousseau  

hola!
te queria preguntar como haces para poner esa barra de vinculos(home,html/...)me podrias pasar los scripts???

mi correo es marcoscousseau@gmail.com


desde ya muchisimas gracias por tu ayuda!!
sos un groso!

Responder
JMiur  

Marcos:

En este post están las explicaciones y los archivos necesarios

Responder
Oliver Figueroa Cuadros  

Hola!! que bueno es tu blog!!! yo recien estoy comenzando a implementar el mio siempre me encanto estas cosas y espero me puedas ayudar con toda la gran habilidad que tienes...bueno, tengo unas cuantas preguntas espero sepan comprender mi inexperiencia en esto (por si pregunto cosas obvias :$) las preguntas son las siguientes: puedo hacer que el navbar desaparezca?? como hago para ampliar el ancho de mi blogger?? y por ultimo que libro o libros me recomiendas para aprender todo lo relacionado a diseño web?? muchas gracias de antemano y felicitaciones por tus aportes, eres de gran ayuda a muchos!! un abrazo!!
Oliver

Responder
JMiur  

Oliver:

Las preguntas no molestan, lo peor que puede ocurrir es que te diga que no sé :)

En este caso, para ocultar la navbar coloca esto antes de </b:skin>

#navbar-iframe {height: 0px; visibility: hidden; display:none;}

Ampliar el ancho total del blog no es complejo aunque, si hay muchas imágeens como fondo, hay que rehacerlas. Ahí, lo primero que hay que hacer es definir cuánto lo quieres ampliar en total y ver como distribuirás ese ancho entre los posts y la sidebar. En todo caso, envíame un mail recordándome la URL de tu blog y lo charlamos porque algunos detalles pueden exceder las posibilidades de un comentario: vagabundia@gmail.com

Lo de los libros no lo puedo contestar porque ... lo confieso: no he leido ninguno :( sólo soy un usuario curioso que todo lo que sabe lo aprendió a fuerza de equivocarse y tener paciencia.

Responder
Oliver Figueroa Cuadros  

Graciassss!!! ya te escribi un correo espero, cuidate , nos vemos!!

Responder
Criptozoólogo  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Tienes razón, le falta la barra final, ya la cooregí:

<script src="http://wiki.script.aculo.us/javascripts/prototype.js" type="text/javascript"/>

Responder
Criptozoólogo  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

¡Oh Diós! ¿Quién escribió este post? Ahhh .. fui yo :$

Ya está, había otro error, parece que al publicarse se cambiaron unos caracteres. Ya está corregido (espero). Por lo menos, acabo de copiarlo y probarlo en la plantilla sin problemas.

Responder
Criptozoólogo  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Ahhhhhhh esto ya es una cuestión de amor propio :D

Mira, por lo que veo, el problema es que el post es viejo y esos dos archivos del script, ya no existen así que lo que he cambiado en esa parte del código para que uses las APIs de Google (imagino que google no desaparecerá en mucho tiempo) Es el sistema que uso actualmente aunque no he colocado este truco en la plantilla.

Creo que con eso se solucionará el problema.

Responder
Criptozoólogo  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

OHHHHHH. Pués eso también podría hacerse con el mismo código, sólo hay que invertir una parte:

Event.observe(&#39;navbar-iframe&#39;, &#39;mouseout&#39;, navbarShow, false);
Event.observe(&#39;navbar-iframe&#39;, &#39;mouseover&#39;, navbarHide, false);

:D

Responder
Alberto de la Madrid  

Admirable. Andaba curioseando porque de repente en mi blog aparece un número algo exorbitante de visitas con la referencia de Navbar (que no sé lo que es)en las fuentes y date, me volví a encontrar con tu blog (hace unos meses me ayudaste a resolver un problema: gracias de nuevo). A mí esto me parece cosa de magia, de verdad.
Por cierto que lo admirable no es la sorpresa sino tu disponibilidad para echar un cable a la gente de este planeta. Chapeau!

Responder
JMiur  

Gracias por el comentario, Alberto :D

Responder
capitanphantom  

Barra de menú (navbar.?)soy nuevo: quiero una pagina de inicio limpia y enviar todas las entradas, videos, fotos,etc.etc. a otras paginas mediante utilización botones de la barra superior que ya está instalada. No se como codificar la plantilla HTML para que al oprimir por ejemplo botón "Películas" me derive a otra página que haré con información al respecto. Como creo y como codifico para que me derive según titulos de la barra.? Gracias (BLOGSPOT)

Responder
JMiur  

Esos son enlaces, basta cambiar el atributo HREF del enlace y colocar allí la dirección.

Responder
Orlando Francisco Menéndez  

Anteriormente en mis otros blogs pude quitar la navbar, pero ahora parece que los de Blogger han logrado obstaculizarnos.
Ahora impide que se quite y da un mensaje que dice:

"No hemos podido obtener una vista preliminar de su plantilla. Por favor, corrige el siguiente error y envía la plantilla de nuevo. Se ha encontrado más de un artilugio con el ID: Feed1. Los ID de artilugio deben ser exclusivos."

Responder
JMiur  

El código para ocultar la navbar sigue siendo el mismo.

El error que te muestra Blogger es, probablemente, porque estás cambiando la plantilla. Eso se resuelve buscando el elemento duplicado Feed1 y cambiándole el nombre; por ejemplo, llamarlo Feed51.

Se guarda y si siguen apareciendo esos mensajes, se repite el proceso cambiando los nombre.

Hay un post que habla sobre eso con más detalle.

Responder
Rosi  

hay muchas graciiiiias!! :P aui estaba la respuestaaaaaaaa!! mi mama me decia q no me rompa la cabeza x esto... xq tengo 11 años y lopodia hacer mas adelante............... :D

Responder
JMiur  

Bien hecho, Rosi :D

Responder
nina  

grax! :D

Responder
Theemilio_crazy  

Hola JMiur muy buena esta entrada gracias :D... Quiero saber como separar los comentarios, para que no se vean todos juntos y si tambien hay otra cositas para que se vean mejor los comentarios te lo agradeceria bastante. :)

Responder
JMiur  

¿En cuál de tus blogs quieres separar los comentarios?

Responder
Theemilio_crazy  

en este blog http://pruebastheemiliocrazy.blogspot.com... Perdon por no responderte antes.

Responder
JMiur  

Podrías cambiar el margen, aumentándolo. Ahora dice algo así:

#comments-block .comment-footer {
letter-spacing:0.1em;
line-height:1.4em;
margin:-0.25em 0 2em;
text-transform:capitalize;
}

Si cambias 2em por un valor más alto, se separarán. También, en lugar de usar em puedes usar pixeles, por ejemplo: 30px

Responder
Theemilio_crazy  

Ok gracias JMiur lo voy a intentar.

Responder
Bomb  

hola, disculpen pero cuando intento poner el efecto de navbar traslúcida me aparece un error que dice que es imposible mostrar la página.

lo he copiado y pegado justo antes de < head > ayudarme por favor.

Responder
JMiur  

No se coloca antes de <head> sino antes de </head>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR