Blogger Random Rotating Picture and Text Banners



Blogger / Blogspot est réputé, non sans raison, pour être moins bien-loti en extensions et widgets en tous genres que WordPress.

Voici un truc splendide qui eût pu trouver sa place dans les Blogger Tricks pour AJB ; mais ça vaut son pesant de cacahuètes et mérite un billet à part.

Je voulais trouver un script pour des séries aléatoires d'images rotatives — vous savez : la photo change aléatoirement à chaque fois que la page est rafraîchie. N'ayant qu'une connaissance très limitée et principalement empirique des langages et codes html / xml / javascript, je suis condamné à m'appuyer sur les travaux existants.

Le souci, c'est qu'on trouve une pelletée de bannières rotatives — où un bout de code vient modifier la bannière / header, vous savez : l'image qui se trouve sous le titre du blog — mais pas de script qui pourrait être mis n'importe où.

Après maintes heures de recherches infructueuses, on tomba exactement sur ce qu'il nous fallait, et même plus, puisqu'il y a même un éditeur de script : ça se trouve chez HTML Basix — a big thanks !

Ça s'installe comme un gadget / widget normal :
Remplir les cases de l'éditeur chez HTML Basix (url de la page, de la photo, texte — à répéter autant de fois qu'on veut, dans la limite de la dizaine),
Sur votre blog, aller dans Mise en page : Éléments de la page : Ajouter un gadget : HTML / Javascript,
Et coller le code.
C'est tout.

Ou presque : ça dépend vraiment de ce que vous voulez faire. Une seule image qui change c'est fait en deux temps trois mouvements — enfin, un poil plus, mais c'est une expression, voyez-vous. En l'occurrence, je voulais une série d'images qui changeraient à chaque passage : il suffit de répéter l'opération — ou mieux : modifier le code obtenu (taille des images, etc.) et une fois la formule désirée obtenue, copier-coller le tout et remplacer uniquement les liens et légendes. Et voilà ce que cela peut donner :


Un code détermine le comportement de chaque emplacement : chacune des huit séries est indépendante, et chaque image est choisie aléatoirement parmi dix.

Tip : si vous voulez restreindre les images à une hauteur ou largeur définie, insérez le nombre de px dans height ou width, et effacez la ligne (width ou height) dont vous n'avez que faire : l'ajustement sera automatique.

Edit : le tip ci-dessus fonctionne à merveille mis à part, comme d'habitude, sur cette idiotie d'Internet Explorer... Je ne comprend vraiment pas pourquoi tant de gens continuent de l'utiliser. Enfin bref, si vous souhaitez que tous les navigateurs puissent afficher le widget, il vous faudra spécifier hauteur et largeur, voire ajouter un bout de code pour centrer / aligner le tout.

Et se peut faire la même chose avec des bannières de texte !

Bon amusement ! ; )

Aucun commentaire: