Blogger - Blogspot : widget affichant les derniers articles avec thumbnails

Vous l'aurez sûrement remarqué, vos visiteurs arrivent généralement sur une page de votre site plutôt que directement sur votre page d'accueil, où sont regroupés vos articles les plus récents - et donc probablement les plus intéressants du moment. Rien de tel qu'un petit widget qui affiche vos articles récents, avec leur image miniature, pour retenir l'attention des visiteurs et les inviter à poursuivre leur visite sur votre site.

Vous l'aurez peut-être remarqué aussi, s'il existe de nombreux widgets de type Recent articles, Derniers articles, Articles récents, qu'il soient avec thumbnails, sans miniatures, agrémentés d'extraits ou avec d'autres options... il est quand même difficile de trouver un widget ou un script qui ne fasse nullement appel à une page externe. Se cache toujours dans le code quelque part, un appel à une bibliothèque javascript externe ou des liens indésirables mais bien dissimulés.

Or, faire appel à un script externe peut se révéler, à la fois dangereux, mais aussi et surtout délétère : rien ne dit que le script externe sera disponible éternellement, et 24h/24. L'une des solutions consiste tout simplement à appeler le flux rss de votre blog, cela ne prend que 30 secondes et vous aurez les titres de vos derniers articles dans un widget tout simple, disponible sur toutes vos pages. Cela dit, vous souhaiteriez peut-être disposer d'autres options, et par exemple, afficher des extraits ou des images miniatures de vos derniers articles, dans votre widget d'articles récents.

Aussi, je vous livre ici tout ce qu'il faut pour créer votre widget Articles Récents, on ne peut plus simplement, en utilisant les fonctionnalités natives de Blogger, et un simple code à copier-coller dans un widget HTML/Javascript.

Notez que certaines options seront disponibles, à charge pour vous de modifier les variables de sortes qu'elles vous permettent d'afficher vos derniers articles tel que vous le souhaitez. On commence par le code, les explications viendront en dessous. Copiez le code suivant dans un widget HTML/javascript (pas dans un article, ça, c'est interdit ) puis enregistrez.

<style type='text/css'>
img.recent_thumb {padding:1px;width:50px;height:50px;border:0;
float:left;margin-right:5px;}
.recent_posts_with_thumbs {float: left;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;margin-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {}</style>
<script style='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1h0jj_08DtB7hvxxdXp_Xeyc65Kxvc_VERRzLpsBK9tE5CqN9pWDjGive3VcvMoa8C9T-c7IBZ5fvH9tOvy3FAdYGdDxBI7NPevOH-pKAaUE53HCjwyimY8b72QgE97UIEgQC0x8wpSw/s72-c/dico146.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top"><b>Lire -></b></a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.psyblogs.net' target='_blank'>Widget récents articles</a></small>

Vous pouvez modifiez les variables en fin de code pour customiser votre widget comme il vous plaira.

var numposts correspond bien entendu au nombre de posts à afficher dans le widget, par défaut, 5.
var numchars correspond à la longueur de l'extrait, en nombre de caractères.

Les variables suivantes (booléennes) prennent soit la valeur true (oui) soit false (non)

var showpostthumbnails = true; var displaymore = true; var displayseparator = false; var showcommentnum = false; var showpostdate = true; var showpostsummary = true;

--- montrer les images miniature --- montrer un lien "lire" (la suite) --- montrer un séparateur entre les articles --- montrer le nombre de commentaires --- montrer la date des articles --- montrer un résumé des articles

Notez que le widget comprend un lien non invasif écrit en petit caractères pour permettre à vos visiteurs de trouver et d'utiliser ce widget s'ils le désirent. Merci de conserver ce lien, surtout si le code vous est utile! Vous êtes autorisé à copier le code pour vous en servir dans un widget sur votre site, et ainsi afficher vos derniers articles, mais PAS pour afficher ce code sur votre propre site. Si vous voulez proposer le code à vos visiteurs, alors faites un lien vers cette page sans mettre à disposition le code, merci!

N'hésitez pas à laisser un commentaire si le code vous pose problème.. Une version française est disponible si vous me la demandez via la page de contact (mais bon, seuls les mois et les comments sont en anglais)