Ajouter Slide Show dans ton blog blogger



Dans ce message, je vais vous montrer comment utiliser et insérer une Slider FeatureContent pour les modèles Blogger.


Maintenant, le code javascript permet au blogueur afficher automatique tous les messages dans un slider d'un label ou libellé.
Ce tuto utilise deux javascripts un pour obtenir les messages à partir d'un label ou libellé spécifique et l'autre pour la rotation du contenu : Content Slider vedette v2.4

1- la première étape :

Mettez ce code ou le script pour les message par étiquette ou libellé avant </head>

&lt;script&gt;
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;

numposts1 = 5;
label1 = &quot;Featured&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
       
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;590&quot; height=&quot;240&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';     
document.write(trtd);      
j++;
}}
&lt;/script&gt;

Vous pouvez modifier ce code, selon votre besoin

summaryPost = 140; -> le nombre de caractère en résumé
des messages
numposts1 = 5; -> nombre de messages

et, la taille de vos images

width=&quot;590&quot; height=&quot;240&quot;

2- La second étape :

Mettez ce script pour curseur de contenu avant </body>

&lt;script src='http://dl.dropbox.com/u/12924430/contentslider.js'&gt;&lt;/script&gt;
&lt;script&gt;
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
&lt;/script&gt;
 

3 - La troisième étape :

Trouvez ce code <div id='main-wrapper'> et de mettre ce code par la suite.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<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=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

4- La quatrième étape :
Ajouter de style pour «curseur contenu» avec du CSS.
Mettez ce code avant ]]></b:skin>

#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Vous devez régler à nouveau le code, en fonction de votre modèle

5- La dernière étape :

- Créer un nouveau article et lui donner l'étiquette ou libellé « Featured ».

- L'image utilisée est de taille de 590x240 pixels par défaut.

-Regardez la première étape si vous avez besoin de modifier ou changer l'étiquette ou libellé ( Label) « Featured » par votre libéllé de votre choix dans la premiére étape pour avoir dans votre slider les messages ou articles du libéllée de votre choix.

27 Commentaires

Laisser un commentaire

  1. Bonjour
    je ne vois pas la partie main-wrapper dans mon template
    pouvez-vous m'aider svp
    Merci

    RépondreSupprimer
  2. Bonjour,

    Dans Blogger, à quel endroit je dois entrer tous ces codes?
    Dans un gagdet?

    RépondreSupprimer
  3. Bonjour,

    Il faut rentrer les codes HTML : Aller sur son panneau de configuration blogger / Présentation / Modifier le code HTML et noublie pas de cocher la case "Développer des modèles de gadgets" pour retrouver les codes en rouge pour placer aprés code en vert

    A+

    RépondreSupprimer
  4. @Jean Sébastien : n'oublie pas de cocher la case "Développer des modèles de gadgets" pour trouver la partie "main-wrapper "

    RépondreSupprimer
  5. Bonjour
    serait-il possible de n'afficher que les messages récents dans ce slide chow?
    merci d'avance

    RépondreSupprimer
  6. @Ben ; Désolé le code n'est fait que pour un label précis et puis ca donne le choix d'afficher les articles voulus.

    RépondreSupprimer
  7. salut a tous!

    Moi non plus je ne trouve pas le main wrapper. J'ai pourtant coché la case.

    y a t il une eutre facon de le trouver? ou une raison pur expliquer son absence?

    RépondreSupprimer
  8. Bonjour, moi non plus je ne trouve pas le main wrapper et j'ai bien coché la case développer modèles gadget.

    Merci d'avance pour l'aide

    RépondreSupprimer
  9. Bonjour,

    Moi non plus je ne trouve pas le mainwrapper dans mes codes HTML... j'utilise le modèle simple de Blogger pour mon blogue... pouvez-vous me dire où aller car j'aimerais utiliser un slider.

    Merci! :-)

    RépondreSupprimer
  10. vive l'aide apporter! je pense qu'il faudrait remettre à jour avec les nouveaux thème de blogspot, les HTML du changer un peu d'ou le fait de ne pas trouver cela

    Merci

    RépondreSupprimer
  11. Comment je peux modifier la taille de l’écriture? merci

    RépondreSupprimer
  12. pour modifier la taille il faut modifier dans l'étape 4 :
    height: 250px (Hauteurdu slide)

    et les tailles des ecritures pareil ici :
    featuredPost h2{margin:0;font-size:16px;line-height:1}
    .featuredPost span{font-size:10px}
    .featuredPost p{font-size:11px}

    RépondreSupprimer
  13. Bonjour,

    Avec votre code, je visualise bien le code, mais pas les images. Comment ca se fait? merci

    RépondreSupprimer
  14. tu n'a pas du copier la totalité du code

    RépondreSupprimer
  15. How can I show this slider only in my home page?

    Thank you!!!

    RépondreSupprimer
  16. Aie, tout suivie jusqu'à 3 et à 3, je ne trouve pas le wrapper .. effectivement avant on pouvait activer en cochant la case, et là, plus de case à cocher : la partie a changé .... help ...

    RépondreSupprimer
  17. @FromSide2Side : dans le nouveau systeme blogger tu clique n'importe ou dans le html du template et tu fais CTRL + F est tu fais ta recherche

    RépondreSupprimer
  18. merci pour votre effort, merci de me montrer comment je peut supprimer next et previos

    RépondreSupprimer
  19. Bonjour j ai le meme probleme que FromSide2Side meme avec CTRL + F impossible de trouver le wrapper

    RépondreSupprimer
  20. @Abdelilah Baadi : tu peut modifier next et previous par suivant et precedant dans le code de la seconde etape

    RépondreSupprimer
  21. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  22. merci bcp ça marché mais est ce que si possible de les élever
    (next et previos).

    j'ai essayé de suprimer la ligne (nextprev: ["Previous", "Next"], )
    mais ca donne rien

    RépondreSupprimer
  23. Bonjour,

    J'ai le même probleme que Marcom pouvez-vous m'aider? car impossible de valider la troisième étape! HELLLLPPPP

    RépondreSupprimer
  24. Idem que Marcom et sofia derder impossible de valider div id='main-wrapper' !!!!!!

    RépondreSupprimer
  25. Est-il possible d'enlever le texte de l'article et de ne laisser que l'image? Merci ^
    ^

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne