Archive Pages Design$type=blogging

Slider automatique pour votre template

Sur le même sujet:

image slider maskolis
Slider automatique | Publié avec l'accord de Maskolis
INTEGRER UN SLIDER AUTOMATIQUE | BLOGGER

ETAPE 1 : Connectez vous à blogger, rendez vous vers Modèle > Modifier le code HTML

ETAPE 2 : Cherchez " ]]></b:skin> " (Grâce à Ctrl + F) , et juste avant, collez le code ci dessous :
  1. #featured{margin-bottom:8px}
    .sliderwrapper{position: relative;overflow: hidden;height: 240px}
    .sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
    .pagination{text-align: left;padding:8px 0px}
    .pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
    .pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
    .featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
    .featuredPost a{color:#fff}
    .featuredPost a:hover{color:#dedde5}
    .featuredPost h2{margin:0;font-size:12px;line-height:1}
    .featuredPost span{font-size:10px}
    .featuredPost p{font-size:11px}
ETAPE 3 : Cherchez maintenant </head> , et juste avant, collez le code suivant :
  1. <script>
    //<![CDATA[
    /* Script from:http://simplexdesign.blogspot.com/ */
    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 = 100;

    numposts1 = 5;
    label1 = "featured";

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

    var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';   
    document.write(trtd);    
    j++;
    }}
    //]]>
    </script>
IMPORTANT : 
Le code en rouge désigne le nombre de posts qui s'afficheront dans ce slider. (changez 5 au nombre d'articles que vous voulez voire s'afficher dans le slider).

Le code en rose désigne le libellé des posts que vous voulez afficher au slider. (changez ' featured ' si vous voulez utiliser un autre libellé)

Le slider n'affichera que les articles dont le libellé est celui que vous avez choisi.


Le code en bleu désigne la largeur de la photo, et le code en vert sa hauteur. Changez les selon votre template, ou selon vos photos.


ETAPE  3: Trouvez </body> et juste avant, ajoutez le code ci dessous:
  1. <script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
    <script>
    //<![CDATA[
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" 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)
    }
    })
    //]]>
    </script>
ETAPE 4: Copiez le code ci dessous à l'endroit ou vous voulez que le slider apparaisse, exemple : après  <div class='region-inner main-inner'> ou dans un gadget.
  1. <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>
Voilà, c'était presque tout ;-)
Si vous avez rencontré des problèmes, ou vous voulez quelques infos, laissez un commentaire.
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: Slider automatique pour votre template
Slider automatique pour votre template
http://1.bp.blogspot.com/-8j1-O5Jhf3g/Ty4kaBriaJI/AAAAAAAAFE8/5BsDl6MKWHc/s1600/slider+image.jpg
http://1.bp.blogspot.com/-8j1-O5Jhf3g/Ty4kaBriaJI/AAAAAAAAFE8/5BsDl6MKWHc/s72-c/slider+image.jpg
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.com/2012/02/slider-automatique-pour-votre-template.html
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2012/02/slider-automatique-pour-votre-template.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