Dos opciones para Navbar | Oloblogger Hace un tiempo facilitamos un código para eliminar del todo la Navbar de Blogger. Bueno, realmente la hacia invisible, pero el efecto era e...

3 de octubre de 2007

Dos opciones para Navbar

Hace un tiempo facilitamos un código para eliminar del todo la Navbar de Blogger. Bueno, realmente la hacia invisible, pero el efecto era el deseado.

Ahora contaremos como conseguir otros dos efectos más.




NAVBAR QUE APARECE AL PASAR POR ELLA EL RATON

Antes del </head> colocamos este código y la barra pasará de invisible a visible cuando se pase por encima de ella con el puntero.

<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>


BARRA PERSONALIZADA

Primero hay que hacer desaparecer la Navbar original, tal y como ya se explicó anteriormente.

A continuación se añade este otro código...

<div style=' background-color:#940f04; border: 2px solid #222222; margin: 0 0 5px 0; padding: 4px 0; font-size: 16px;'>
<img alt='TEXTO QUE APARECE AL PASAR POR ENCIMA' src='URL DE LA IMAGEN' style='vertical-align: text-bottom;'/>
ESTO ES UNA ESPECIE DE NAVBAR
</div>

...con el color de fondo (background-color), la imagen (src), el tamaño de fuente (font-size), el borde (border)...etc. configurado a vuestro antojo. Echándole imaginación se puede poner una imagen de fondo en lugar de un color, añadir un script, un hiperenlace...

Si no se quiere poner una imagen, hay que quitar la etiqueta <img .../> con todo su contenido.


* La primera opción parece la más elegante, pero para los muy creativos, la segunda opción puede dar muy buenos resultados.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

