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 :
- 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 etadapté 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 !
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
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&mode=tags&distr=true&tspeed=200&tagcloud=<tags>
<a href='http://www.leblogger.com' style='20'>Le Blogger</a>
<a href='http://www.leblogger.com' style='20'>Blogspot</a>
</tags>" 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 <a et /a> 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.
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 :(
Bonjour, sympa ce gadget! (commentaire pour le " grand jeu blogger ")
@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 ...
@tutorielblogger
Merci pour le commentaire, et hop 4 points ...
merci j'ai rien a dire vous commenc.. a nous surpr??.. merci??viva
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(
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!
@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 ....
@soufian
=)(
@Tutorielblogger
Tu as gagné :D
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 ?
oui j'ai déjà les tutos mais j'arrive pas à faire un peu le même design :/
@ FOx!
Ok je vais publier ça bientôt :)
@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-(
bonjour Soufiane,
Est-ce normal si j'ai un fond blanc?
MZE
Oui, tu peux choisir la couleur que tu veux !
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
@Cascales
J'ai pas essayé mais ça devrait marché si tu l'ajoute après le <a ;)
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/
Ne marche pas non plus chez moi !!! :(
merci Sofiane, je vais essayer ça dès que possible...
@++
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...!
@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 :))
@Cascales
@Jabamiah
Un problème de bande passante qui est résolu maintenant :))
Super ! Merci beaucoup ! ;)
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 :(
@Djief
Il multiplier la ligne a href='http://www.leblogger.com' style='20'>Le Blogger</a autant de fois que tu veux de liens
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
bonjour , j'ai également le même problème que Cascales
HELP !!!!!!!!!
En mettant target='_blank' juste aprés l'url et avant 'style ça marche pour moi.
merci
Merci, fonctionne parfaitement !
contrairement au nuage de libellés flash
http://autrefois-la-lumiere-industrielle.blogspot.com/
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
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
impec merci
facile a modifier et a placer dans une page html d'un site web
impec merci/2
comment avoir le fond transparent?
ah j'ai trouvé, dans dreamweaver, selectionnet le module flash et
rajouter un parametre du nom "wmode" et valeur "transparent" sans les guillemets
<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>
zut je n'ai su copier mon code en entier sorry
mais je n'emploie pas la balise embed mais object
supercool merci
comment y mettre des liens en langue arabe ? merci a vous