Comment créer une table des matières automatique ou manuelle dans Blogger ?

La table de matière est une liste organisée des principaux titres d'un article, elle est généralement placée soit au commencement ou après quelques lignes d'introduction.

Quels sont les avantages de l'installation d'une table des matières dans vos articles ?

Premièrement, inclure un sommaire ou une table des matières dans vos articles est le meilleur moyen pour optimiser la navigation et améliorer l'expérience utilisateur. Elle donnera à votre blog un air professionnel et organisé.

En plus d'être très appréciée par les internautes, cette fonctionnalité facilite l'accès à l'information en particulier, notamment lorsque vous rédigez des articles longs de plus de 3000 mots.

Le sommaire a pour autre avantage de booster le référencement de vos articles pour les moteurs de recherche, surtout s’ils sont bien structurés avec des titres et sous-titres qui contiennent des mots-clés pertinents.

Vous avez la possibilité de l'ajouter dans Blogger soit manuellement ou automatiquement. L'option automatique ne signifie pas qu'elle apparaitra dans chacun de vos articles, vous aurez toujours le choix de l'inclure ou non selon vos besoins.

Créer un sommaire automatique dans Blogger

Première méthode

Cette table de matière automatique va chercher les titres <h2> (<h2>Votre titre</h2>) automatiquement dans votre article. Ils seront ensuite rassemblés dans une jolie table à l'endroit où vous le souhaitez.

Son fonctionnement ressemble à celui de la fameuse encyclopédie Wikipédia.

Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.

Cliquez sur "Thème"> "Modifier le code HTML"
Une boite contenant le code HTML de votre thème s'affichera
Cliquez n'importe où à l'intérieur du code HTML
Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à droite.
Cherchez la balise </head>
Insérez le code suivant au-dessus la balise </head>


  //<![CDATA[      

  //*************TOC plugin by MyBloggerTricks.com      

  function mbtTOC() {var mbtTOC=i=headlength=gethead=0;      

  headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)      

  {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'blogk';} else {mbt .style.display = 'none';}}      

  //]]>       

  </script>

Maintenant, on va ajouter quelques éléments de style afin de personnaliser notre sommaire.

Insérer le code suivant juste au-dessus de la balise ]]></b:skin>


/* Table des matières - Univers Blogger */

.mbtTOC{border:5px solid #eee9e9; /*le style et la couleur de la bordure */ 

 box-shadow:1px 1px 0 #e3dede;   

 background-color:#fafafa;  /* Changer la couleur de l&#39;arrière plan (le fond) de votre table*/ 

 color:#707037;   

 line-height:1.4em;   

 margin:30px auto;   

 padding:20px 30px 20px 10px;    

 font-family:open sans, arial;display: block;   

 width: 85%;}    

 .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}      

 .mbtTOC ul {list-style:none;}      

 .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0;    

 margin:0 0 -6px 3px;font-size:15px;}      

 .mbtTOC a{color:#0080ff;text-decoration:none;}      

 .mbtTOC a:hover{text-decoration:underline; }     

 .mbtTOC button{background:#fafafa;    

 font-family:open sans, arial; font-size:20px;   

 position:relative;    

 outline:none;cursor:pointer; border:none;font-weight: bold;text-transform: uppercase;

letter-spacing: 1px;color:#000;padding:0 0 0 15px;}      

 .mbtTOC button:after{content: &quot;\f0dc&quot;;    

 font-family:FontAwesome; position:relative;    

 left:10px; font-size:20px;}

Vous devez ensuite chercher le code <data:post.body/> dans votre barre de recherche

Vous allez probablement le trouver à plusieurs reprises dans le code HTML de votre thème, donc remplacez-le à chaque fois par le code suivant :


<div id="post-toc"><data:post.body/></div>

Sauvegardez les modifications apportées à votre thème.

À présent on va voir comment activer la table des matières, car comme je vous ai déjà expliqué en introduction, elle ne sera pas générée dans chaque article rédigé.

Si vous souhaitez l'afficher dans un article déterminé, il suffit d'insérer un morceau de code dans le volet HTML lors de l'édition de l'article.

Quand vous aurez fini de rédiger votre article, basculez vers le mode "HTML" pour activer l'affichage de votre table de matière.

Première étape

Insérez le code d’activation là où vous souhaitez voir paraitre la table des matières. Dans notre exemple, on va l'afficher juste après l’introduction et avant le premier titre principal comme monter dans l'image qui suit :

Astuce : avant d'ajouter le code d'activation dans le mode HTML de votre article, vous pouvez marquer l'endroit d'abord dans le mode visuel ou "Rédiger" pour faciliter l'insertion.

Dans l'exemple, je l'ai marqué avec le texte surligné "Je souhaite afficher ma table de matière ici".

Deuxième étape

Dans le mode HTML, insérez le code qui suit à l'endroit que vous avez marqué auparavant.


<div class="mbtTOC">    

   <button onclick="mbtToggle()">Table des matières</button>    

   <ul id="mbtTOC"></ul>    

   </div>

Repérez

Remplacez

Troisième étape

Dans la ligne du code d'activation

<button onclick="mbtToggle()">Sommaire</button>

Vous pouvez remplacer "Sommaire" par un autre nom de votre choix, par exemple "Table des matières" ou "Navigation rapide".

Quatrième étape

Il ne nous reste plus qu’à ajouter une dernière ligne de code pour finir l'activation du sommaire à la fin du code HTML de notre article.


<script>mbtTOC();</script>

Cette table des matières automatique a été développée par MyBloggerTricks.com. J'ai pris le soin de la personnaliser en ajoutant quelques propriétés CSS.

Maintenant que vous savez ajouter une table de matière automatique à vos articles, on abordera dans la prochaine section le procédé d’ajout manuel.

Deuxième méthode

Copier les codes CSS et JavaScript qui suivent avant la balise </head> ou </body>

Code CSS :


<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>

Code JavaScript :


<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 1) { 
 // Hanya Tampil Jika Ditemukan Minimal 2 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';
 
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Vous devez ensuite chercher le code <data:post.body/> dans votre barre de recherche, vous allez probablement le trouver à plusieurs reprises (généralement à trois reprises) dans le code HTML de votre thème. Remplacez le troisième code par le code qui suit :


<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Sommaire [<a id='bwstocLink' onclick='bwstocShow()'>Afficher</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div>

Astuce : En cas d'échec, remplacer à tour de rôle les autres codes <data:post.body/>

Le code JavaScript permettra de rassembler automatiquement tous les titres </h3>et </h4> de votre article Blogger pour les afficher dans le sommaire.

Comment ajouter une table des matières à ses articles manuellement dans Blogger ?

La table des matière manuelle va chercher les titres principaux h2 (<h2>Votre titre</h2>) de votre article.

Cliquez sur "Thème"> "Modifier le code HTML"
Une boite contenant le code HTML de votre thème s'affichera
Cliquez n'importe où à l'intérieur du code HTML
Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à droite.
Cherchez la balise </body>
Insérez le code suivant au-dessus la balise </body>


<script type='text/javascript'>          

//<![CDATA[          

$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});

//]]>          

</script>

Ajoutez ensuite ce code CSS pour personnaliser le design de la table des matières

Copier-coller le code qui suit au-dessus de la balise ]]></b:skin>