26 comentarios :

  1. Gracias por la info, realmente ya habia modificado un codigo para eliminarlo por completo y sin dejar espacio y colocar en su lugar un menu de traduccion, pero no sabia en donde ponerlo y en tu info me indico en donde ponerlo. Realmente no habia encontrado informacion en toda la red que me indicara en donde. Intente publicar en este comentario el codigo que tengo pero no es aceptado.

    Muchas gracias, muy variado tu blog y lo he enlazado desde una de mis publicaciones relacionadas. Sigue asi y me tendras visitandote muy seguido.

    ResponderEliminar
  2. Je, je...Me alegro que te guste, aunque no sé si podré seguir así...

    ResponderEliminar
  3. hola nuevamente oloman, no se donde poner este comentario y creo que no solo me sirve a mi sino a muchos, creo que deverias de crear una entrada con este nuevo tema:
    Como crear un buscador de google que no solo busque en la web si no tambien en tu sitio, lo e visto en muchos sitios pero solo logro conseguir un buscador general, no uno para mi propia web. gracias y epero tu respuesta

    ResponderEliminar
  4. Solucionado. Ya tienes tu entrada...

    ResponderEliminar
  5. muchas gracias por tener informacion detallada y precisa ya que intente casi toda una noche para que me quedara invisible el mavba y en todos lados o me cofundian al donde ponerlo o el codigo estaba incompleto,pero gracias a tu blog y por supuesto a ti ya lo tengo,saludos

    ResponderEliminar
  6. Hola oloman.

    Excelente truco, me ha gustado mucho y me ha servido...

    Saludos!!!.

    ResponderEliminar
  7. En mi plantilla no servía... lo que hice fue buscar la palabra "navbar" y sustituir lo que allí ponía por

    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)

    Espero que sirva como aportación

    ResponderEliminar
  8. Gracias. Actualmente hay otro post con una opción que personalmente me gusta más. En el buscador interno, teclea "navbar" o "navbar escamoteable".

    ResponderEliminar
  9. Hola. He entrado en este post buscando una solución para la navbar de blogger y finalmente he optado por ocultarla del todo.

    No hay problema, sólo es que quería avisarte de que los 2 links que hacen referencia, precisamente, a eliminar la navbar están rotos.

    Un saludo.

    ResponderEliminar
  10. Gracias Chacien. Ya están arreglados los links. ¿Viste el comentario 8? Esa solución es muy elegante si tienes espacio arriba. Saludos.

    ResponderEliminar
  11. Ya había visto el comentario (a estas alturas te habrás dado cuenta de que me fijo bastante en los detalles) e incluso había probado el script solo que como no funcionaba en el Explorer (no funciona el efecto scriptaculous, la barra se vuelve transparente pero sigue habiendo enlaces activos, como se comprueba pasando el puntero por la zona donde debiera estar la barra) y, puesto que la mayoría de usuarios utilizan el Explorer, me dije que para qué.

    No obstante tu comentario me ha hecho recapacitar porque, a fin de cuentas, también hay gente que usa otros navegadores, y además está lo de la nueva función "compartir" y, por añadidura, tengo un fácil acceso al panel de Blogger... Nada, que, en caso de duda, ¿hay algo mejor que seguir las sugerencias de nuestro amigo Oloblogger?

    El haber quitado la Navbar me ha servido para que, siguiendo el ejemplo de Rosa me haya tomado la molestia de diseñar un botón como reconocimiento hacia Blogger (creo que pese a todas las deficiencias y limitaciones debemos estar agradecidos por un servicio gratuito como este; imagínate que lo suprimieran o se volviera de pago), el cual, por supuesto, no voy a quitarlo, aunque sólo sea por el tiempo que me llevó hacerlo y, más aún, por deferencia a los sufridos usuarios del Explorer.

    Hoy me estoy pasando en extensión, perdona, pero aún tengo que decirte que, al ir al post a buscar el código para la Navbar, he podido apreciar que si una nueva visita, alguien que no conozca el aspecto anterior de tu plantilla, lee: "Como podréis comprobar actualmente en este mismo blog, la barra sale..." y acto seguido sube a la cabecera para hacer la comprobación se va a sentir un poco perplejo o chasqueado ¿no te parece?

    Espero que esta última apreciación no te moleste. Saludos y gracias, como siempre.

    ResponderEliminar
  12. Lo de los detalles lo dirás por aquello del puntito ¿no? :D

    No entiendo el problema, porque el efecto SCRIPTACULOUS sí funciona para la barra escamoteable en IE. Haz la prueba con este otro blog, dónde lo tengo instalado y verás que funciona bien. Los enlaces aparecen en cuanto pasas el puntero por encima, pero eso es precisamente lo que se pretende.

    De acuerdo contigo en lo de Blogger aunque todo el mundo lo critique. Y eso me recuerda que además del cambio en la navbar -arreglaré lo del texto- en mi última modificación olvidé poner el logo. Me lo apunto.

    No me molesta que detecteis fallos. Al contrario. A base de detectarlos se eliminan y al final queda todo limpito. Gracias.

    ResponderEliminar
  13. Has dado en el punto, digo... en el clavo. Ya ví el susodicho (o dichoso) punto al expandir el clasificador. No sé si yo podría dormir a gusto hasta no conseguir acabar con él: ¿iba a poder conmigo un mequetrefe como ese? No me hagas caso, es broma, el tiempo es demasiado valioso para desperdiciarlo futilmente.

    Oye, te vas a reír de mi ignorancia, pero ¿por qué no me pones un enlace, aunque sea a la Wikipedia, para que me entere de ese lenguaje tan curioso. ¿No hay un diccionario por ahí? Es que me quedo a dos velas. :D

    Salud.

    ResponderEliminar
  14. ¡Ah!... se me olvidaba. El problema es que en mi blog la Navbar no se ve con el explorer (con IE7 y con IE8 en sendos ordenadores que tengo en casa), está desaparecida, y al pasar el puntero por encima del espacio vacío que debiera ocupar la Navbar, no es que aparezcan los enlaces, lo que aparece es la mano blanca con el índice extendido que te indica (nunca mejor dicho) que ahí hay un enlace, y si haces clic dicho enlace funciona y te lleva al sitio correspondiente, pero el enlace está tan desaparecido visualmente como la totalidad de la Navbar. ¿Me he explicado? Me temo que debe ser un problema exclusivo de mi blog, yo qué sé, alguna configuración, si no lo sabes tú ¿cómo quieres que yo lo sepa? Que me pasan unas cosas mu raras.

    Chao.

    ResponderEliminar
  15. ¿A que lenguaje te refieres Chacien?

    Con respecto a la barra escamoteable, efectivamente debe ser cosa de tu blog, porque ya te mostré cómo sí funciona. Si te conformas con lo que tienes me alegraría, porque no sabría ni por dónde empezar a buscar ese fallo. Lo único, la solución universal: desinstala el truco y vuelve a instalar.

    ResponderEliminar
  16. Por supuesto, estoy contento con lo que tengo y no me voy a privar del gusto de darte una alegría.

    Llamo lenguaje a a ese par de signos (:D) y similares que a veces usas en tus comentarios, entiendo que con la intención de romper la posible ambiguedad de una frase y que entendamos claramente el talante con que fue escrita. Cuando escribes ":D" intuyo, pero no sé exactamente, lo que quieres decir.

    Pero, vaya, si te llevas otra alegría dejándome en la más completa ignorancia, no creo que sea tan importante, ya supongo que no es un insulto, sino que la cosa va de buen rollo. Tu mismo, no quiero cansarte.

    ResponderEliminar
  17. ¡Qué bueno Chacien! Perdona, pero no se me pasó por la cabeza ni de lejos que podía ser eso a lo que referías... Y porque tus comentarios hasta ahora han sido de lo más sensatos sino pensaría que te estabas quedando conmigo.

    Con mucho gusto te paso un enlace... y además es de Wikipedia, como pedías.

    http://es.wikipedia.org/wiki/Emoticono

    Me ha parecido fenomenal esta parte de tu definición: "...con la intención de romper la posible ambigüedad de una frase y que entendamos claramente el talante con que fue escrita..." Y es que personalmente, casi siempre lo hago por eso, para evitar equívocos motivados por la falta de lenguaje no verbal.

    ¡Cada vez me caes mejor!

    ResponderEliminar
  18. Oye, es fenomenal esto de los emoticonos: yo ya lo he utilizado en un comentario que acabo de hacerle a JMiur y me encanta.

    Respecto a tu último comentario, por lo que he podido deducir al cotejar los signos en la Wiki, te estabas partiendo de la risa. Me alegro mucho, porque dicen los expertos que la risa es el mejor remedio contra el stress y hasta he oído decir que alarga la vida.

    Y a mi, cuando he leído eso de que cada vez te caigo mejor, me ha dado un subidón...

    ^_^

    : ' )

    ñ_ñ


    Gracias.

    ResponderEliminar
  19. ¿Sabes, Oloman, que acabo de solucionar el problema en el Explorer con la Navbar?

    Pues resulta que estuve haciendo pruebas y primero coloqué el código de la "NAVBAR QUE APARECE AL PASAR POR ELLA EL RATON", luego probé con scriptaculous, pero, según te dije, como me daba el problema en el Explorer, quité el código y en su lugar puse el propio para ocultarla del todo. Más tarde, a sugerencia tuya, volví a colocar la solución scriptaculous. Y, sí, efectivamente, como sin duda eres un chico perspicaz te habrás dado cuenta que no menciono haber suprimido el primer código. Ese era todo el problema.

    Había colocado el primer código bastante más abajo en la plantilla y por eso no lo veía; el conflicto originado por la duplicidad de códigos producía el curioso efecto que te he descrito en el Explorer y los otros navegadores parece ser que no tenían en cuenta al scriptaculous, pues la aparición era bastante brusca: ahora es que me doy cuenta.

    Un despiste y una torpeza por mi parte :$, pero de todo se aprende, ¿no crees?

    Saludos.

    ResponderEliminar
  20. Je, je. Lo de los display:none; perdidos por el CSS es una de las fuentes más habituales de problemas. El caso es que por lo extraño del resultado, no caí en comentarte nada de eso.

    Bueno, como bien dices, una nueva cosa que ya no se te olvida.

    ResponderEliminar
  21. Hola, Oloman. Va a parecer que he hecho contigo un contrato en exclusividad para publicar comentarios en este post, pero, por alusiones, me parece el lugar más indicado.

    Pues verás, hace poco estaba editando la última entrada que acabo de publicar y, al insertar una imagen en un bloque div y hacer clic sobre ella en la vista previa del viejo editor (con el nuevo salí escaldado), ¿a qué no sabes qué me apareció, un poco más arriba de la foto, a la izquierda? ¿Sí lo sabes?, ¿ya lo has adivinado? Pues sí, el jodido puntito (más bien triangulito) canijo y cabronazo ese que lleva tiempo incordiándote.

    ¿Quieres saber lo que hice? Pues eliminarlo de un plumazo. De pura chiripa, eso es verdad (ya sabes lo de la suerte de los tontos y los principiantes), pero vaya, me quedé como un rey, rebosante de pura satisfacción. Vamos, que a mí no me incordia el canijo ese.

    El remedio, mano de santo, te lo aseguro, fue suprimir el siguiente fragmento del código: style="display:block;"

    Dime algo, a ver si esto, según tienes la plantilla, te vale o no te vale: de veras que me darías un alegrón si me dijeses que esta información te ha sido útil y que por fin, aunque sea una insignificancia, has solucionado esta pijadilla.

    Saludos.

    ResponderEliminar
  22. Pues no amigo, en mi caso no se solucionó quitando el display:block. Gracias pero de verdad, no te preocupes... a mí no me molesta lo más mínimo. ;)

    ResponderEliminar
  23. muchas gracias.. xd pude korregir mi navbar xd.. todavia no puedo kambiarle el tamaño, xd pero bueno alguna forma habra xd sigan asi..

    ResponderEliminar
  24. ¿Te acuerdas del famoso puntillo, Oloman? Tal vez te parezca pesado, ya sé que no le das importancia, pero ahora sí que he descubierto la causa.

    Al cambiar el código de la imagen de mis botones desplegables para adaptarlo a los sprites, me aparecía en todos ellos de forma sistemática el dichoso puntillo y ¿sabes la causa? JMiur dixit: ver solución

    Poniendo display:block en la etiqueta del enlace, en mi caso, todo solucionado.

    Ignoro si ya lo sabías porque en los menús "clasificador" y "cibercafé" no se ve, pero sí en el menú "post al azar".

    ¿A que soy insensible al desaliento? ;)

    ResponderEliminar
  25. Sí que lo eres, sí... Pero gracias a eso he aprendido algo nuevo.

    Todo tiene que ver con elementos inline mezclados con elementos block. Misterio resuelto y puntito eliminado. Gracias Chacien.

    ResponderEliminar