Une table des matières interactive

Aujourd’hui, permettez-moi de vous montrer comment insérer une table des matières interactive pour votre blog. J’en avais installé une dans le premier modèle que j’utilisais, ce qui offrais la possibilité aux visiteurs de cliquer sur le mot « afficher la table des matières » pour voir la liste des articles ainsi que leurs libellés apparaître juste au-dessus de la colonne contenant les messages du blog. Table des matières que l’on peut encore cacher en cliquant sur « Hide table of contents ». Vous pourrez en voir une démonstration sur le blog de Hans qui est d’ailleurs le concepteur de l’astuce.

Pour ajouter une table des matières à votre blog, vous devez :

1. Gardez une copie de votre modèle

2. Ajoutez un widget HTML/JAVASCRIPT juste au-dessus du bloc de message

Pour cela, allez dans votre modèle, sur « modifier le code html » et là cochez développer des modèles de gadget. Trouvez la ligne de code suivante

<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>

changez la par celle-ci

<b:section class='main' id='main' maxwidgets='4' showaddelement='yes'>

Après avoir enregistré votre modèle, vous pourrez aller sur « éléments de la page » et là vous verrez juste au dessus du widget pour le message de blog, un widget où cliquez pour ajouter un nouvel élément. Ajoutez un élément HTML/JAVASCRIPT ».

Ajoutez le code suivant dans ce widget HTML/JAVASCRIPT

<div id="toc"></div>

Sauvegardez les modifications.

3. Ajoutez un widget HTML/JAVASCRIPT à votre colonne latérale que vous pourrez nommer « TABLE DES MATIERES »

Mettez-y le code suivant :

<div id="toclink"><a href="javascript:showToc();">Afficher la table des matières</a><br/><br/></div>

<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>

<script src="http://VOTREBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Remplacez VOTREBLOG par le nom de votre blog. Vous remarquerez aussi qu'il y a une limitation pour n'afficher que 999 articles. Si vous en avez plus, vous pouvez toujours changer le nombre pour voir ce que ça donne. Sinon, n'ayant aucun blog avec autant d'articles, je n'ai pu essayer la combine.

4. Ajoutez encore les codes suivants juste dans le widget html de l'étape précédente

<style type="text/css">

#toc {

border: 0px solid #000000;

background: #ffffff;

padding: 5px;

width:500px;

margin-top:10px;

}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {

background: #ffd595;

color: #000000;

padding-left: 5px;

width:250px;

}

.toc-header-col2 {

width:75px;

}

.toc-header-col3 {

width:125px;

}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {

font-size:80%;

text-decoration:none;

}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

font-size:80%;

text-decoration:underline;

}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {

padding-left: 5px;

font-size:70%;

}

</style>

et sauvegardez les modifications.

Vous pouvez changer les couleurs de l'entête de chacune des 3 colonnes, si vous vous-y connaissez un peu.

Vous avez maintenant une table des matières interactive pour votre blog.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.