/* TDM Univers Blogger */

#tdm-ub{border-radius:3px;padding:10px 20px;border: 5px solid #eee9e9;box-shadow: 1px 1px 0 #e3dede;background-color: #fafafa;color: #707037;line-height: 1.4em;margin: 30px auto;font-family: open sans, arial;display: block;width: 85%;}

#tdm-hd{background: #fafafa;font-family: open sans, arial;font-size: 20px;position: relative;outline: none;border: none;font-weight: bold;text-transform: uppercase;letter-spacing: 2px;color: #000;padding: 0 0 0 15px;}

#tdm li{background:transparent;margin:.2em 0 .2em 1em;padding: 4px 0px 0px 15px;font-size: 15px;}

#tdm ol li:before{left:-2em}

#tdm li a {color:#0080ff;text-decoration:none;} 

#tdm li a:hover{color:#2cc990;text-decoration:underline;}

#tdm{display:grid}

Enregistrez les modifications apportées à votre thème

Maintenant pour activer le sommaire dans un article de votre blog, suivez ces étapes :

Dans le menu "Articles", sélectionnez l’article dans lequel vous désirez ajouter un sommaire
Insérez ensuite le code d’activation dans le volet HTML à l’endroit où vous souhaitez le voir apparaitre (voir l’astuce d’intégration dans la première partie).

Voici le code d’activation de la table des matières numérotée :


<div id="tdm-ub">

<div id="tdm-hd">Table des matières</div>

<div id="tdm">

<ol>

<li><a href="#tdm_1" title="Titre 1">Ici j’écris mon premier titre</a></li>

<li><a href="#tdm_2" title="Titre 2">Ici j’écris mon deuxième titre</a></li>

<li><a href="#tdm_3" title="Titre 3">Ici j’écris mon troisième titre</a></li>

<li><a href="#tdm_4" title="Titre 4">Ici j’écris mon quatrième titre</a></li>

<li><a href="#tdm_5" title="Titre 5">Ici j’écris mon cinquième titre</a></li>

<li><a href="#tdm_6" title="Titre 6">Ici j’écris mon sixième titre</a></li>

</ol>

</div>

</div>

Remarque : si vous souhaitez afficher votre table des matières sous forme d’une liste non numérotée, remplacez la propriété <ol> et </ol> par <ul> et </ul>.

<div id="tdm-ub">
<div id="tdm-hd">Table des matières</div>
<div id="tdm">
<ul>
<li><a href="#tdm_1" title="Titre 1">Ici j’écris mon premier titre</a></li>
……………………………………………………………..
…………………………………………………………….
………………………………………………………………
</ul>
</div>
</div>

Compléter le code d’activation en renseignant vos différents titres dans les lignes :

<li><a href="#tdm_1" title="Titre 1">Ici j’écris mon premier titre</a></li>
<li><a href="#tdm_2" title="Titre 2">Ici j’écris mon deuxième titre</a></li>
Etc.

Rajoutez maintenant un identifiant à chacun de vos titres dans le volet HTML

tdm_1 pour le titre 1
tdm_2 pour le titre 2, ainsi de suite.

Pour ce faire, suivez ces étapes :

D'abord, repérez vos titres dans le volet HTML de votre article. Vous remarquerez que l'ensemble de vos titres principaux sont entourés par les balises suivantes <h2>votre titre</h2>

Mode visuel