Slider automatique avec image style Yahoo



Découvrez le slider avec image version Yahoo pour blogger à insérer dans votre modéle Blogspot.
Il change d'image lorsque vous passez la souris sur les petites images.

slider avec image version Yahoo


Sur le blog il y a une image de la démonstration du slider automatique, si vous êtes intéressé lire le tutoriel sur la création automatisée Slider curseur basé sur les libellés.

La procédure pour le mettre en place

Immédiatement, sur les étapes de fabrication de cette Slider automatique de contenu:

  1. La première étape, vous devez vous connecter à votre compte Blogger 
  2. Sélectionnez le blog que vous souhaitez ajouter le slider avec image.
  3. Après cela, allez dans le modèle & gt; & gt; Modifier le code HTML,
  4. Par mesure de précaution pour éviter les erreurs dans le montage plus tard, faire une sauvegarde de votre modèle.
  5. La prochaine étape, placez le code suivant au-dessus du code ]]></b:skin> :
    #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
    #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
    #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjxmJ-atA5Dgq7ceOgWHfHKVJFWXJuWA0Knoqc73n8jUS79AfoKBM8LjVvfgDC2RbpvleDhMsinqgxxZTtyGDxkjQdbtNzl69hvuuMWNPMMODAco-wuA-5eq5uyzlMYRewtDGkHhhjSUq/s1600/transparant.png)}
    #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
    #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
    #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
    #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
    #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
    #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
    #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
    #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
    #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
    Les code en bleu ci-dessus est la longueur et la largeur du curseur dans la démo, s' il vous plaît ajuster.
  6. Insérez le code suivant au-dessus du code </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-HqACqH1Fsp4Jow_AqRb9cGvYcYKfDMaEslqD0i1P5aG8HuLRgQRG7im0KIki2fc1_ekm-3pI2yTyh7Zh2FcwNpzsxqnUpxHQ8-WwkA2Z2xzIRAeT2nE3YgSMXEaMmEzSpKXpP6HEFP8/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 100;
    summaryTitle = 25;

    numposts3 = 5;

    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 showrecentposts3(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; 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","Avr","Mai","Juin","Juil","Aout","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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
        document.write(trtd);


        j++;
    }

    }

    function showrecentposts4(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; 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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
        document.write(trtd);

        j++;
    }

    }

    //]]>
    </script>
    Remarques :

  7. Script code Rouge (en haut) est le code de script de la dernière série que j'utilise pour faire ce curseur. Si le modèle que vous avez trouvé jquery.min.js bien différentes séries, code couleur rouge ci-dessus ne doivent plus entrer. Juste un jquery.min.js dans le modèle, il est jusqu'au numéro de série, si possible la dernière version.
    Couleur bleu : Le nombre de postes indiqués dans le curseur
    Couleur Vert : La longueur et la largeur de la grande image
    Couleur Rouge : La longueur et la largeur de la petite image
  8. Après les étapes ci-dessus, Enregistrer. Après cela, allez à la mise en page & gt; & gt; Ajoutez des gadgets Entrez ce code dans la case HTML/Javascript :

    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[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)
    }
    })
    </script>
    </div>
    Remarques :
  9. Notez la couleur de l'écriture bleu ci-dessus, il est une étiquette que je mets sur le curseur. Se il vous plaît changer comme vous le souhaitez. et la couleur Rouge est une description de la forme du curseur et la vitesse, les effets curseur et d'autres, ne sont pas  inclus.

    Si vous souhaitez remplacer l'affichage des articles par libéllés mais par les derniers articles de votre blog remplacer le code  ci-dessous
    :
    script src=\"/feeds/posts/default/-/sport?max-results
    Par le code ci-dessous :
    script src=\"/feeds/posts/default?max-results
    Voilà le tuto est fini et bon courage pour la mise en place du slider avec image version Yahoo

Poster un Commentaire

Laisser un commentaire

Plus récente Plus ancienne