Afficher les liens dans une belle animation Flash

Le widget Libellés en nuage de mots clés avec animation Flash a eu beaucoup de succès (+300 commentaires) j'ai donc pensé à publier cette petit astuce qui permet d'afficher vos propre liens (et non pas les libellés) dans une jolie animation Flash, démonstration :

Quelques infos sur le widget

- Le widget est complatibe avec tous les navigateurs (y compris le vieux Internet explorer), essayer de cliquez sur les liens dans cette page pour vous en convaincre.
- Coté référencement, les liens (balises A) sont reconnues par les moteur de recherche donc aucune inquiétude a avoir de ce coté.
- Comme vous pouvez le voir dans la démonstration, le widget accépte les mots accentué et vous pouvez utilisez des mots de n'importe quelle longueur.
- Pour rappel, ce widget est basé sur le Plugin Wordpress : Cumulus, créer par Roy Tank et adapté pour Blogger par Amanda Fazani. Le plu-gin wordpress marche aussi dans Blogger.
L'idée d'afficher n'importe des liens (et non pas uniquement les libellés) est mienne !
- Comme pour le nuage des libellés, ce widget affiche tous les liens moins un !

Installation

Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier-coller le code suivant :
        <embed allowscriptaccess="always" bgcolor="#ffffff" flashvars="tcolor=0x842DCE&amp;mode=tags&amp;distr=true&amp;tspeed=200&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://www.leblogger.com' style='20'&gt;Le Blogger&lt;/a&gt;
&lt;a href='http://www.leblogger.com' style='20'&gt;Blogspot&lt;/a&gt;
&lt;/tags&gt;" height="400" id="tagcloud" name="tagcloud" quality="high" src="http://blogspot.leblogger.com/divers/tagcloud00.swf" type="application/x-shockwave-flash" width="400"><a style="display:none;" href="http://www.leblogger.com/2009/06/widget-gadget-blogger.html">Widget</a><a style="display:none;" href="http://www.leblogger.com">Le Blogger</a></embed>

Personnalisation

  • Modifiez le texte en bleu par vos liens.
  • Multipliez le code entre &lt;a et /a&gt; autant de fois que vous voulez qu'il y est de liens en rotation dans le widget.
  • Personnalisation de l'affichage:
    • bgcolor="#ffffff" : couleur de l'arrière plan du widget.
    • color=0x842DCE : Couleur des liens.
    • tspeed=200 : Vitesse de rotation des liens.
    • style='20' : Taille de chaque lien.
    • width="400" et height="400" : Largeur et hauteur du widget.
 Qu'est ce que vous pensez de ce widget ? Cool ou inutile ? Pensez-vous l'utiliser ? n'hésitez pas à en discuter dans les commentaires.
