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: DEMOAvant 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: Entrée dans le tableau de bord Blogger, sélectionnez le blog qui sera installé le slider. Puis allez dans le modèle >> Modifier le code HTML (cochez la case élargir widget de modèles) Sauvegarder le premier modèle, si à tout moment une erreur vous pouvai revenir à la forme originale. 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): Le truc, placez le code suivant au-dessus du code ]]>/* 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
puis placez le code suivant ci-dessous:
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 ]]> : /* 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(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/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.Toujours dans Modifier le code HTML, entrez le code de script suivant au-dessus de : 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:
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. Enregistrer, c'est fait.
http://www.leblogger.fr/2013/03/slide-avec-image-automatique.html
/http%3A%2F%2F3.bp.blogspot.com%2F-44xeanU16uE%2FTvhD31IBm4I%2FAAAAAAAAEU8%2Fvus9gZq5AkA%2Fs1600%2Ftop%2Bcolomn.jpg)
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
/http%3A%2F%2Fi2.ytimg.com%2Fvi%2FqWCn8PkHeuk%2Fhqdefault.jpg)
/http%3A%2F%2Fi2.ytimg.com%2Fvi%2F9JIyyva4CcQ%2Fhqdefault.jpg)