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.
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:'';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:"";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:".";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 mobilesChoisir 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.
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>
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 != ""'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<div class='widget-inner'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");
</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("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>"); </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.
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.