table des matières automatique par libellés

obtenir ces boutons

Créer automatiquement une table des matières


Rappel : LA PAGE PRÉCÉDENTE EXPLIQUE COMMENT CRÉER UNE TABLE DES MATIÈRES AVEC LES MESSAGES CLASSÉS PAR ORDRE ALPHABÉTIQUE : cliquer ici.

On peut aussi créer automatiquement une table des matières des messages regroupés par libellés.

Cette table affiche :
- par libellé, les TITRES des messages ;
- pour les 10 derniers messages : Nouveau !

En cliquant sur un titre, on affiche le message.

Exemple : cliquer ici (remarque : "Nouveau !" apparait après tous les messages car il y en a moins de 10).

Pour obtenir ce résultat,

1) créer une nouvelle "page statique" ;

2) coller le code suivant dans la version HTML de la page :

<script src="https://sites.google.com/site/rvdmarcrailcatrain/home/tablemataut1.js"> </script><script src="http://exemple-de-template.blogspot.com/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>

3) Remplacer "http://exemple-de-template.blogspot.com" par l'adresse du blog.

4) Enregister.

5) Si la page a été enregistrée sans onglet, créer un lien avec l'adresse de la page.

Comment créer un lien : cliquer ici.

En cliquant sur le lien vers la page, cette dernière s'affichera avec une table des matières.

On peut aussi insérer la table des matières dans le message d'accueil.

2 précisions :

1) Cela ne fonctionne qu'avec les blogs accessibles à tous.

2) Pour que cela fonctionne, il faut qu'il y ait au moins un libellé par message dont le titre doit être affiché : méthode : cliquer ici.

* * * * *
On peut corriger la mise en page (couleurs, taille des caractères, ... ) de ce gadget. La mise en page est déterminée par les lignes entre </style> et </style>.

* * * * *
ON PEUT VOULOIR N'AFFICHER LA TABLE DES MATIÈRES QUE POUR UN OU PLUSIEURS LIBELLÉ(S).

Quand on clique sur un libellé, tous les messages qui sont enregistrés avec ce libellé s'affichent sur une ou plusieurs pages.

Pour obtenir une table des matières des messages enregistrés avec un libellé, il faut modifier le template (modèle) afin que SEULS LES TITRES DES MESSAGES APPARAISSENT.

Comment modifier un template (modèle)

Il faut corriger le code du template comme suit : remplacer :

<b:include data='post' name='post'/>

par:

<b:if cond='data:post.labels'>
<a expr:href='data:post.url'> <data:post.title/></a>
<br/><br/>
<b:else/> <b:include data='post' name='post'/>
</b:if>


Seuls les titres des messages apparaîtront quand on cliquera sur le nom d'un libellé.

Avec l'adresse qui s'affiche en haut de l'écran, on pourra créer des liens vers cette table des matières que l'on placera où l'on veut : dans des messages ou une colonne latérale.

Comment créer un lien : cliquer ici.

* * * * *
Une autre méthode pour créer une table des matières PARTIELLE a pour inconvénient que les nouveaux messages devront être ajoutés manuellement par la suite.

Méthode :
- COPIER LA TABLE DES MATIÈRES AUTOMATIQUE.
- La coller dans un éditeur de textes qui permet de passer d'une version "Rédiger" en une version "html" (si on n'en dispose pas, on peut aussi copier le code-source de la page en effctuant "Ctrl + U").
- Afficher la version HTML.
- On obtient :
...
<div class="gfg-listentry gfg-listentry-even"><a href="http://lesbaroudeursss.blogspot.com/2012/02/le-sud-du-caillou.html">le sud du caillou</a></div></li>
<li>
<div class="gfg-listentry gfg-listentry-odd"><a href="http://lesbaroudeursss.blogspot.com/2012/02/noumea-et-ses-alentours.html">nouméa et ses alentours</a></div></li>
...
- Il suffit de supprimer les lignes superflues pour faire une table partielle qui pourra être intégrée dans une page ou un message.

18 commentaires:

