Classer & Présenter les articles

L'essence même du blog est la publication d'articles (ou post ou billet) qui se succèdent dans un ordre antéchronologique, c'est-à-dire du plus récent au plus ancien.

Parfois, il peut être nécessaire et/ou utile de mettre en avant un ou plusieurs articles pour les positionner en tête du blog, afin qu'il soit facilement vu, cas d'un éditorial, d'articles importants... 

Les raisons peuvent être variées mais la mise en valeur d'un ou plusieurs articles spécifiques permet aux visiteurs de lire l'essentiel de votre blog très rapidement, sans recherches inutiles, C'est donc aussi un moyen d'apprécier votre blog, et d'y revenir. 

1-Avant le nouveau Blogger : possibilité de  classer des articles

En principe lors de l'édition d'un article, on conserve la date par défaut ("Automatique"). Vous pouviez aussi modifier la date de publication : 

• si vous postdatez : l'article sera publié ultérieurement uniquement à la date indiquée

• si vous antidatez : l'article sera publié immédiatement, mais en respectant l'ordre antéchronologique, donc il ne sera probablement pas visible sur votre page d'accueil)

• si vous modifiez plus tard la date, après l'enregistrement de l’article : cela permettait  de modifier l'ordre d'affichage des articles, ainsi il était possible de laisser un même article toujours en tête du blog en lui mettant une date fictive (année suivante), utile pour faire un éditorial par exemple. 

Mais le nouveau Blogger 2020 ne permet plus de modifier l'ordre des des articles en les post-datant après publication. Vraiment dommage, d'après les responsables de Blogger, il s'agissait d'un "bug" qui a donc été corrigé, mais reconnaissons que ce bug était bien utile.

 Désormais, seule solution : insérer un gadget HTML avant vos articles.

2-Nouveau Blogger  2020 : comment classer des articles ?

Il s'agit de mettre en valeur (en tête de liste) un article spécifique

2-1  Mettre un article  en avant  => l'afficher en tête

• Utiliser le widget "Sélection de Message"  devenu "ARTICLE EPINGLE" ("Featured Post")
  Vous pourrez mettre en avant un de vos articles, à un  endroit du blog, selon votre sélection de positionnement du gadget, le plus souvent ce sera, dans le bloc "principal", au-dessus des articles, ainsi cette article sera affiché en permanence  en tête de  votre blog, très  utile pour afficher un éditorial ou tout autre article  à mettre en évidence.
  A SAVOIR : vous ne pouvez utiliser ce widget qu'une seule fois !
  
  

Aller dans Mise en Page

Puis ajouter un "Gadget" et choisir  "Article épinglé"

Configurer le gadget

La configuration est simple  à comprendre:
- définir le titre
- définir le contenu qui doit apparaitre

-sélectionner l'article concerné : le plus récent  ou un autre article (la liste s'affichera pour  faire la sélection)

puis positionner le gadget au bon endroit (par glisser/déposer), par exemple dans le bloc "principal", au-dessus de "Articles du Blog"

et n'oubliez pas d'enregistrer !

A SAVOIR : ce widget ne peut être utilisé qu'une seule fois, Blogger vous avertit

• Utiliser le widget "HTML/Javascript" 

Ce widget peut contenir texte, images... comme un article. Aussi vous pouvez dans ce gadget rédiger  un (court) article ou copier/coller le code HTML d'un article que vous voulez mettre en évidence.

Vous positionnerez ce widget, dans le "bloc principal"  afin qu'il soit présent en tête. Rien ne vous empêche d'en mettre plusieurs.

Résultat :  2 articles sont affichés en tête

3-D'autres possibilités de présentation d'articles 

Il s'agit de mettre en valeur certains articles de votre blog : soit les derniers articles publiés, soit une sélection spécifique d'articles

3-1 Afficher une liste des articles les plus récents

Il s'agit d'afficher une liste des articles les plus récents du 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 ou au-dessus des articles. (possibilité de la placer dans un article ou une page)  

Ci-dessous les 5 derniers articles publiés  sont mis en valeur 

code HTML à copier/coller dans le gadget

<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 : 
- 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;).

3-2 Afficher et mettre en avant une sélection d'articles avec vignette

Il s'agit d'afficher une liste d'articles pré sélectionnés et triés via un même libellé dans un gadget d'une colonne latérale ou au-dessus des articles. (possibilité de la placer dans un article ou une page) 

Ci-dessous 5 articles sont mis en valeur  (ils ont tous  un même libellé)

Il suffit d'ajouter le code  HTML suivant :

<style type='text/css'> .articles_alphas {list-style-type: none;float: left;width: 100%;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.articles_alphas li {padding-bottom:5px;padding-top:5px;border-bottom:black dotted 1px;min-height:40px;} .articles_alphas a {text-decoration:none;} .articles_alphas strong {font-size:10px;} img.article_alpha {padding:0px 1px;width:55px;height:40px;border:0; float:left; margin:0px 10px; margin-top:0px;} </style> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > ARTICLES IMPORTANTS A LIRE:</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL du blog/feeds/posts/default/-/libellé"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/libelle_ordre_alpha_im.js"></script> </div>                            

Adaptations :

Ligne : home_page = "URL du blog/feeds/posts/default/-/libellé";   (4°ligne à la fin du code)
1)  Il faut remplacer "URL du blog" par l'URL nom du blog concerné
2) A la fin de la même ligne, remplacer "libellé" par le nom du libellé 

