table des matieres automatique avec images

obtenir ces boutons

Créer et mettre à jour automatiquement
une table des matières avec images

Liste des messages par ORDRE ALPHABÉTIQUE

Comme ci-dessous, on peut très facilement créer et mettre à jour AUTOMATIQUEMENT une table des matières, en affichant les titres des messages du blog par ordre alphabétique dans une page autonome ("statique") ou un message. Par rapport à la page précédente, cette page affiche en plus, par message, une image contenue dans ce message.

TABLE DES MATIÈRES :


LA PAGE SUIVANTE EXPLIQUE AUSSI COMMENT CRÉER UNE TABLE DES MATIÈRES, MAIS AVEC LES MESSAGES REGROUPÉS PAR LIBELLÉS : cliquer ici.

Pour obtenir la table des matières affichée ci-dessus, il suffit d'ajouter le code suivant dans la version HTML d'une page statique ou d'un message :
<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 = "http://www.southernspeakers.net/";
</script><script style="text/javascript" src="https://sites.google.com/site/rvdmarcrailcatrain/home/mess_ordre_alpha_im.js"></script>
</div>

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

16 commentaires:

Serge a dit…

Bonjour, J'aimerais mettre cette table des matières uniquement en page d'accueil, est-ce possible ?

Merci pour votre aide

Serge a dit…

"Comme ci-dessous, on peut très facilement créer et mettre à jour AUTOMATIQUEMENT une table des matières, en affichant les titres des messages du blog par ordre alphabétique dans une page autonome ("statique")"

Il faut préciser Statique mais pas avec adresse web car non éditable ;)

Audrey P a dit…

Bonjour,
est il possible de créer un sommaire par label ? avec une page par label ?
Merci pour votre blog qui est très instructif !
Audrey

Al Capone a dit…

Bonjour et merci pour vos tutoriaux très utiles.
J'aimerais savoir s'il est possible de créer ce type d'index (automatique avec images) avec des libellés. J'ai utilisé ce code qui recense tous les billets de mon blog. Or j'aimerais ne faire apparaître que certains billets et pas la totalité mais en gardant une image.
Merci par avance pour votre réponse.

Autrefois la lumière a dit…

Est ce automatique, immédiat ?
car ne semble pas fonctionné sur mon blog ...
Merci de votre aide.

Autrefois la lumière a dit…

Ca fonctionne maintenant mais peut on ajouter un code pour ouvrir les liens dans un nouvel onglet ?
Merci

Meiser a dit…

Bonjour.

Il faudrait corriger le programme.

On peut aussi essayer le code disponible sur ce site et qui ouvre toutes les pages dans un nouvel onglet.

Garder la même page permet de ne pas laisser ouvertes des dizaines de pages qu'il faut refermer en quittant le blog.

Avec le gadget sur cette page, on peut toujours revenir en arrière en cliquant sur la flèche vers la gauche en haut à gauche.


Machinette Véronique a dit…

Bonjour encore,

Est il possible que ce soit la faute des vues dynamiques la raison pour laquelle je ne peux accéder ni à la table des matières par libellés ni à celle par images ?

Merci

Meiser a dit…


Bonjour.

Consultez cette page :

http://modifier-les-modeles-de-blogger.blogspot.be/2011/10/affichages-dynamiques-de-blogger.html


Charlotte a dit…

Bonjour,
j'aimerais personnaliser cette table des matières en supprimant les titres pour afficher uniquement les images et sous formes de tableau (lignes et colonnes d'images) est-ce possible ? Si oui, comment... Et j'aimerais aussi afficher cette table des matières par ordre chronologique et non par ordre alphabétique, est-ce possible ?
Merci d'avance pour votre aide et bravo pour votre site qui regorge de conseils géniaux !
Charlotte Blogueuse

Meiser a dit…


Bonjour.

Pour faire cela il faut modifier le programme ...

Mais vous pouvez aussi utiliser un template "dynamique" de Blogger qui semble correspondre à ce que vous souhaitez.


Alexandra Y. a dit…

Bonjour,
Votre programme pour un sommaire en image ne fonctionne plus,
Avez vous une version à jour ?
Merci

Joe Sim a dit…

Bonjour,
est il possible de créer un sommaire par label avec des images? ? J'ai essayé de combiné et ça n'a pas fonctionné... merci beaucoup!

Meiser a dit…

A Alexandra Y

Bonjour.

Il fonctionne toujours puisqu'il est utilisé pour afficher les images dans l'article ci-dessus.


Aurélie Mo a dit…

Bonjour,

J'ai créé une nouvelle page sur la colonne de droite.
J'ai copié-collé le code donné ici plus haut, j'ai enregistrer.

Quand je vais sur le blog, rien ne se passe : juste le titre en gras, mais c'est tout.

Pouvez-vous m'aider ?

Merci
http://yellowmustard5.blogspot.be

Aurélie Mo a dit…

Petite précision : l'index pour les libellés fonctionne parfaitement, mais pas celui en classement par ordre alphabétique, ni celui en ordre alphabétique avec images !