Archive Pages Design$type=blogging

Nouveau slider automatique pour Blogger (Caroussel)

Sur le même sujet:



Aujourd'hui je vais vous proposer un nouveu tutoriel pour intégrer un slider automatic à Blogger (Caroussel).

Le principe de fonctionnement de ce slider est la même que l'autre slider automatique par catégories (labels) que je vous ai proposé il y a quelques jours.



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(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}#carousel ul{width:100000px;position:relative;margin-top:10px}#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/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'/>
<script src='
http://johny-template.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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> 
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.


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 != &quot;item&quot;'><div id='carousel'><div id='previous_button'/><div class='container'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);</script>    <div class='clear'/></div><div id='next_button'/></div><script type='text/javascript'>(function($) {     $(document).ready(function(){$(&quot;#carousel .container&quot;).jCarouselLite({    auto:4000,    scroll: 1,    speed: 800,        visible: 5,    start: 0,    circular: true,    btnPrev: &quot;#previous_button&quot;,    btnNext: &quot;#next_button&quot;    });    })})(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 ;)



COMMENTAIRES

BLOGGER : 5
Loading...
Nom

astuces Facebook feature gadget Google Menu news Pages Réseaux Sociaux slider automatique templates Traduction trafic tutoriel
false
ltr
item
Blogger Pour Les Nuls: Nouveau slider automatique pour Blogger (Caroussel)
Nouveau slider automatique pour Blogger (Caroussel)
http://1.bp.blogspot.com/-BEz7NbJv3dY/T5bZtrBEWjI/AAAAAAAAAX8/LNkkO5eDAkQ/s640/bplnlol.jpg
http://1.bp.blogspot.com/-BEz7NbJv3dY/T5bZtrBEWjI/AAAAAAAAAX8/LNkkO5eDAkQ/s72-c/bplnlol.jpg
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.fr/2012/04/nouveau-slider-automatique-pour-blogger.html
http://blogger-pourlesnuls.blogspot.fr/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2012/04/nouveau-slider-automatique-pour-blogger.html
true
7261274087058654712
UTF-8
Aucun article trouvé VOIR TOUS Lire la suite Répondre Annuler la réponse Supprimer Par Accueil PAGES ARTICLES Voir tous RECOMMANDE POUR VOUS LIBELLE ARCHIVE SEARCH Aucun article ne répond aux critère de votre requête Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre Jan Fév Mar Avr Mai Jun Jul Août Sep Oct Nov Déc maintenant il y a une minute Il y a $$1$$ minutes il y a une heure Il y a $$1$$ heures Hier Il y a $$1$$ jours Il y a $$1$$ semaines il y a plus que 5 semaines