Savoir-Faire | Blog

Aujourd’hui je vous présente un des meilleurs widgets du blog: Un widget qui affiche les Articles Récents avec une image.

Ce widget utilise le même code que celui de l’ancien widget des articles récents publié il y a quelque temps sauf qu’il affiche, en plus du titre de l’article, une image (la première image de l’article) mais égalament le résumé et le nombre de commentaires.

Update Novembre 2012

Mon serveur où j'hébergeais le script en dessous a été bloqué par mon hébergeur parce qu'il utilise trop de ressources.
J'ai corrigé le problème et désormais rien n'est hébergé sur mon serveur et vous allez ajouter la totalité du code dans votre blog.
Il faut donc mettre à jour le code présent dans votre blog...

Installation

Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier / coller le code suivant :

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 360;
cellspacing = 2;
borderColor = "#FFF";
bgTD = "#000000";
thumbwidth = 32;
thumbheight = 32;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Commentaires";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 7;
home_page = "http://www.leblogger.com/";
</script> <script type="text/javascript">function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){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);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');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=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

Personnalisation

boxwidth – Largueur du Widget
cellspacing – Espace entre les Titres
borderColor – couleur de la bordure du widget
borderColor - couleur de l'arrière plan 
thumbwidth & thumbheight – largeur et longueur de l’image.
fntsize – Taille du texte.

acolor – Couleur des Titres
aBold - Texte gras (true ou false)
numposts – Nombre d’articles affiché
Blog_URL : l’adresse de votre blog