Aujourd'hui je vais vous proposer un nouveu tutoriel pour intégrer un slider automatic à Blogger (Caroussel).
L'intégration de ce slider est très facile, il suffit juste de suivre ces étapes:
1 - Connectez vous à Blogger, puis choisissez le blog auquel vous voudriez appliquer ce slider.
2 - Pour cela, allez à Modèle > Modifier le code HTML > ensuite cochez ' Développer des modèles de gadgets '
3 - Sous réserve d'erreur ou mauvaise manipulation de votre template, nous vous recommandons vivement de faire une sauvegarde de votre template Blogger.
4 - Maintenant, cherchez grâce à ' Ctrl + F ' ou bien ' F3 ' le code en rouge ]]></b:skin> , et juste en dessus, collez le code suivant:
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEholZSl0q111tj6SsSlHDpDTmQlvKZceYH4eAnNLId-2VqcX_yfzbnCfMEyVJqJnc3ui_PLkjGZri9QV6SLUOlA9yLJwSH1ZVrKtvzopBe1kBUPwMQuhwwrRHDH12aQrhdGbRfr4A_vLws/s1600/scroller-bg.png) repeat center}#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaE30zAqSlcWaGowCJczKwVytVy1thfS1lKusQbhDK5R8662OZcmMkBNjSRbNmNy1tabfHDNd0mx_bXv8eBnGSQzP3DPfDGcaMoQbgVIPQFt6qMHBVF-Pk310ZlYVCGMGNxiBUqRqZNI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWpHCKymIZ1it2LgEkv3Q4ZQ8029JS3xj04ineXP0SmDDrOhGYdQWJ7Is7OzVtsbobcu4vkUr49VQ_H7i7FKDvPH_frM-Edx0K-Za0IUUSak2znDxIBwucnJ6pFhxXIDQV4Otty3oVVs/s1600/prev.png) center}#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMLN1D4alqPt271OurrIAKH03I0CxrT8tNNUUonTVkmU6jxRMD0NPh3TJC5BKv1fMJb9M6ZLp0fihio1B-r0DM4umnZUX0GaR2mFsPQgV6WU_YwFbtMmVzuopa8SqaoB4rBmUnqAfVh6E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrpGK3VtJPV1cE21aKZJInqyCuMEhK7ESqwr_2Rs1g2SFFIrBWncuTFZYbQMmh6dte9EGZIswWp393JC1oATQLG5KSwOIm7Oamzm7z83AUaoxEZAOFWGW08BsuKouleEGYgjByymj0QI/s1600/next.png) center}#carousel ul{width:100000px;position:relative;margin-top:10px}#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sSGNRsMMUZq-Kd1MgzBvrDo3Ff43R53IXkQwq_u1g6PtZg3r3YCn8hgUVTeo7gsx-dcyei7qel02NFP4C2b43gVEWeFedtjP6oiRitSTw4fxYcEZPsm5aSkViTRsi76zx_UNrEz9Xq8/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}#carousel ul li a.slider_title:hover{color:#cd1713}#carousel a img{display:block;background:#fff;margin-top:0}Notez que le code en BLEU est la largeur du slider, et le code en ROUGE est sa hauteur, vous pouvez la modifier en n'importe quel valeur vous souhaitez.
5 - L'étape suivant consiste à ajouter ce code en dessus de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>Notez que le code en BLEU désigne le nombre de posts qu'affichera ce slider, et le code en ROUGE désigne le label (catégorie) que ce slider affichera.
<script src='http://johny-template.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffV_0CEG-nkDXv59voV2iuQ9Q-PEchEUT-l42dgkw4AQReV3hQopWaNlS87RHAaHUohMXXW150buAodgFgg61Eb75tAYvn4boZ3Wg-VAgqT2V3YOIiM6v8zTXMWdW9GhCgC1U1bYUArw/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "news";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);j++;}document.write('</ul>');}//]]></script>
6 - La prochaine étape est de cherche ce code <div id='main-wrapper'> puis juste en dessus, placez le code suivant:
<b:if cond='data:blog.pageType != "item"'><div id='carousel'><div id='previous_button'/><div class='container'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script> <div class='clear'/></div><div id='next_button'/></div><script type='text/javascript'>(function($) { $(document).ready(function(){$("#carousel .container").jCarouselLite({ auto:4000, scroll: 1, speed: 800, visible: 5, start: 0, circular: true, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script></b:if>7 - C'est l'étape fibale maintenant, il vous suffit d'enregistrer le modèle et d'admirer le résultat.
Si vous avez bien suivi ces étapes, ça donnera comme ce résultat ( DEMO )
Si vous rencontrez des problèmes lors de l'installation, laissez un commentaire ci-dessus.
Aidez nous à faire connaître ce blog en partageant cet article ;)
Bonjour, je trouve pas sur le code HTML ça : < div id='main-wrapper' >
RépondreSupprimerBonjour,
Supprimertoutes les templates n'utilisent pas les mêmes codes.
Je te propose donc de chercher la 1ère id contenant " wrapper ", si tu ne le trouves pas, envoi moi ta template et je me chargerai d'implanter ce slider ;)
pas de wrapper pour moi non plus.
SupprimerJe l'ai bel et bien essayer sur mon blog : http://kwa2neuf-mada.blogspot.com mais ça n'a pas marché, je ne sais pas pourquoi!
RépondreSupprimerBonjour merci pour le tutto, mais l'encadrement de la slidder s'affiche che moi mais pas les images
RépondreSupprimerBonjour, je viens également de le tester. Il affiche le cadre pour le slider en blanc. Malheureusement, lorsqu'on fait un nouveau post, rien ne s'affiche.
RépondreSupprimerEnregistrer un commentaire