Comment ajouter un Slide avec image automatique coulissante pour votre blog blogger



Je vous propose un slide pour votre modèle Blogger avec défilement automatiques des images. Le Slider est faite pour afficher les articles par catégorie ou libellé précis. 

Ce silde est capable d'afficher n'importe quel message que vous souhaitez afficher d'une catégorie. Le mouvement du curseur est l'image principale est de droite à gauche, s'il vous plaît voir la démo ci-dessous:

lofslidernews


Avant d'entrer dans le tutoriel pour faire le slide, il faut faire d'abord deux réglages..

 Bon, si vous êtes intéressé par ce bon tutoriel commencer  comme suit:
  1. Entrée dans le tableau de bord Blogger, sélectionnez le blog qui sera installé le slider.
  2. Puis allez dans le modèle >> Modifier le code HTML (cochez la case élargir widget de modèles)
  3.  Sauvegarder le premier modèle, si à tout moment une erreur vous pouvai revenir à la forme originale.
  4. La première chose que vous devez faire est de faire une colonne vide sur le blog, comme indiqué ci-dessous (si le modèle que vous utilisez contient déjà une colonne vide comme indiqué ci-dessous, cette étape n'est pas nécessaire):
  5. lofslidernews 


    Le truc, placez le code suivant au-dessus du code ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;} 
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}

    Ensuite, pour l'amener à la mise en page (au-dessus de billet de blog), vous devriez l'appeler. Recherche <div id='main-wrapper'> puis placez le code suivant ci-dessous:
     
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
          </div>
    </b:if> 
  6. Enregistrez le modèle, passons maintenant à Presentation / mise en page, vous vérifiez ce qui s'est passé. Maintenant aller sur Modifier le code HTML.  Ensuite, entrez le code suivant au-dessus du code ]]></b:skin> :
    /* Lofslidernews */
    #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
    .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
    ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjxmJ-atA5Dgq7ceOgWHfHKVJFWXJuWA0Knoqc73n8jUS79AfoKBM8LjVvfgDC2RbpvleDhMsinqgxxZTtyGDxkjQdbtNzl69hvuuMWNPMMODAco-wuA-5eq5uyzlMYRewtDGkHhhjSUq/s1600/transparant.png);padding:10px}
    ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
    ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
    ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}
    .slider-opacity li{position:absolute;top:0;left:0;float:inherit}
    ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}
    ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
    ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
    .slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
    .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
    .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
    .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
    .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
    .slider-navigator li.active img{border:#eee solid 1px}
    .slider-navigator li.active h5{color:#0178d3}
    Notez le code couleur rouge ci-dessus, la longueur et la largeur de la glissière, vous pouvez ajusté la taille à votre modèle.  Dans la démo, j'ai utilisé une longueur de corps : wrapper 630px.

  7. Toujours dans Modifier le code HTML, entrez le code de script suivant au-dessus de </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[

    (function($) {

    var types = ['DOMMouseScroll', 'mousewheel'];

    $.event.special.mousewheel = {
        setup: function() {
            if ( this.addEventListener )
                for ( var i=types.length; i; )
                    this.addEventListener( types[--i], handler, false );
            else
                this.onmousewheel = handler;
        },
       
        teardown: function() {
            if ( this.removeEventListener )
                for ( var i=types.length; i; )
                    this.removeEventListener( types[--i], handler, false );
            else
                this.onmousewheel = null;
        }
    };

    $.fn.extend({
        mousewheel: function(fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },
       
        unmousewheel: function(fn) {
            return this.unbind("mousewheel", fn);
        }
    });


    function handler(event) {
        var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
       
        event = $.event.fix(event || window.event);
        event.type = "mousewheel";
       
        if ( event.wheelDelta ) delta = event.wheelDelta/120;
        if ( event.detail     ) delta = -event.detail/3;
       
        // Add events and delta to the front of the arguments
        args.unshift(event, delta);

        return $.event.handle.apply(this, args);
    }

    })(jQuery);

    /**
     * @version        $Id:  $Revision
     * @package        jquery
     * @subpackage    lofslidernews
     * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
     * @website     http://landofcoder.com
     * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License
     */
    // JavaScript Document
    (function($) {
         $.fn.lofJSidernews = function( settings ) {
             return this.each(function() {
                // get instance of the lofSiderNew.
                new  $.lofSidernews( this, settings );
            });
          }
         $.lofSidernews = function( obj, settings ){
            this.settings = {
                direction            : '',
                mainItemSelector    : 'li',
                navInnerSelector    : 'ul',
                navSelector          : 'li' ,
                navigatorEvent        : 'click',
                wapperSelector:     '.slider-main-wapper',
                interval               : 4000,
                auto                : true, // whether to automatic play the slideshow
                maxItemDisplay         : 5,
                startItem            : 0,
                navPosition            : 'vertical',
                navigatorHeight        : 60,
                navigatorWidth        : 210,
                duration            : 600,
                navItemsSelector    : '.slider-navigator li',
                navOuterSelector    : '.slider-navigator-outer' ,
                isPreloaded            : true,
                easing                : 'easeInOutQuad'
            }   
            $.extend( this.settings, settings ||{} );   
            this.nextNo         = null;
            this.previousNo     = null;
            this.maxWidth  = this.settings.mainWidth || 600;
            this.wrapper = $( obj ).find( this.settings.wapperSelector );   
            this.slides = this.wrapper.find( this.settings.mainItemSelector );
            if( !this.wrapper.length || !this.slides.length ) return ;
            // set width of wapper
            if( this.settings.maxItemDisplay > this.slides.length ){
                this.settings.maxItemDisplay = this.slides.length;   
            }
            this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
            this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );   
            this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
            this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
           
            if( this.settings.navPosition == 'horizontal' ){
                this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
                this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
                this.navigatorOuter.height(    this.settings.navigatorHeight );
               
            } else {
                this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );   
               
                this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
                this.navigatorOuter.width(    this.settings.navigatorWidth );
            }       
            this.navigratorStep = this.__getPositionMode( this.settings.navPosition );       
            this.directionMode = this.__getDirectionMode(); 
           
           
            if( this.settings.direction == 'opacity') {
                this.wrapper.addClass( 'slider-opacity' );
                $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
            } else {
                this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
            }

           
            if( this.settings.isPreloaded ) {
                this.preLoadImage( this.onComplete );
            } else {
                this.onComplete();
            }
           
         }
         $.lofSidernews.fn =  $.lofSidernews.prototype;
         $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
       
         $.lofSidernews.fn.extend({
                                 
            startUp:function( obj, wrapper ) {
                seft = this;

                this.navigatorItems.each( function(index, item ){
                    $(item).click( function(){
                        seft.jumping( index, true );
                        seft.setNavActive( index, item );                   
                    } );
                    $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
                })
                this.registerWheelHandler( this.navigatorOuter, this );
                this.setNavActive(this.currentNo );
               
                if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                    this.registerButtonsControl( 'click', this.settings.buttons, this );

                }
                if( this.settings.auto )
                this.play( this.settings.interval,'next', true );
               
                return this;
            },
            onComplete:function(){
                setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
            },
            preLoadImage:function(  callback ){
                var self = this;
                var images = this.wrapper.find( 'img' );
       
                var count = 0;
                images.each( function(index,image){
                    if( !image.complete ){                 
                        image.onload =function(){
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }
                        }
                        image.onerror =function(){
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }   
                        }
                    }else {
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }   
                    }
                } );
            },
            navivationAnimate:function( currentIndex ) {
                if (currentIndex <= this.settings.startItem
                    || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                        this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                        if (this.settings.startItem < 0) this.settings.startItem = 0;
                        if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                            this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                        }
                }       
                this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
                                                    {duration:500, easing:'easeInOutQuad'} );   
            },
            setNavActive:function( index, item ){
                if( (this.navigatorItems) ){
                    this.navigatorItems.removeClass( 'active' );
                    $(this.navigatorItems.get(index)).addClass( 'active' );   
                    this.navivationAnimate( this.currentNo );   
                }
            },
            __getPositionMode:function( position ){
                if(    position  == 'horizontal' ){
                    return ['left', this.settings.navigatorWidth];
                }
                return ['top', this.settings.navigatorHeight];
            },
            __getDirectionMode:function(){
                switch( this.settings.direction ){
                    case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                    default: this.maxSize=this.maxWidth; return ['left','width'];
                }
            },
            registerWheelHandler:function( element, obj ){
                 element.bind('mousewheel', function(event, delta ) {
                    var dir = delta > 0 ? 'Up' : 'Down',
                        vel = Math.abs(delta);
                    if( delta > 0 ){
                        obj.previous( true );
                    } else {
                        obj.next( true );
                    }
                    return false;
                });
            },
            registerButtonsControl:function( eventHandler, objects, self ){
                for( var action in objects ){
                    switch (action.toString() ){
                        case 'next':
                            objects[action].click( function() { self.next( true) } );
                            break;
                        case 'previous':
                            objects[action].click( function() { self.previous( true) } );
                            break;
                    }
                }
                return this;   
            },
            onProcessing:function( manual, start, end ){            
                this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
                this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);               
                return this;
            },
            finishFx:function( manual ){
                if( manual ) this.stop();
                if( manual && this.settings.auto ){
                    this.play( this.settings.interval,'next', true );
                }       
                this.setNavActive( this.currentNo );   
            },
            getObjectDirection:function( start, end ){
                return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");   
            },
            fxStart:function( index, obj, currentObj ){
                    if( this.settings.direction == 'opacity' ) {
                        $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                        $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                    }else {
                        this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                    }
                return this;
            },
            jumping:function( no, manual ){
                this.stop();
                if( this.currentNo == no ) return;       
                 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
                this.onProcessing( null, manual, 0, this.maxSize )
                    .fxStart( no, obj, this )
                    .finishFx( manual );   
                    this.currentNo  = no;
            },
            next:function( manual , item){

                this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);   
                this.onProcessing( item, manual, 0, this.maxSize )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual );
            },
            previous:function( manual, item ){
                this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
                this.onProcessing( item, manual )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual    );           
            },
            play:function( delay, direction, wait ){   
                this.stop();
                if(!wait){ this[direction](false); }
                var self  = this;
                this.isRun = setTimeout(function() { self[direction](true); }, delay);
            },
            stop:function(){
                if (this.isRun == null) return;
                clearTimeout(this.isRun);
                this.isRun = null;
            }
        })
    })(jQuery)

     //]]>
    </script>
    <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 = 70;
    summaryTitle = 20;

    numposts = 10;

    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();

          for (var i = 0; i < numposts; 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 style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';                   
            document.write(trtd);      
                   
                  j++;
        }
       
    }


    function showrecentposts1(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();
       
          for (var i = 0; i < numposts; 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><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                   
            document.write(trtd);      
                   
                  j++;
        }
       
    }

     //]]>
    </script>

  8. Enregistrer le modèle.  Maintenant, vous revenez à  Présentation / Mise en page.  Entrez le code ci-dessous dans la colonne vide décrit dans la première étage,  donc cliquez sur Ajouter un gadget >> HTML / Javascript:
    <div class='lof-main-wapper' id='slider'>
    <div class='slider-main-outer'>
    <ul class='slider-main-wapper'>
    <script>                   
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
    </script>
    </ul>
    </div>
    <div class='slider-navigator-outer'>
    <ul class='slider-navigator'>
    <script>                   
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script>
    </ul>
    </div>
    </div>
    <script type='text/javascript'>
    jQuery(document).ready(function($){   
        $('#slider').lofJSidernews({
            interval:6000,
            duration:800,
            mainWidth: 405,
            navigatorWidth: 200,
            maxItemDisplay:5,
            easing:'easeInOutQuad',
            auto:true,
            isPreloaded: false
        });
    });   
    </script>
    Description:
    Messages rouge (misteri) est le label ou le libellés ou catégorie à changer pour votre silde. Donc  remplacer par votre catégorie pour  afficher les articles de votre catégorie.  
  9. Enregistrer, c'est fait.


