Gadget Affichage les articles par catégorie en onglet

Je vous présente un gadget pour votre template pour afficher les articles par catégories ou libellés  Alors, je vais vous expliquer comment l'insérer sur votre modèle de blog. Il permet d'un coup d’œil de voir les derniers articles de vos catégories favoris. 

Alors le gadget se presente avec 6 onglets "catégorie" avec un affichage de quatre vignettes plus articles, pour plus de détails cliquer sur l'image ci-dessous ou cliquez sur la démo pour voir un exemple.

DEMO

Démarrant l'explication du tuto :

1. Vous connecter sur votre panneau blogger de votre compte
2. Tant sélectionnez le blog que vous souhaitez ajouter ce curseur.
3. Après cela, allez à >> Modifier le code HTML modèle, puis vérifiez élargir modèles de gadgets
4. Juste au cas où, si quelque chose va mal dans l'édition ultérieure, vous devez sauvegarder votre premier modèle.  

INSERTION DES CODES

1. Après toutes ces étapes, mettez le code suivant au-dessus du code ]]></b:skin> :
   
   #tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
   ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
   ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
   ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
   html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
   .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
   .tabber{padding:10px 0}
   .tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
   .tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
   .tabber h2 a{color:#222}
   .tabber h2 a:hover{color:#026ab5}
   Note : La largeur principale-wrapper (post-colonne) est de 640 px, puis la largeur des onglets doit être de la même largeur, qui est de 640 px. donc vous pouvez ajuster la largeur de la main-wrapper sur votre modèle.  
   Et la largeur entre les onglet est de 2px (à droite et à gauche 1px), Alors le total de la largeur des onglets augmente avec les bordures épais 1px, donne 638 px de large. La largeur de chacun des posts ici 146 px, si votre modèle utilise une largeur "principale-wrapper" est plus petit, alors augmenter la largeur.
    
2.  L'étape suivante consiste à positionner 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/013120251122/tabview.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=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";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;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='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
   //]]>
   </script>
   Description:
   

   Messages rouge: Norah Jones, Diana Krall sont les titres des ongles du gagets, vous pouvez les modifier. Les chiffres couleur bleu (146 et 95) ci-dessus est la largeur et  la hauteur de la vignette sur la catégorie de poste, donc la taille réglable.

    
3. Ensuite, insérer le code suivant avant le code </body> :
   
   <script type='text/javascript'>
    //<![CDATA[
   jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
    //]]>
   </script>
4.  La prochaine étape est de savoir comment placer le gadget sur notre blog. Chercher le code et plaçer aprés : <div id='main-wrapper'>, puis placez le code suivant ci-dessous:
   <div id='tabber-wrapper'>
   <ul class='tab-view'>
   <li><a href='#tab1'><script>document.write(Title1);</script></a></li>
   <li><a href='#tab2'><script>document.write(Title2);</script></a></li>
   <li><a href='#tab3'><script>document.write(Title3);</script></a></li>
   <li><a href='#tab4'><script>document.write(Title4);</script></a></li>
   <li><a href='#tab5'><script>document.write(Title5);</script></a></li>
   <li><a href='#tab6'><script>document.write(Title6);</script></a></li>
   </ul><div class='clear'/>
   <div class='tab-wrapper'>
   <div class='tabber' id='tab1'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab2'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab3'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab4'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab5'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab6'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='clear'/>
   </div></div>
   Messages rouges dans le code ci-dessus sont les étiquettes ou les catégories, donc remplacer par votre propre catégorie en changant les titres des onglets pour les 6 numéros de l'étape ci-dessus.
   
   

   <!-- spacer for skins that want sidebar and main to be the same height-->
   <div class='clear'>&#160;</div>
    
   </div> <!-- end content-wrapper -->

5. Enfin, enregistrer et voir le résultat. 

 S'il vous plaît, s'il y a un probléme laissez un message dans les commentaires.
Bonne chance!!!