Libellés : Publié le dimanche, avril 18, 2010
53 Commentaires
  1. tu voudrais pas partager le code de ta barre partager un article et les nouveautés ?

    elle me fait de l'oeil mais je suis pas doué avec le code :(

    RépondreSupprimer
  2. Bonjour, sympa ce gadget! (commentaire pour le " grand jeu blogger ")

    RépondreSupprimer
  3. @Fox
    Pourquoi pas dans un prochain tuto :)
    Sinon pour les code des boutons c'est déjà fait: regard Google Buzz, Tosy et réseaux sociaux ...

    RépondreSupprimer
  4. @tutorielblogger
    Merci pour le commentaire, et hop 4 points ...

    RépondreSupprimer
  5. merci j'ai rien a dire vous commenc.. a nous surpr??.. merci??viva

    RépondreSupprimer
  6. Bonjour, j'ai pour ma part beaucoup de mal à maitriser cet outil. Ici il est relativement gros donc il reste maniable. Quand il est en miniature, sur un bord de page, je le trouve inutilisable. Je deviens trop vieux je ne suis plus assez rapide pour cliquer au bon moment x(

    RépondreSupprimer
  7. Bonjour
    J'ai oublié de vous le dire hier, j'ai aussi cité votre article sur le grand jeu blogger à cette adresse : http://tutorielblogger.blogspot.com/2010/02/ajouter-un-formulaire-de-contact.html
    Bonne journée!

    RépondreSupprimer
  8. @Ljz
    essai de modifier la largeur mais pas la hauteur et ça deviendra beaucoup plus visible ... Quand tu positionne la sourie au milieu les liens s'arrêtent de tourner ....

    RépondreSupprimer
  9. Super article et congratz @tutorielblogger !
    Gros hors sujet de ma part, quand je suis dans la partie mise en page de mon blog, et que j'essaye de changer de place mes modules html, ca bug complet, ca me les déplaces 4 places au dessus un peu n'importe ou... C'est un bug dans le code html du template ?

    RépondreSupprimer
  10. oui j'ai déjà les tutos mais j'arrive pas à faire un peu le même design :/

    RépondreSupprimer
  11. @ FOx!
    Ok je vais publier ça bientôt :)

    RépondreSupprimer
  12. @SimEFP
    J'ai eu le même bug, peut être que c'est Blogger qui bug, je regarderais ça en détaille ...
    Sinon pour déplacer les widget, faut allez dans Modifier le code HTML et déplacer le code des widgets b-(

    RépondreSupprimer
  13. bonjour Soufiane,

    Est-ce normal si j'ai un fond blanc?

    MZE

    RépondreSupprimer
  14. Oui, tu peux choisir la couleur que tu veux !

    RépondreSupprimer
  15. Bonjour Soufiane,
    Ce widget est intéressant et je me demande s'il serait possible d'ouvrir les liens dans un nouvel onglet en rajoutant l'incontournable (!)
    target="_blank"
    Après quelques tentatives... je n'arrive pas à le placer !
    Avez vous une idée ?
    Merci
    Laurent

    RépondreSupprimer
  16. @Cascales
    J'ai pas essayé mais ça devrait marché si tu l'ajoute après le &lt;a ;)

    RépondreSupprimer
  17. Re: bonjour Soufiane ,
    Le widget qui permet d'afficher des liens dans une animation Flash, ne fonctionne plus chez moi... ni dans votre démonstration, savez-vous pourquoi ?
    Dans l'attente de vous lire, je vous souhaite une bonne journée
    Laurent
    http://www.ctp-architectes.com/

    RépondreSupprimer
  18. Ne marche pas non plus chez moi !!! :(

    RépondreSupprimer
  19. merci Sofiane, je vais essayer ça dès que possible...
    @++

    RépondreSupprimer
  20. merci Soufiane pour ce beau tuto ! par contre, si je ne me trompe pas, la mise à jour pour l'autre widget nuage de tags ("pour que le nuage s'affiche de nouveau sur votre blog, vous devez remplacer dans votre ancien code http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf par http://www.mdn.fm/files/86024_cjbek/tagcloud.swf") est aussi valable pour ce nuage de tags non ? car avec le lien swf "halotemplate" ça ne fonctionnait pas chez moi, et avec le "mdn" oui...

    et sinon, parce que j'en demande toujours plus, penses tu que ce genre de nuage serait possible aussi avec des....images ?!! je viens d'essayer en ajoutant les traditionnels [img src...] mais ça n'a pas l'air de fonctionner...!

    RépondreSupprimer
  21. @Fred
    Oui exactement ça et oui, il y a version Wordpress de Cumulus qui utilise des images au lieu des liens texte, je vais voir si ça marche dans Blogger :))

    RépondreSupprimer
  22. @Cascales
    @Jabamiah
    Un problème de bande passante qui est résolu maintenant :))

    RépondreSupprimer
  23. Super ! Merci beaucoup ! ;)

    RépondreSupprimer
  24. Je ne comprend pas. Il n'y a que 2 liens qui s'affichent dans le nuage... J'ai pourtant fait et copié tout ce qui est montré. J'aimerais que d'autres liens s'affichent... SVP :(

    RépondreSupprimer
  25. @Djief
    Il multiplier la ligne a href='http://www.leblogger.com' style='20'>Le Blogger</a autant de fois que tu veux de liens

    RépondreSupprimer
  26. Soufiane,
    A propos du - target="_blank" - En suivant ta réponse, je n'ai pas réussi à mettre le lien dans un nouvel onglet.
    >>> ... <a target="_blank"
    Qu'en penses-tu ?
    Bonne journée, Laurent

    RépondreSupprimer
  27. bonjour , j'ai également le même problème que Cascales
    HELP !!!!!!!!!

    RépondreSupprimer
  28. En mettant target='_blank' juste aprés l'url et avant 'style ça marche pour moi.

    RépondreSupprimer
  29. Merci, fonctionne parfaitement !
    contrairement au nuage de libellés flash

    http://autrefois-la-lumiere-industrielle.blogspot.com/

    RépondreSupprimer
  30. possible mettre ce nuage dans un site autre que une blog, j ai aussi un forum chez xooit, je voudrai mettre ce nuage superbe dedans.

    Merci de m aider... suis novice !

    alliancepokerpass@gmail.com

    RépondreSupprimer
  31. Bonsoir mon rpoblème est tout et cela concerne la personnalisation>> j'ai mis en noir le fond d'écran mais comment changer la couleur de pointage qui est aussi noir ? Quel code rajouter ?
    Merci d'avance, tu fais un super boulot soufiane, continue comme ça !

    la page en question

    http://essaihu.blogspot.com/p/liens-utiles.html

    RépondreSupprimer
  32. impec merci
    facile a modifier et a placer dans une page html d'un site web

    RépondreSupprimer
  33. impec merci/2
    comment avoir le fond transparent?

    RépondreSupprimer
  34. ah j'ai trouvé, dans dreamweaver, selectionnet le module flash et
    rajouter un parametre du nom "wmode" et valeur "transparent" sans les guillemets

    RépondreSupprimer
  35. <object data="http://blogspot.leblogger.com/divers/tagcloud00.swf" width="600" height="400" allowscriptaccess="always" bgcolor="#000000" flashvars=
    "tcolor=0x000066&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

    <a href='http://xxx.swf' style='20'>xxx 4</a>
    <a href='http://yyyswf' style='20'>yyy</a>

    RépondreSupprimer
  36. zut je n'ai su copier mon code en entier sorry

    RépondreSupprimer
  37. mais je n'emploie pas la balise embed mais object

    RépondreSupprimer
  38. supercool merci
    comment y mettre des liens en langue arabe ? merci a vous

    RépondreSupprimer
  39. Bonjour à tous,

    Je me suis servi de ce tutorial pour créer mon propre nuage de tag à l'adresse suivant: http://cheerz-time.blogspot.com/
    Cependant lorsque je cherche à réduire la taille de la police, la couleur des liens changent. Comment en t-il possible de remédier à ça ou est-il possible de choisir les couleurs ?

    Merci à vous

    RépondreSupprimer
  40. Bonjour,

    Merci, ça marche parfaitement. Petite question comment faire pour affilier plusieurs liens à 1 mot ? Je ne sais pas si ma question est claire... (Je n'y connais rien html...)
    Merci d'avance

    RépondreSupprimer
  41. comment on fait pour changer la couleur du fond ( j'aimerais du transparent)

    RépondreSupprimer
  42. comment on fait pour changer la couleur du fond ( j'aimerais du transparent)

    RépondreSupprimer
  43. Bonsoir,
    J'ai réussi à insérer le gadget en le personnalisant. Il tourne bien mais j'ai constaté que pour quelques libellés le lien ne fonctionne pas. Dans le code, il s'agit notamment par exemple des lettres accentuées, espaces et majuscules... Je débute passionnément avec le HTML... Lol
    Si vous pouviez m'indiquer ou trouver la solution, merci par avance. Je continue de chercher de mon côté et je vous tiens au courant.

    RépondreSupprimer
  44. Bizarre !
    je ne vois pas ton animation Soufiane (j'utilise Firefox 19.0.2)... uniquement la bordure d'un cadre blanc quand je clique dessus.
    Sinon pour obtenir un fond transparent dans un gadget, il faut insérer le code wmode="transparent"
    Cordialement

    RépondreSupprimer
  45. Bonjour,
    Très intéressant, j'ai réussi à insérer un nuage de tags
    Cependant, comment mettre plusieurs couleurs et tailles de police ??
    D'avance un grand merci
    Solène
    Lamétamorphosedubalcon

    RépondreSupprimer
  46. le script fonctionne à merveille mais je ne parviens pas a insérer plusieurs mot clé SVP aidez moi

    RépondreSupprimer
  47. vraiment sympa ce widget, merci pour l'astuce

    RépondreSupprimer
  48. Bonjour Souffiane,
    Vraiment au top ce gadget, depuis le temps que je cherchais un tag cloud dynamique,
    Un grand merci,
    Bien cordialement à toi !

    RépondreSupprimer
  49. Je n'arrive pas à le rendre transparent.
    Quelle est la modification à faire SVP ?

    RépondreSupprimer
  50. Super et merci, mis en place sur mon site consacré au Tourist Trophy "http://journeyfortt.blogspot.fr/"

    Bel effet

    RépondreSupprimer

Copyright 2015 Soufiane.fr