articles récents

obtenir ces boutons

Afficher une liste des articles les plus récents

Comme ci-dessous, on peut très facilement afficher une liste des articles les plus récents d'un blog (avec, au choix : une image, un résumé, le nombre de commentaires et un lien "Lire la suite ...") dans un gadget d'une colonne latérale. ON PEUT AUSSI LA PLACER DANS UN MESSAGE OU UNE PAGE AUTONOME ("statique"), où on aura plus de place, COMME TABLE DES MATIÈRES DES ARTICLES LES PLUS RÉCENTS. On peut enfin ajouter une liste dans un gadget ET dans un message ou une page.

ARTICLES LES PLUS RÉCENTS :

Pour obtenir cela, il suffit d'ajouter le code suivant dans un gadget HTML/JavaScript :
<style type='text/css'>
.articles_recents {list-style-type: none;float: left;width: 100%;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.articles_recents li {padding-bottom:5px;padding-top:5px;border-bottom:black dotted 1px;min-height:45px;}
.articles_recents a {text-decoration:none;}
.articles_recents strong {font-size:10px;}
img.article_recent {padding:1px;width:55px;height:40px;border:0; float:left; margin:0px 10px; margin-top:0px;}
</style>
<div style="margin-left: 15px;font-weight: bold; color:black;font-size:20px;" >
ARTICLES LES PLUS RÉCENTS :</div>
<div style="margin-left: 10px;line-height:15px;" >
<script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/articles_recents.js"></script><script style='text/javascript'>var nbmess = 5;var aff_images = true;var aff_lire_suite = true;var aff_nb_comm = true;var aff_date = true;var aff_resum = true;var aff_nb_car = 100;</script><script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div>
<div style="clear:both;" >
</div>

Adaptations :
1) Options : on peut :
- changer le nombre de messages : var nbmess = 5;
- ne pas afficher les images : var aff_images = false;
- ne pas afficher "lire la suite" : var aff_lire_suite = false;
- ne pas afficher le nombre de commentaires : var aff_nb_comm = false;
- ne pas afficher les dates : var aff_date = false;
- ne pas afficher les résumés : var aff_resum = false;
- changer le nombre de caractères du résumé : var aff_nb_car = 100;
2) Pour corriger la marge à gauche, modifier "margin-left: 15px;" et "margin-left: 10px; : le nombre peut être positif (:10px;) ou négatif (:-10px;).

Rappel : Comment créer un gadget HTML/JavaScript.

9 commentaires:

SOPHROLOGIE HARMONIE a dit…

Bonjour,
Avant tout, merci de votre excellent site et tout ce que vous faites pour aider les blogueurs en peine.
Je viens d’installer dans un gadget html votre programme "articles récents" il fonctionne très bien sur mon site d'essai http://sophrologieessai.blogspot.fr/.
Par contre sur mon site officiel, il affiche le titre du gadget mais aucun résumé des mes derniers articles.http://www.sophrologieharmonie.fr/.
Manip faites : directement votre programme sans rectifs : rien.
Copier/coller du blog essai vers officiel rien aussi.
Avez vous une idée sur la raison du non fonctionnnement sur site officiel ?
Merci de votre aide
Cordialement
Daniel

Meiser a dit…

Bonjour.
L'intérêt de ce site est de proposer des codes qui s'appliquent en quelques secondes et peuvent donc être testés aisément.
Merci de communiquer les problèmes rencontrés.
Il peut y avoir des incompatibilités venant de certains TEMPLATES ou navigateurs. Avez-vous le même template et si oui les mêmes modifications éventuelles ? Si ce n'est pas le cas, pouvez-vous récupérer le template du blog d'essai ?


SOPHROLOGIE HARMONIE a dit…

Merci de votre réponse.
Oui même template et memes mofications.
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com.
Fait divers essais. Supprimé le gadget html sur blog essai pour le mettre que sur blog officiel, rien à faire il ne veut fonctionner que sur le bog essai. J'ai essayé d'autres gadgets divers en html tous fonctionnent sauf "articles récents" ?????????


Meiser a dit…

Bonjour.

Il peut rester des différences après des corrections dans le template.

Vous pouvez essayer de le changer par copier-coller en cliquant surtout sur "aperçu" avant d'enregistrer :

Explications : point 2 de :
http://modifier-les-modeles-de-blogger.blogspot.be/2011/05/changer-de-template-modele.html


Babeth F-M a dit…

Bonjour
Encore merci à vous pour vos explications qui m'ont permis d'ajouter ce gadget sans aucun problème, en en modifiant même le nombre (j'ai mis 8 articles au lieu des 5 par défaut)
Mes deux blogs "Blogger" se sont beaucoup améliorés dans leur présentation grâce à vous ... et moi, j'adore les gadgets !!!!

sango yacongo a dit…

Bonjour; ce gadegt ne fonction que sur mon blog d essai; si je met ça sur mon site web; sa ne s affiche pas

Trente5 a dit…

Bonjour, d'abord, merci pour votre aide. Je trouve ce gadget super. Par contre je viens de rencontrer un pb qui rejoint un peu le pb mentionné par Daniel dans le premier commentaire.
Le gadget fonctionnait très bien sous l’ancienne url de mon site : blogspot.trente5.com. Ce matin, je suis passé en www.trente5.com et le gadget ne fonctionne plus, seul le titre s'affiche.
Avez vous une idée ? (mon feed fonctionne bien lui)
d'avance, merci pour votre aide :-)

Meiser a dit…

Bonjour.

Vous avez transformé votre blog en site internet avec un nom de domaine. J'ignore comment rendre ce gadget compatible. Si vous avez le temps, il faudrait rechercher une solution dans un forum sur internet.


LaChataigne a dit…

Bonjour,
Petit commentaire pour vous remercier pour votre article qui m'a énormément aidée :)