angelique84 a dit…

bonjour est ce que c'est possible de modifier la taille de la police ?

Meiser a dit…

Bonjour.

Très facilement.

Il suffit de corriger "font-size:small;".

http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=small


~Melle Angèle~ a dit…

merci

Alix B a dit…

Merci beaucoup pour vos explications claires!

Babeth F-M a dit…

Merci à vous pour vos explications : j'ai enfin réussi (du premier coup) à mettre une table des matières dans mon blog. J'en suis très heureuse

Jean-François a dit…

Bonjour,

Je recherche la méthode pour créer une table des matières par mois et en français si possible. Merci !

Jean-François

Meiser a dit…

Bonjour.

Il suffit d'ajouter le gadget "Archives du blog".


†ιzzψ a dit…

Bonjour et merci pour vos conseils ;)
Je souhaiterais savoir si c'est possible de n'afficher que certain libellet et pas d'autre ? Merci d'avance

†ιzzψ a dit…

Bonjour et merci de votre réponse, je suis plutôt embêté car dans mon blog de streaming, chaque acteurs des films présents ont un libellet chacun, ce qui permet justement aux visiteurs de rechercher (dans la barre de recherche) tous les films d'un acteur en tapant son nom.

Donc si par le plus grand des hasards vous auriez toutefois un petit bout de code ou une explication me permettant de cacher chaque libellet du nom des acteurs et donc de ne garder que les genres (Animation, comédie, horreur, ...)
Je vous en serez très reconnaissant sinon je n'aurais d'autre choix que d'oublier ce gadget.

En espérant que vous m'ayez compris ^^ voici l'adresse de mon blog; http://tvkoolstream.blogspot.fr/

je ne suis pas un expert dans la matière, je me renseigne et finalement grâce à toutes vos astuces je pense avoir crée un blog pas trop mal. Dites moi ce que vous en pensez ;)

Merci à vous.

Meiser a dit…

Bonjour.

Ce que vous recherchez existe déjà :

http://modifier-les-modeles-de-blogger.blogspot.be/2009/11/liste-alphabetique-messages-meme-libelle.html


Charlotte a dit…
Ce commentaire a été supprimé par l'auteur.
Xavier Zanone a dit…

Bonjour,
Merci beaucoup pour tous ces conseils qui m'ont bien aidés.

Une petite question: peut-on diminuer le nombre de messages avec "Nouveau !" associé?

Merci de la réponse

Meiser a dit…

Bonjour.

Il faut corriger le programme se terminant par .js, le sauvegarder et changer dans le gadget le lien vers l'adresse de ce programme.

10 semble beaucoup au début mais se justifie par la suite.


JEAN LOUIS PRAT a dit…

Bonjour
Peut-on suprimer définitivement le mot "nouveau" dans la table des matières

Merci

Ronan Jezegou a dit…

Bonjour, merci pour ton article très pratique et bien détaillé.En affichant la table des matière sur une page de mon blog je me suis demandé si il était possible d'afficher les articles par ordre chronologique et non alphabétique?
Merci pour ton aide!

Meiser a dit…

Bonjour.

A Jean-Louis Prat et Xavier Zanone:
dans le programme .js, remplacer nouveau par un espace et sauvegarder ce programme avec un nouveau nom. On peut aussi remplacer le nombre 10 par 5 par exemple.


Machinette Véronique a dit…

Bonjour,

Je crois que je ne m'y prends pas bien.
Sur le template dynamique de blogger je n'y arrive qu'avec double click et pas très esthétique.

Merci tout de même pour vos explications car elles sont très complètes.

Bravo

Les Petits Pois sont Bleus a dit…

Bonjour,

Je cherche en vain une solution pour créer un sommaire sur mon blog, regroupé par libellé et qui se mette à jour automatiquement à chaque nouvelle publication.
J'ai testé votre script mais il ne fonctionne pas sur mon blog (page blanche).
Cela peut-il être lié au fait que j'ai un nom de domaine et pas une adresse native Blogger ?