3) On adaptera le texte  "ARTICLES A LIRE" par articles importants, essentiels... selon vos désidératas
3) On peut changer le nombre de lignes : var nb_lignes_aff=10;
4) Pour corriger la marge à gauche, modifier "margin-left: 10px; (2x): le nombre peut être positif (:10px;) ou négatif (:-10px;).

pour obtenir la même chose sans les images/vignettes

  <style type=text/css>li{list-style-type: none;}.affichage {margin:0px;padding:0px;text-decoration:none;font-size:14px;}.affichage a {text-transform: capitalize;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > ARTICLES A LIRE: :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL du blog/feeds/posts/default/-/libellé"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/libelle_ordre_alpha.js"></script></div> <div style="border-top: 1px dotted;"> </div>  

3-3 Créer diverses tables des matières automatique

Il s'agit de  créer une table des matières qui  affiche les titres des messages du blog par ordre alphabétique  et qui se met mettre à jour automatiquement.

METHODE
-Copier coller en mode HTML dans un article (ou une page)  le code indiqué
-Il suffit d'ajouter dans le code l'URL du blog concerné à lal igne :
home_page = "URL NOMDUBLOG";
-On doit aussi changer le nombre de lignes : var nb_lignes_aff=10;

• LISTE ALPHABETIQUE des ARTICLES
<style type=text/css>li{list-style-type: none;}.affichage {margin:0px;padding:0px;text-decoration:none;font-size:14px;}.affichage a {text-transform: capitalize;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > TABLE DES MATIÈRES :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL NOMDUBLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_alpha.js"></script></div> <div style="border-top: 1px dotted;"> </div>

=>Un  autre code en javascript

• LISTE ALPHABETIQUE des ARTICLES + ILLUSTRATION  issue de l'article

<style type='text/css'> .articles_alphas {list-style-type: none;float: left;width: 100%;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.articles_alphas li {padding-bottom:5px;padding-top:5px;border-bottom:black dotted 1px;min-height:40px;} .articles_alphas a {text-decoration:none;} .articles_alphas strong {font-size:10px;} img.article_alpha {padding:0px 1px;width:55px;height:40px;border:0; float:left; margin:0px 10px; margin-top:0px;} </style> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > TABLE DES MATIÈRES :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=10; home_page = "URL NOM BLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_alpha_im.js"></script> </div>

• LISTE DES ARTICLES PAR ORDRE CHRONOLOGIQUE
  même principe, les articles sont classés par ordre chronologique (le plus ancien d'abord)
• <style type=text/css>li{list-style-type: none;}.affichagenom {margin:0px;padding:0px;text-decoration:none;font-size:14px;}.affichagenom a {text-transform: capitalize;}.affichagedate {color:black;margin:0px;padding:0px;text-decoration:none;font-size:12px;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > LISTE DES MESSAGES PAR ORDRE CHRONOLOGIQUE :</div> <div style="margin-left: 10px;"> <script language='JavaScript'> car_gras = true; nb_mess=300; nb_lignes_aff=10; adresse_blog = "NOM URL DU BLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_chrono.js"></script></div> <div style="border-top: 1px dotted;"> </div>

• LISTE DES ARTICLES CLASSES PAR LIBELLES
idem avec articles regroupés par libellés (mots clés) avec le mot "Nouveau !" pour les 10 derniers messages


<script src="https://sites.google.com/site/rvdmarcrailcatrain/home/tablemataut1.js"> </script><script src="URL NOM BLOG/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script><script type="text/javascript">var accToc = true;</script><style type='text/css'> .post {color:black;font-size: small;line-height: .9;font-weight:bold;} .post a:link {text-decoration:none;color:#2288bb;font-weight:normal;font-size: small;line-height: .9;} .post a:visited {text-decoration:none;color: #888888;font-weight:normal;font-size: small;line-height: .9;} .post a:hover {text-decoration:underline;color: #33aaff;font-weight:normal;font-size: small;line-height: .9;} </style>

• LISTE DES ARTICLES LES PLUS COMMENTES 
  
  

<style type=text/css>li{list-style-type: none;}.affichage {margin:0px;margin-left:-30px;padding:0px;text-decoration:none;font-size:14px;}.affichage a {text-transform: capitalize;}</style> <div style="border-top: 1px dotted;"> </div> <div style="margin-left: 10px;font-weight: bold; color:black;font-size:20px;padding-top:5px;" > ARTICLES LES PLUS COMMENTÉS :</div> <div> <script language='JavaScript'> car_gras = true; nb_mess=200; nb_lignes_aff=5; home_page = "URL NOMDUBLOG"; </script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_par_nb_comm.js"></script></div> <div style="border-top: 1px dotted;"> </div>

Adaptations :
1-Il faut remplacer "URL NOMDUBLOG" par l'adresse du blog concerné ;
2-On peut changer le nombre de lignes : var nb_lignes_aff=5;
3-Pour corriger la marge à gauche, modifier "margin-left: -30px;" et "margin-left: 10px; : le nombre peut être positif (:10px;) ou négatif (:-10px;).

Sources et compléments

Scripts HTML  http://modifier-les-modeles-de-blogger.blogspot.com/2010/02/index-alphabetique.html

Google-Blogger : https://support.google.com/blogger/thread/56671456?hl=en