6 Commentaires

Laisser un commentaire

  1. comment faire apparaitre ce slider dans les différentes pages de mon blog !!

    RépondreSupprimer
  2. @Bilel Marouen : alors pour que slider apparaisse sur toutes le spages il faut dans la partie 5. le code que tu dois placer

    'main-wrapper' et il faut supprimer les conditions en tre les fléches:

    ---> <----



    --> <--

    RépondreSupprimer
  3. Salut, moi j'ai telecharger un template ou il y a déjà, un slide mais je voudrais le modifier pour qu'il affiche les article recent, merci

    RépondreSupprimer
  4. Vraiment , Vous étes un des meilleurs dans votre domaine :)

    RépondreSupprimer
  5. Bonsoir a toous,

    Ce widget est vraiment utile, cependant j'ai quelques questions a vous poser :

    * pourquoi ne puis je pas cliquer sur les articles sur le slider de droite. Seul les articles presents dans le main-wapper peuvent s'ouvrir ?!

    * Est il possible de mettre seulement le feed de tout le blog, sans avoir a décider d'une catégorie ou label ?

    Dans l'attente de vous lire

    Cordialement
    Benjamin

    P.S : le blog pour voir le rendu est le suivant :
    http://clubedafraldinha.blogspot.com.br

    Merci

    RépondreSupprimer
  6. Je ne sais comment editer mon message, donc j'en ecrit un a la suite.
    je viens de trouver comment ouvrir les liens sur le slide-wrapper.
    J'ai rajoutyer la balise a href=...

    Maintenant il me manque la solution pour mettre un feed pour tous les articles du blog en général sans avoir a choisir un label.
    Cela bien sur serait pour le main et pas pour le slide.

    Dans l'attente de vous lire

    cordialement
    benjamin

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne