Jouer à cache-cache avec la navbar blogger

By
Advertisement


Salut,

C'est encore Mister Air. Je suis tombé sur un blog sous Blogger (Beaucoup d'images sur pas grand chose) qui a la particularité d'avoir une navbar ne s'affichant que lorsque le pointeur passe devant.

J'ai demandé au blogmaster le code, qu'il s'est empressé de me donner, et je pense que cette astuce peut intéresser les lecteurs de ce blog.

Contrairement à un hack publié sur ce blog au mois de juin 2007(Cacher la barre de navigation sur Blogger), il suffit juste de copier une portion de CSS à la fin de celui de son blog et le tour et joué!!

Voici le code:

/* Navbar
------------------------------
----------------- */
#navbar { height:3px; z-index:4; }
#navbar:hover { height:28px; }
#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) }
#navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100) }


Vous pouvez voir ce que cela donne sur mon blog test.

A+ :)

Mister aiR,

blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!




19 commentaires:

  1. Tu aurais pu faire un petit effort un faire un peu de "broderie" autour du mail ;)

    Sinon, mieux vaut publier l'adresse du site en question plutôt que celle de mon blog test (histoire de remercier aussi le gentil blogger qui m'a fillé ce code)
    L'adresse: http://www.beaucoupdimages.com .

    RépondreSupprimer
  2. Bonjour, pourrais-tu préciser où il faut placer ce code?
    Merci d'avance!

    RépondreSupprimer
  3. @ Une Russe à Paris : Pour l'endroit où mettre le code, vois l'article cité au 3ème paragraphe (cacher la barre de navigation blogger).

    RépondreSupprimer
  4. 2 choses :

    1. ce n'est pas dit, mais ruse css valable que pour Firefox, IE ne connaissant pas le :hover autre que pour une balise <a>(sauf en utilisant un htc), et Opera n'en veut pas non plus apparemment :/

    2. Y a un truc assez gênant, dès que la navbar s'affiche elle décale tout le site. Suffit de mettre une propriété "position" à "absolute", et aussi de mettre l'opacité à 60% pour qu'une fois affichée, elle laisse entrevoir le design derrière.

    Le code que je propose est donc celui-ci:

    /* Navbar ------------- */
    #navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:absolute;}
    #navbar-iframe:hover{height:28px;opacity:0.6; filter:alpha(Opacity=60, FinishedOpacity=60) }

    RépondreSupprimer
  5. Comme tout le monde j'ai copier/coller trop vite, y a pas besoin du "FinishedOpacity" non plus, ça sert à rien et en plus c'est "FinishOpacity".
    En démo sur mon blog.

    RépondreSupprimer
  6. @ian c'est très élégant, je l'ai adopté ! merci !

    RépondreSupprimer
  7. Merci, ton astuce marche tres bien :)

    RépondreSupprimer
  8. Et encore merci !
    Que d'astuces intéressantes sur la blogosphère ...

    RépondreSupprimer
  9. Bah moi ca marche pas. Je copie et colle tout en bas de mon html et message d'erreur. J'ai supprime les cookies, j'ai insere plus haut dans le html, j'ai ajoute des guillemets avant/apres, rien n'y fait. Une solution pour moi ?!?!? Merci

    RépondreSupprimer
  10. @ Agnes : insère avant

    /* Variable definitions

    RépondreSupprimer
  11. ca marche pas non plus mais merci.

    RépondreSupprimer
  12. Fonctionne pas.
    Par contre celle proposée par IAN fonctionne à merveille je me permet de la re-poster:

    /* Navbar ------------- */
    #navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:absolute;}
    #navbar-iframe:hover{height:28px;opacity:0.6; filter:alpha(Opacity=60, FinishedOpacity=60) }

    J'ajoute que pour ceux voulant régler le niveau de transparence il suffit de jouer sur la valeur de " opacity:0.6 " moi j'ai mis 0.8, c'est plus lisible.

    Voila bon courage à tous et merci encore

    RépondreSupprimer
  13. Lorsqu'on met un flash dans la bannière la navbar se retrouve derrière, puis-je la remettre au premier plan?

    RépondreSupprimer
  14. Pour ceux ayant une bannière en flash, vous avez surement remarquer que la barre tombe derrière votre swf, voici l'alternative que je propose:

    /* Navbar ------------- */
    #navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:relative;}
    #navbar-iframe:hover{height:28px;z-index:99;opacity:0.6; filter:alpha(Opacity=60) ;position:relative;}

    Des jours de recherche pour trouver ça, mon Dieu quelle vie :D

    RépondreSupprimer
  15. Bonjour,
    merci pour toutes ces astuces précieuses,

    par contre en mettant le code a la fin du code html de mon blog ou en le mettant ailleurs sa ne marche pas, soit je ne peux pas enregistrer soit il affiche le code qui est visible par tout le mode,

    pouvez vous me renseigner, car j'en ai mare de la navbar

    yogi

    RépondreSupprimer
  16. Merci beaucoup!! ça marche parfait!

    RépondreSupprimer
  17. Le code de Ian marche à la perfection ! Voir sur mon blog : http://chateaux-de-belgique.blogspot.com/

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT