• ACCUEIL
  • blogger

    Slider Diaporama 2021

    SLIDER / DIAPORAMA

    Un  slider/diaporama (nommé aussi "carrousel"ou "slider" ou "slideshow" ) est un module intégré à un blog ou une page web qui permet le défilement dynamique de plusieurs images ("slides").. Il  se trouve soit sur la page d’accueil en dessous de la barre du menu ("bannière"), soit dans un article comme illustration ou de présentation de photos ("diaporama". Il peut être composé de 2, 3, 4 ou plus... images qui s’affichent les unes après les autres, soit automatiquement (après un délai fixe), soit manuellement en cliquant sur un bouton.

    Pour afficher un diaporama , il faut avoir du "code HTML..." à intégrer dans le blog en mode HTML. Une recherche sur Internet montre qu'il existe de très nombreux "codes" pour réaliser un slider/diaporama mais quasiment tous nécessitent de modifier le CSS ou Template, ce qui n'est pas aisé à faire dans un blog avec Blogger, surtout pour un non spécialiste....

    Afin d'avoir un code simple à intégrer, nous ne proposerons que du code formant un seul "bloc" s'intégrant en totalité dans un article de blog ou dans un gadget HTML, sans modifier le CSS/Template d'origine du blog. De plus, aucun diaporama utilise la technologie Flash, dépassée et, désormais, non reconnue par les navigateurs. 

    Ce code, à intégrer en mode HTML, est plus ou moins long et complexe à configurer selon son graphisme et ses possibilités techniques. Nous présentons donc les sliders en fonction de leur difficulté de configuration : longueur du code et nombre et difficulté des modifications à réaliser

    Dans cet article, il s'agit de sliders assez perfectionnés

    Toutefois
    il faudra travailler en mode html (copier / coller du code) puis le modifier pour insérer les liens  URL vers vos photos


    A savoir :
    - il existe des logiciels gratuits  (Wov Sider / Hi Slider) pour concevoir facilement des  sliders à mettre en ligne sur un espace web. Ensuite, après la mise en ligne,  ils  permettent aussi, de les intégrer dans un blog, le plus souvent, il faut modifier le code Html du "modèle". Nous pensons que cela a peu d'intérêt puisque le slider est déjà visible en ligne sur le site web, alors pourquoi  avoir 2 possibilités pour les visualiser ?
    -Ici, nous proposons un slider intégré dans l'article du blog : il suffit de lui indiquer où sont stockées en ligne les photos.


    1-PRINCIPE

    -L'idéal : avoir des photos stockées sur un serveur distant, de préférence adaptées au web (taille, résolution, définition). Il est préférable que  les images soient de même taille , même si certains sliders ajustent automatiquement les photos. Dans nos démos perso les fichiers  sont stockées chez Free qui le permet gratuitement, mais il existe d'autres possibilités...

    -cas des photos sur Google Drive En principe, il n'est pas possible d'utiliser des photos  stockées sur "Google Photos ou  sur Drive"  (ou équivalent) car ce stockage ne permet d'obtenir l'URL "classique de la photo  d'origine en "nom.jpg", mais propose une URL de partage   de type
    https://photos.app.goo.gl/p8fKHMk9ENLxAdoP6
    ou
    https://drive.google.com/file/d/1D1rvWaCvv4BMuMCGpW1RLliLFmTVaL38/view?usp=sharing

    Ces URL permettent le partage mais ne sont pas utilisables pour être intégrées dans du code html classique.
    Mais dans l'URL  de partage fourni, se trouve l'identifiant du fichier en /fluo jaune/. Il suffit de le récupérer et de créer une nouvelle URL basée sur :
    https://drive.google.com/uc?id=identifiant
    https://drive.google.com/uc?export=view&id=identifiant 
    https://drive.google.com/uc?export=download&id=identifiant

    =>En principe ces 3 URL fonctionnent
    => pour le faire automatiquement aller sur   https://google-drive-direct-link.blogspot.com/


    -Intégrer en mode html du "code" (un simple copier/coller) dans un article ou dans un gadget "Html".

    -Puis, modifier dans le   code les adresses URL des photos en indiquant  l'adresse de vos photos de type :

    Vous devez retrouver la partie du code  correspondant à l'URL des photos et le changer
    <img src="http://monsite.free.fr/slider1/1.jpg" />

    dans ce code, il faudra remplacer l' URL en rouge par l'URL de vos images ...

    -Éventuellement,  ajuster quelques valeurs pour configurer le diaporama : le plus souvent la taille du slider en fonction de celle des photos et la vitesse de déroulement


    2-CREER VOS SLIDERS

    Nous proposons dans cet article  6 beaux Sliders assez  simples  à utiliser:
    - uniquement les adresses  URL des photos  à indiquer dans le code
    - Rien à changer dans le "modèle"  ou   template du blog.

    Nota : si cela vous semble trop complexe, nous proposons aussi des sliders plus simples dans l'aspect  et aussi dans la configuration :
    -Les code des sliders  sont  uniquement disponibles sur le site du  concepteurhttps://project.dimpost.com/ & https://bloggerslider.dascodes.com/  que nous remercions de le mettre à disposition.

    -Nous proposons 6 exemples  en "démo" réalisés avec les mêmes photos ( Photos retaillées en 800/600 maxi et vignettes en 200/150) . Nota, les photos peuvent être de taille différente mais  nous le déconseillons car le résultat peut être décevant (testez !). Seule la dimension du slider  a  parfois  été modifiée dans le code pour la taille des photos en 800/600


    2-1 PREAMBULE :
    Vos photos doivent être déjà être stockées  sur un serveur distant :
    -toutes de même taille  (c'est plus joli) et adaptées au web
    -si possible utiliser des noms courts et simples pour vos photos (pas d'accent, ni majuscules, ni symboles...), de même pour le nom du dossier .
    Ex : les photos, nommées "1.jpg"... "2.jpg"..., sont situées dans un dossier nommé "slider1" à la racine du serveur.
    -vous connaissez donc  l'adresse de vos photos de type (chez Free) :
    <img src="http://monsite.free.fr/slider1/1.jpg" />

    2-2 MODIFICATIONS DU CODE
    -Vous avez uniquement l'adresse URL de vos photos  à indiquer  après : <img src="......"/>

    <img src="http://monsite.free.fr/slider1/1.jpg" />

    -Eventuellement Indiquer ou non un titre via la balise :  title=Mont saint Michel "

    -Parfois,  ajuster quelques valeurs pour configurer le diaporama : le plus souvent la taille du slider en fonction de celle des photos et la vitesse d'affichage des photos

    -A vous de faire des test faire des tests

    -A savoir : si  à l'Enregistrement Blogger affiche ce message
    Cliquer sur IGNORER
    et refaire "Enregistrer" : Blogger acceptera l'enregistrement


    2-3 OBTENIR LE CODE

    Uniquement disponible sur le site et le blog  du créateur  (protégé  par le droit d'auteur):
    https://project.dimpost.com/
    & https://bloggerslider.dascodes.com/
    Les auteurs ont le plus souvent adopté le code  qui vient à l'origine d'un autre site comme  flexslider.woothemes.comsmashingmagazine,  menucool.com dev7studios.com/nivo-slider/

    Pour obtenir le code cliquer sur le titre du slider

    "Slider élégant e qui utilise simplement du CSS3 pur. Aucun Javascript ou jQuery n'est utilisé. Donc, ce slider est  facile à personnaliser pour les débutants. Ce slider est créé par smashingmagazine. Ici, c'est une version adaptée pour Blogger "

    => Cliquer pour voir notre DEMO de ce pur CSS3 Image Slider pour Blogspot (Cycle Style)
    Slider élégant qui utilise uniquement du CSS3 pur. Les photos glissent de haut en bas.  Aucun Javascript ou jQuery n'est utilisé. Donc, ce slider est plus facile à personnaliser pour les débutants, en langage HTML de base et de peu de connaissances en CSS3.

                                              nota: Taille modifiée en 800/600 dans le code




    • Add JavaScript Image Slider to Blogger Easily:
      "Voici un slider en JavaScript sympa pour les blogueurs. Ce  slider est créé par menucool.com . . Il a un effet de glissement assez agréable, et un temps de chargement moins long qu'avec du  Javascript, pas de jQuery ou de flash utilisé. De plus, il est facilement personnalisable. Ici, il est adaptée pour Blogger."
    => Cliquer  pour notre DEMO du JavaScript Image Slider
    très bel effet de glissement avec des divers effets avec  un temps de chargement réduit, créé par Javascript, sans utilisation de jQuery ou de flash. De plus, il est facilement personnalisable.
    nota: Taille modifiée en 800/600 dans le code


    • Nivo Slider - jQuery Image Slider For Blogger
      "Ce slider conçu pour un blog Blogger / BlogSpot est génial et magnifique. Il est fait avec jQuery. et bien sûr HTML et CSS, mais le principal effet de glissement est fait avec jQuery. Ce slider est créé par dev7studios.com/nivo-slider/. qui ont vraiment fait un excellent travail. Ce slider a été téléchargé plus de 20,00000 fois depuis leur site. Nous avons créé une version Blogger du slider "
    => Cliquer pour voir  notre DEMO  du Nivo Slider - jQuery Image Slider pour Blogger
     Slider avec divers  effets glissant des images 
      nota: Taille modifiée en 800/600 dans le code



    "Ce slider jQuery avec vignettes' créé par  a été personnalisé pour le rendre convivial pour les blogueurs dans le respect de wowslider."

    => Cliquer pour voir notre Démo  de "jquery Image Slider Wov slider 




    • FlexSlider Basic Image Slider Widget for Blogger
      "Il s'agit d'un  slider jQuery réactif, simple mais étonnant, développé par woothemes.com. Il a quelques fonctionnalités vraiment intéressantes,  la caractéristique la plus intéressante est qu'il est extrêmement réactif et léger; vous n'avez pas à régler largeur / hauteur des curseurs, même la largeur et la hauteur des images  car tout s'ajuste t automatiquement. Ici, il est personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog blogger."
    A savoir pour le code :
    -hauteur et largeur des photos sont automatiquement ajustées
    -Remplacer l'URL en rouge par l'URL de vos images 
    -Autres possibilités de modification en gris
    controlNav: true,
    directionNav: true,
     easing:
    easing: "swing",
     slideshowSpeed: 
     slideshowSpeed: 3000,
    animationSpeed:
    animationSpeed: 600,


    => cliquer  pour voir notre DEMO du FlexSlider Basic Image Slider Widget pour Blogger
    Slider réactif : vous n'avez pas à vous inquiéter de la largeur / hauteur des photos, qui sont ajustées automatiquement . Les photos glissent latéralement.  Ici, il est personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog.




    • jQuery Carousel Slider for Blogger (FlexSlider) 
      "Il s'agit d'un slider  carrousel jQuery réactif  développé par flexslider.woothemes.com. Il a des fonctionnalités vraiment intéressantes, la fonctionnalité la plus intéressante est qu'il est entièrement réactif; vous n'avez pas à vous régler largeur / hauteur des curseurs et des images qui  sont réglables automatiquement. Vous pouvez également définir le nombre minimum / maximum d'images à afficher selon la taille  écran / navigateur. Donc dans l'ensemble, c'est un très beau slider  carrousel, personnalisé pour blogger / blogspot afin que vous puissiez simplement copier et coller le code à installer sur votre blog blogger."
      A savoir :
      -Hauteur et largeur s'ajustent automatiquement
      -Remplacer l'URL en rouge par l'URL de vos images
      -autres modifications possibles :
      animationLoop: false,
       itemWidth: 210,
       itemMargin: 0,
       minItems: 1,
       maxItems: 4

    => Cliquer  pour voir notre DEMO  du jQuery Carousel Slider pour Blogger (FlexSlider)
    Ce  mini Slider s'adapte a vos photos, vous n'avez pas à vous inquiéter de la largeur / hauteur ajustables automatiquement. Vous pouvez également définir le nombre minimum / maximum d'images à afficher. Il fait uniquement et simplement défiler vos photos



    "Voici un autre slider  curseur d'image génial pour blogspot. Il s'agit d'un slider jQuery avec vignette' créé par wowslider.com . Nois l'avons  personnalisé pour le rendre convivial pour les blogueurs dans le respect de wowslider." 
    => Cliquer pour voir notre DEMO du  wow slider  avec vignettes (Thumbnails)
     Slider  fonctionne avec affichage de vignettes.

    Ici  il semble impossible de modifier la taille du slider, côté vignette?Pour résoudre ce problème afficher des photos de taille plus petite





    4- AUTRES SLIDER

    https://imageslidermaker.com/
    Vous concevez vous même votre slider en choisissant les divers  élèments ou blocs  qui vont le composer, puisle code est prêt


    souvent, il faudra modifier le CSS...
    https://taunieverett.com/image-slider-bloger/
    https://georgialoustudios.zendesk.com/hc/en-us/articles/115007212627-Slider-setup-Anaise-Blogger-