Comment créer une page sommaire efficace pour votre site web

Comment crée un sommaire ou une table de matière de votre site internet.
Comme son nom l'indique crée une page "sommaire" en français ou " summary " en anglais" ou "صفحة موضوعات" en arabe, tout simplement, revient à crée une page contenant tous les articles de votre site, sur la plateforme Blogger.

Son importance pour les visiteurs présente le contenu de manière haut de gamme et les aide à naviguer facilement dans le site. 

En ce qui concerne le référencement, il aide à archiver les pages web, car il rend également plus facile la navigation des robots de Google dans toutes les pages, et découvrir les liens brisés. 

Il présente également une vision proactive du document. 

Il fait donc référence à ses parties principales et non principales. 

Voilà quelque étape simple à suivre :

Guide complet : Créer une page sommaire

Le mieux est de commencer par crée une nouvelle page sur Blogger et lui donnée un nom comme " summary ".

Changement du code :

Avant tous il faut faire une adaptation sur le code html.
Puis nous appuyons sur l'affichage de HTML, nous-mettons le code à l’intérieur.
Mais avant de sauver vous devez faire quelques changements nécessaires.
Tous simplement vous placer le lien de votre site à la place de celui-là :

 <div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#bp_toc {
  border: 0px solid #000000; 
  background: #ffffff;
  padding: 5px;
  width:300px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
 text-align: center;
 background: #E6E6E6;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 2px 2px 5px 5px #CCCCCC;
        
        box-shadow: inset 2px 2px 5px 5px #CCCCCC;
  color: #000000;
  padding-left: 2px;
  width:150px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  width:100px;
}
.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:70%;
  text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
border: 2px solid white !important;
-webkit-border-radius: 10px;
border-radius: 10px;
 background: #F6F6F6;
 white-space:nowrap;
}
</style>

<br />
<div id="bp_toc">
..attend s'il vous plait le télécharement du sommaire..</div>
<script src="https://almowadib.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
<a href="https://almowadib.blogspot.com/" rel="nofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>&nbsp;
</div>

Résultat obtenu :

Après on sauvegarde notre page et voilà notre sommaire est créé.
Exemple de page sommaire.