Comment ajouter un diaporama éblouissant à la page d'accueil de Blogger

Dans ce tutoriel, on va voir comment installer un diaporama ou slideshow à la page d'accueil de votre blog. Ce sublime diaporama Owl Carousel est doté

Comment ajouter un diaporama ou slideshow éblouissant dans Blogger

Dans le tutoriel d'aujourd'hui, on va voir comment installer un diaporama ou slideshow à la page d'accueil de votre blog Blogger. Il s'agit d'un sublime diaporama Owl Carousel doté de plusieurs atouts :

  • Le slideshow s'exécutera automatiquement et les slides défileront à un intervalle de temps prédéfini
  • Le balayage manuel est possible à l'aide des flèches de navigation
  • Le diaporama est entièrement responsive et s'adaptera à tous les supports (tablettes, smartphones, ordinateurs)
  • La navigation est très fluide et le design est très accrocheur, ce qui donnera à votre blog une apparence plus professionnelle.

Si vous souhaitez plutôt créer un diaporama d'images à l'intérieur d'un article de votre blog, suivez ces instructions.

Notez bien : contentez-vous d'afficher votre diaporama dans une seule page de votre blog par exemple la page d'accueil et évitez de l’afficher dans la page des articles puisque le chargement du contenu du diaporama (images) peut ralentir son affichage.

    Comment ajouter un diaporama éblouissant dans Blogger - slideshow Owl Carousel
     

    Prérequis avant l'installation du diaporama

    Vérifier la version de la bibliothèque jQuery

    La première étape consiste à vérifier la version de la bibliothèque jQuery utilisée dans votre thème Blogger. Pour ce faire, il faudra accéder au code HTML de votre thème.

    Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.

    1. Cliquez sur "Thème"> "Modifier le code HTML"

    2. Une boite contenant le code HTML de votre thème s'affichera

    3. Cliquez n'importe où à l'intérieur du code HTML 

    4. Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à droite. Dans la barre de recherche, saisissez jquery.js ou jquery.min.js. Vous allez probablement trouver un code qui ressemble à ceci :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    1.11.0 Ce chiffre correspond à la version jQuery utilisée dans votre thème. Si les chiffres commencent par 1 ou 2, cela veut dire que vous utilisez une ancienne version de la bibliothèque jQuery. Pour que le diaporama fonctionne correctement, il est nécessaire d'installer une bibliothèque plus récente, à savoir la version 3.1.1 dont le code est le suivant :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    5. Par conséquent, remplacez l'ancienne version par la nouvelle version 3.1.1.

    Notez bien : Si vous ne trouvez aucun code jQuery dans votre thème, passez à la prochaine étape, car on va ajouter la bibliothèque jQuery plus tard.

    La bibliothèque d'icônes Font Awesome

    Le slideshow utilise également des icônes "Font Awesome", donc on va vérifier si la bibliothèque est bien installée dans notre thème, sinon il faudra l'ajouter.

    1. Cherchez d'abord maxcdn.bootstrapcdn dans la barre de recherche. Si vous trouvez le code suivant, passez à la prochaine étape :

    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

    2. Sinon, ajoutez le code JavaScript qui suit au-dessus de la balise </head>

    <script type='text/javascript'>
    //<![CDATA[
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    //]]>
    </script>

    Personnaliser le diaporama en insérant des éléments de style CSS

    Ajoutez le code CSS au-dessus de la balise </head>

    <style id='owl-carousel' type='text/css'>
    *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto}
    #featured-slider h2.title,#featured_slider .widget h2.title{display:none}
    #featured_slider{margin:0 0 30px}
    .slider-wrappper{max-width:970px;margin:0 auto;padding:0;overflow: hidden}
    .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
    .slider-item{position:relative;height:100%}
    .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1}
    a.slider-image{height:100%}
    .thumb.overlay{height:200px}
    .post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s}
    .slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)}
    .slider-wrapp .post-inner{padding:0 40px;margin:auto}
    .slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .slider-item h2.post-title a{color:#000;transition:all .3s}
    .slider-item h2.post-title a:hover{color:#aaa}
    .slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
    .slider-item .post-tag a{display:inline-block;background:#2c82c9;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
    .slider-item .post-tag a:hover{background:#2cc990;color:#fff}
    .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff}
    .featured-posts{display:inline-block;width:100%}
    .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0}
    .feature-item:last-child{margin:0}
    .feature-item .thumb.overlay{height:150px;width:100%;position:static}
    .feature-item .thumb.overlay a.slider-image{}
    .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s}
    .feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden}
    .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)}
    .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400}
    .feature-item h2.post-title a{color:#000}
    .feature-item:hover h2.post-title a{color:#aaa}
    .feature-item .post-meta{margin:0}
    .feature-item .post-tag a{display:inline-block;background:#2c82c9;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
    .feature-item .post-tag a:hover{background:#000;color:#fff}
    .feat-home{height:320px;margin:0 0 50px;position:relative}
    .feat-home:before,.slider-item:before{content:&quot;&quot;;right:0}
    .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1}
    .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
    .owl-carousel{display:none;width:100%;z-index:1}
    .owl-carousel .
    {position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
    .owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
    .owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)}
    .owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
    .owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
    .owl-carousel .owl-item img{display:block;width:100%}
    .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
    .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
    .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .owl-carousel.owl-loading{opacity:0;display:block}
    .owl-carousel.owl-hidden{opacity:0}
    .owl-carousel.owl-refresh .owl-item{visibility:hidden}
    .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .owl-carousel.owl-grab{cursor:move;cursor:grab}
    .owl-carousel.owl-rtl{direction:rtl}
    .owl-carousel.owl-rtl .owl-item{float:right}
    .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
    .owl-carousel .owl-animated-in{z-index:0}
    .owl-carousel .owl-animated-out{z-index:1}
    .owl-carousel .fadeOut{animation-name:fadeOut}
    .owl-height{transition:height .5s ease-in-out}
    .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
    .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
    .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
    .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
    .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
    .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
    .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
    .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
    .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
    .owl-theme .owl-nav{margin-top:10px}
    .owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
    .owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
    .owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
    .owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
    .owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
    .owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
    .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
    .owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
    .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}
    .owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s}
    
    .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
    .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
    #HTML33 .widget-content{overflow:visible}
    @keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
    @media screen and (max-width: 768px){
    .feature-item{width:50%;margin:0 auto 15px auto}}
    @media screen and (max-width: 640px){
    .owl-prev,.owl-next{top:18%}
    .owl-carousel .owl-item{height:auto}
    .post-descript{padding:15px 10px;left:5%;right:5%}
    .slider-wrapp .post-inner{padding:0 10px}
    .slider-item h2.post-title{font-size:16px}
    .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
    @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
    </style> 

    Installer les paramètres de fonctionnement du slideshow

    Les codes qui vont suivre seront insérés juste après les codes CSS de la section précédente c'est-à-dire juste avant la balise </head> 

    Pour les personnes qui n'ont pas trouvé le code jQuery, c'est à cette étape qu'il faudra l'ajouter au-dessus de la balise </head>.

    Je rappelle que le code à ajouter est le suivant :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    Toujours au-dessus de la balise </head>, insérez le code JavaScript suivant :

      <script
      src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'
      type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    function
      postarea4(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new
      Array,postnum4<=e.feed.entry.length?maxpost=postnum5:maxpost=e.feed.entry.length,document.write('<div
      class="ct-wrapper"><div class="owl_carouselle
      owl-carousel">');for(var t=0;t<maxpost;t++){for(var
      r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var
      m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split("
      ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in
      l)g=l.summary.$t;else
      g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img
      class="owl-lazy" min-width="620" min-height="240" class="odd-img"
      src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'"
      width="150"/>');for(var
      f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var
      k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgc18bxUzrMGvONSHYXSgYHqAh64aTYywr6omhj17msAha4GyFQrw2yhz4Qb75gLoWclIN7KZjm-ABzPjWbgBvCyHviTNy01MEF2An6GTqi7-qD1P-Cpnj3TSkKSM1bYRx4AUCGdlEpfQ/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void
      0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'"
      class="slider-image" style="background:url('+w+') no-repeat center
      center;background-size: cover;width: 100%;height:
      420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else
      x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+')
      no-repeat center center; display:block;"/>';else x='<a href="'+r+'"
      class="slider-image" style="background:url('+w+') no-repeat center
      center;background-size: cover; display:block;"/>';var z='<div
      class="slider-item"><div class="slider-wrapp"><div class="thumb
      overlay">'+x+'</div><div class="post-descript"><div
      class="post-inner"><div class="post-meta"><div
      class="post-tag">'+i+'</div></div><h2
      class="post-title"><a href="'+r+'">'+n+'</a></h2><div
      class="post-date">'+(h+" "+u+"
      "+y)+'</div></div></div><div
      class="clear"></div></div></div>';document.write(z),j++}document.write("</div></div>")}function
      postarea5(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new
      Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div
      class="ct-wrapper"><div class="row"><div
      class="featured-posts">');for(var t=0;t<maxpost;t++){for(var
      r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var
      m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split("
      ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in
      l)g=l.summary.$t;else
      g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),y=s.indexOf('"',b+5),d=s.substr(b+5,y-b-5),-1!=a&&-1!=b&&-1!=y&&""!=d&&(img[t]=0==t?'<img
      min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img
      class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var
      f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<f.length;u++)if(parseInt(h)==f[u]){h=p[u];break}var
      y=e.feed.entry[t].content.$t,v=(u=$("<div>").html(y)).find("img:first").attr("src"),k=e.feed.entry[t].media$thumbnail.url;-1!=k.indexOf("img.youtube.com")&&(k=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),k=k.replace("/s72-c/","/s1600/");y="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgc18bxUzrMGvONSHYXSgYHqAh64aTYywr6omhj17msAha4GyFQrw2yhz4Qb75gLoWclIN7KZjm-ABzPjWbgBvCyHviTNy01MEF2An6GTqi7-qD1P-Cpnj3TSkKSM1bYRx4AUCGdlEpfQ/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void
      0===v)if(e.feed.entry[t].media$thumbnail)var A='<a href="'+r+'"
      class="slider-image" style="background:url('+k+') no-repeat center
      center;background-size: cover;width: 100%;height:
      420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else
      A='<a href="'+r+'" class="noimg slider-image" style="background:url('+y+')
      no-repeat center center; display:block;"/>';else A='<a href="'+r+'"
      class="slider-image" style="background:url('+k+') no-repeat center
      center;background-size: cover; display:block;"/>';var w='<div
      class="feature-item"><div class="thumb
      overlay">'+A+'</div><div class="post-descript"><div
      class="post-inner"><div class="post-meta"><div
      class="post-tag">'+i+'</div></div><h2
      class="post-title"><a
      href="'+r+'">'+n+'</a></h2></div></div><div
      class="clear"></div></div>';document.write(w),j++}document.write("</div></div></div>")}function
      postarea1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new
      Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div
      class="ct-wrapper"><div class="featured-posts">');for(var
      t=0;t<maxpost;t++){for(var
      r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a
      href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var
      m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split("
      ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in
      l)g=l.summary.$t;else
      g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img
      class="owl-lazy" min-width="620" min-height="240" class="odd-img"
      src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'"
      width="150"/>');for(var
      f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var
      k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgc18bxUzrMGvONSHYXSgYHqAh64aTYywr6omhj17msAha4GyFQrw2yhz4Qb75gLoWclIN7KZjm-ABzPjWbgBvCyHviTNy01MEF2An6GTqi7-qD1P-Cpnj3TSkKSM1bYRx4AUCGdlEpfQ/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void
      0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'"
      class="slider-image" style="background:url('+w+') no-repeat center
      center;background-size: cover;width: 100%;height:
      420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else
      x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+')
      no-repeat center center; display:block;"/>';else x='<a href="'+r+'"
      class="slider-image" style="background:url('+w+') no-repeat center
      center;background-size: cover; display:block;"/>';var z='<div
      class="feat-home"><div class="thumb overlay">'+x+'</div><div
      class="post-descript"><div class="post-inner"><div
      class="post-meta"><div
      class="post-tag">'+i+'</div></div><h2
      class="post-title"><a href="'+r+'">'+n+'</a></h2><div
      class="post-date">'+(h+" "+u+"
      "+y)+'</div></div></div><div
      class="clear"></div></div>';document.write(z),j++}document.write("</div></div>")}cat1="Featured",imgr=new
      Array,imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGA8y2eaIsraRvWCc5v6OQq9OEOTowOeKag3T5Kg7Sirld4GVqy7MoqZsf6FG58o8fGJj_05aB7eD3NrCX-IfGzxnrmr9lx0o3I-IpuSeyhw0kgSEf-xa5gkBR9o2AI2xYJMmqs-__wHk/s1600/picture_not_available.png",showRandomImg=true,aBold=true,summaryPost=150,summaryTitle=50,postnum1=1,postnum4=4,postnum5=5;
    //
      Options
    $(document).ready(function(){$(".owl_carouselle").owlCarousel({autoplay:true,loop:true,lazyLoad:true,nav:true,dots:false,video:true,navText:["<i
      class='fa fa-angle-left'></i>","<i class='fa
      fa-angle-right'></i>"],smartSpeed:1200,responsiveClass:true,responsive:{0:{items:1},600:{items:1},1e3:{items:1}}})});
    //]]>
    </script>
    
    

    Explication des options du diaporama

    Les paramètres du diaporama commencent après la ligne // Options qui se trouve vers la fin du code JavaScript.

    La valeur true signifie que la fonction est activée alors que false signifie qu'elle est désactivée

    ! function(e) {        e(document).ready(function() {
               
    e( & quot;.owl_carouselle & quot;).owlCarousel({
                   
    autoplay: true, // Activer le démarrage automatique
                   
    loop: true, // Activer la lecture en boucle 
                   
    lazyLoad: true, // Cette fonction optimise le chargement et l'affichage des
    images
                   
    nav: true, // Activer les icones de navigation
                   
    dots: false, // Activer l'affichage des boutons de navigation
                   
    video: true, // Activer la lecture des vidéos
                   
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa
    fa-angle-right'></i>"],
                   
    smartSpeed: 1200, // Vitesse de défilement en milliseconds
                   
    responsiveClass: true,  // true signifie que le diapo s'adaptera à tous les
    supports mobiles

    Choisir l'endroit où sera affiché votre slideshow

    Maintenant, il faudra insérer le code HTML ci-dessous à l'endroit où l'on souhaite voir paraître le diaporama. Si vous désirez par exemple l'afficher juste après votre barre de navigation (menu), suivez ces étapes.

    Afin de situer le code de la barre de navigation dans le code HTML du thème, on va chercher le nom d’une catégorie de notre menu. À titre d’exemple, je chercherai la catégorie "PORTFOLIO" qui figure dans ma barre de navigation.

     
    insérer un diaporama ou slideshow dans Blogger

    Cela va me permettre de repérer le code de mon menu qui commence généralement par la balise ouvrante <nav> ou <div id='nav'> et se termine par la balise </nav> ou </div> selon votre thème Blogger.

    Ensuite, le code du diaporama doit être collé juste en dessous de la ligne de code suivante comme montrer sur l’image qui suit :  <div style="clear: both;"></div> ou <div class="clear"></div>

     
    affichez votre slidshow dans Blogger

    Voici à présent le code d’activation du slideshow 

    <div class='slider-wrappper'>
    <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
      <b:widget id='HTML32' locked='true' title='Diaporama' type='HTML' version='1'>
        <b:widget-settings>
          <b:widget-setting name='content'>Personnaliser</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
              <!-- only display title if it's non-empty -->
                            <b:if cond='data:title != &quot;&quot;'>
                            <h2 class='title'>
                                 <data:title/>
                              </h2>
                            </b:if>
                            <div class='widget-content'>
                              <div class='widget-inner'>
                                <script>
                                  document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);
                                </script>
                              </div>
                            </div>
            </b:includable>
      </b:widget>
    </b:section>
    </div>
    
    

    Le diaporama affichera les 5 articles les plus récents de notre blog. Vous pouvez choisir le nombre d'articles à afficher dans le diaporama en changeant la valeur 5 dans ce code postnum5 par le nombre d’articles que vous souhaitez voir y afficher.

    Pour ce faire, cherchez postnum5 dans le code précédent :

    <script>                              
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);                    
    </script>


    Maintenant, dans la ligne suivante : <b:widget-setting name='content'>Personnaliser</b:widget-setting>

    Changez " Personnaliser" par le nom exact de votre libellé en respectant les majuscules et les minuscules. Par exemple, pour afficher les articles récents d’un libellé "High-Tech", votre code devra ressembler à ça :

    <b:widget-setting name='content'> High-Tech </b:widget-setting>

    Vous pouvez avoir le même résultat en accédant au menu "Mise en page" > "Diaporama", et en saisissant votre libellé dans la fenêtre de configuration.


    Comment ajouter un diaporama éblouissant dans Blogger - slideshow moderne

    Si vous vous arrêtez à cette étape, votre slideshow sera visible dans toutes les pages de votre blog. Mais cela risquerait d’impacter la vitesse de chargement de vos pages. Pour optimiser les performances de votre blog, contentez-vous d'afficher votre diaporama uniquement dans la page d'accueil.

    Afficher le diaporama uniquement dans votre page d’accueil Blogger

    Première méthode

    Mettez le code d’activation du diaporama entre la balise conditionnelle suivante :

    <b:if cond='data:view.isMultipleItems'>
    <div class='slider-wrappper'>
    <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
    ...............................................
    ..................................................
    ................................................
    </b:section>
    </div>
    </b:if>

    Deuxième méthode

    Ajoutez cette balise conditionnelle juste après le code d’activation du slideshow :

    <div class='slider-wrappper'>
    <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
    ...............................................
    ..................................................
    ................................................
    </b:section>
    </div>

    <b:if cond='data:blog.url != data:blog.homepageUrl'> 
    <style>.featured-slider{display:none}</style> 
    </b:if>

    Alors que cet article touche à sa fin, j’espère que ce nouveau tutoriel vous a plu et que vous avez réussi à intégrer le diaporama dans votre blog sans problèmes.

    Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.