• ACCUEIL
  • blogger

    BANDEAU - BANNIERE DÉFILANT

    Intégrer un bandeau/bannière défilant:
     avec défilement automatique de vos photos

    Un slider est un module intégré  à un blog ou une page web  qui permet le défilement de plusieurs images ("slides"). Dans Blogger, le slider de type "bannière" se trouvera en haut de la page d’accueil ,  mais il peut aussi être situé  dans un article comme illustration, soit comme moyen de présentation de photos ("diaporama". Il peut être composé de 2, 3, 4 ou plus d’images qui s’affichent les unes après les autres.

     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

    3-Vous aller transformer vos 3 ou 4 photos en une seule photo de type "GIF ANIME"
    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
    avec texte intégré





    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"


      en y indiquant l'URL de vos photos (ici 4 photos)
    <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