Intégrer un bandeau/bannière défilant:
avec défilement automatique de vos photos
Cet article présente 3 méthodes de création de bandeau/bannière défilant automatique de vos photos, qui sera situé à la place ou au-dessus du titre de votre blog ou, dans un article ou gadget HTML.
Ils ont présentés par ordre de complexité...
1-BANDEAU-BANNIERE SIMPLIFIEE : via un GIF ANIME
2-BANDEAU-BANNIERE via UN SLIDER CLASSIQUE
3-BANDEAU-BANNIERE AVEC ALTERNANCE DE PETITES IMAGES
1-BANDEAU-BANNIERE SIMPLIFIEE : via un GIF ANIME
1- Principe vous allez insérer un"Gif Animé"dans l'en-tête de votre blog
Un Gif animé ?
Une image GIF peut contenir au maximum 256 couleurs (2, 4, 8, 16, 32, 64, 128 ou 256) parmi 16.7 millions dans sa palette aussi sa palette sera beaucoup plus faible qu'une photo jpg ou png. L'avantage de cette palette limitée en nombre de couleurs (et non limité en couleurs différentes), sera de produire un fichier de taille généralement très faible. De plus on pourra créer un GIF animé qui est simplement un fichier GIF contenant une succession d'images, qui composent l'animation.
2-Vous avez préparer des photos d'exactement la même taille dont les dimensions sont adaptées à votre blog (voir Thème > Personnaliser > Ajuster la largeur afin de connaître les dimensions).
pour un bandeau défilant, éviter ce mettre trop de photos : 3 ou 4 seulement suffisent.
Vous pouvez superposer à vos images le titre de votre blog mais il sera positionné exactement au même endroit sur toutes vos photos, utiliser par exemple, le freeware Photofiltre ou Pixlr très populaire outil en ligne simple et efficace
donc notre bandeau aura 1200 px de large et maximum 200 px de haut
Le plus simple est de le réaliser en ligne.
De nombreux sites le proposent. Il suffit de télécharger vos photos, indiquer la rapidité puis télécharger le fichier.gif
IMPORTANT : Blogger n'aime pas les gifs animés !
- Si vous mettez un gif animé dans le bandeau, Blogger via "Drive" le transformera en image classique png sans animation .
- Même si vous essayez de créer un "png animé", ce qui est possible, cela ne marche pas ( => créer un png animé "apng" ! en ligne : giftopng ou ezgif
- Seule solution : stockez votre gif animé sur une serveur externe Web FTP ( comme Free)
- Si vous mettez un gif animé dans un article, il fonctionnera, voir ci-dessous
4-Afficher votre image
plusieurs possibilités
- soit dans un article de manière classique avec le bouton "Insérer une image"
- soit sous le titre de votre blog en insérant le gif dans un "gadet image" positionné :
- soit dans l'en-tête du blog ( à la place du titre) via:
- RESULTAT
2-BANDEAU-BANNIERE via UN SLIDER CLASSIQUE
Le code utilisé est exactement le même que pour le "slider automatique simple"
1-Vous avez préparé des photos de même taille dont les dimensions sont adaptées à votre blog (voir Thème > Personnaliser > ajuster la largeur afin de connaître les dimensions).
pour un bandeau défilant, éviter ce mettre trop de photos : 3 ou 4 seulement suffisent
donc notre bandeau aura 1200 px de large et maximum 200 px de haut
2-Vous avez stocké vos photos dans un dossier partagé
3 - Vous avez récupéré l'adresse URL de partage de vos photos dans le Bloc-Notes avec l'identifiant
4- Vous avez modifié l'URL avec l'identifiant pour qu'elle soit de type :
https://drive.google.com/uc?id=1r7P0bhRFG22ZJlKbLAdu9oDY5YHJ1S
3-Il suffit de copier/coller le code ci-dessous en mode HTML
dans un gadget HTML positionné dans "la partie "Toutes les colonnes"
<li><img alt="" height="" src="https://drive.google.com/uc?id=1r7P0bhRFCG22ZJlKbLAdu9oDYU5YHJ1S" width="" /></li>
si nécessaire, pour 3 photos supprimer 1 ligne
4-Vous devez indiquer dans le code :
-au début, la taille maxi de vos photos (2 fois ! )
ici
width: 1200px;
height: 200px;
-au milieu rectifier si nécessaire la vitesse de défilement
ici 4000
CODE ici pour 4 photos
RESULTAT : BANNIERE DEFILANTE
3-BANDEAU-BANNIÈRE AVEC ALTERNANCE DE PETITES IMAGES
PRÉPARATION
Vous allez concevoir un bandeau composé de 5 images miniatures différentes qui vont alterner à intervalles réguliers, ainsi 5 images sont remplacées par 5 autres. Cela permet d'en visionner beaucoup plus que si une seule nouvelle miniature était ajoutée.
En cliquant sur une de ces images, on obtient une image agrandie ou on atteint une autre page (du blog ou non) ou rien ne se passe... Ces images peuvent être des liens vers des pages toutes différentes (dans l'exemple ci-dessus, elles sont cependant toutes dirigées vers cette même page).
Vous devez donc préparer 10 images miniatures ayant exactement la même taille, dans cette démo : 200 /150
ainsi,ici, le bandeau fera 5*200 pix = 1000 pixels de large
TUTORIEL : MODIFIER LE CODE
-Indiquer l'URL de vos 10 images
dia8ImageMini[0] = 'URL IMAGE 0';
-Indiquer l'URL des 10 liens sur l'image ( pour ne rien mettre indiquer "#"
dia8Lien[0] = "URL LIEN IMAGE 0";
Utiliser 12 images pour faire un bandeau de 6 images (voir code de la source)
Il faudra
ajouter
-des images :
dia8ImageMini[10] = 'URL IMAGE 10';
dia8ImageMini[11] = 'URL IMAGE 11';
-des liens éventuels
dia8Lien[10] = 'URL LIEN 10
dia8Lien[11] = 'URL LIEN 11;
-l'affichage de 6 images, dernière partie du code, ajouter
<img class="dia8miniatures" id="dia8-6" onclick="dia8appelnumero(6);"/>
Remarques
-Dans l'exemple , toutes les images ont au départ la même hauteur. En ajoutant "width:16%;" (largeur) au début du code et rien concernant la hauteur, la hauteur se réduit automatiquement également à 16 %.
-Si les images de départ ont des hauteurs différentes, on peut ajouter au même endroit (3° ligne du code) une instruction concernant la hauteur : "height:16%;" ou "height:40px;" ...
Source du code ( pour 12 images)
CODE du bandeau ci-dessus (2*5 images)
AFFICHAGE DU BANDEAU
