Afficher les titres des articles à la place de messages plus récents et messages plus anciens

Qui ne voudrais pas afficher les titres des articles à la place de Messages plus récents et messages plus anciens qui apparaît au bas de la page sur Blogger ?

La grande blogueuse Anne, de Papilles et Pupilles (un blog culinaire pour ceux qui ne veulent pas voir leurs intestins devenir rouge de colère à cause du manque de variation des repas), m'avait demandée il y a quelque mois de cela, de lui trouver une astuce pour afficher les titres des articles (plus récent et plus anciens ) à gauche comme à droite d'Accueil au bas de page des articles sur Blogger.

Après plusieurs recherches infructueuses, j'étais tombé sur le blog de Phyddeaux3 qui avait intégré cette astuce. Seulement, aucun article de son blog n'explique comment le faire, malgré tous les commentaires demandant les secrets de l'astuce laissé par quelques bloggueurs, notamment votre humble serviteur que je suis.

J'ai pris le temps d'étudier son code et bingo!, hier j'ai trouvé comment ça marche. Je l'ai même déjà installé sur mon blog et il me convient mieux que la numérotation des pages.

Pour avoir le même résultat sur votre blog, voici ce qu'il faut faire :

1. Trouvez dans votre code css la portion de code pour messages anciens et nouveaux, elle commence un peu comme ceci :

#blog-pager-newer-link et se termine par quelque chose comme ceci : .blog-pager a

Remplacez toute cette section par celle-ci :

#blog-pager-newer-link, #top-pager-newer-link {
float: left;
width:200px;
text-align:left;
}
#blog-pager-older-link, #top-pager-older-link {
float: right;
width:200px;
text-align:right;
}
#blog-pager, #topPagerLinks {
margin:20px 0 0 0;
text-align: center;
font-variant:small-caps;
font-size:90%;
font-family: Tahoma, sans-serif;
letter-spacing:-0.05em;
}
#blog-pager a , #topPagerLinks a {
text-decoration:none;
}
#topPagerLinks {
padding:0 0 25px 0;
margin:-10px 0 0;
}

Celui qui s'y connait un peu ne pourra qu'ajouter les #top-pager-newer-link , #top-pager-older-link #topPagerLinks aux endroits indiqués. Mais, si vous n'êtes pas habile, évitez vous des problèmes et suivez les instructions.

A cette étape, enregistrez votre modèle.

2. Télécharger ce fichier zip (click droit, puis enregistrer sous). Il contient un fichier .js nommé recentsanciens


Ouvrir le fichier recentsanciens.js avec notepad et trouvez la partie ci-après :

a = document.createElement('a');
atxt = document.createTextNode('Home');
a.href= 'http://votreblog.blogspot.com/index.html';
a.appendChild(atxt);
topPager.appendChild(a);

Remplacez y votreblog par l'identifiant de votre blog (le nom qu'il a sur l'url)

Enregistrez les modifications (que le fichier garde le format js) et allez héberger sur Googlepagecreator ou un site similaire (weebly.com ou free.fr)

3. Mettez l'url de l'endroit où est hébergé le fichier à la place de celui qui est dans ce code et collez le code entier dans votre modèle, avant la balise </head>

<script src='urlcomplte.com/recentsanciens.js' type='text/javascript'></script>


4. Trouvez le code ci-après :

<b:include name='nextprev'/>

Collez celui-ci juste en dessous :

<script type='text/javascript'>pItemPager()</script>

ce qui donnera :

<b:include name='nextprev'/>
<script type='text/javascript'>pItemPager()</script>

5. Si les messages anciens et nouveaux apparaissent au bas de page et que vous voulez le voir au début de pages, juste avant le titre de l'article, mettre le code suivant juste après <b:includable id='main' var='top'>

<div id='topPagerLinks'></div>

Enregistrez-votre modèle et le tour est joué.

NB : Un seul hic constaté avec cette astuce, c'est que les apostrophes et les lettres avec accents sont effacé. Je crois qu'il prend les mots contenus dans le suffixe de l'url pour constituer le titre de l'article. Rien n'est parfait sur la terre. Mais si quelqu'un pouvait nous étudier le fichier .js pour voir comment régler le problème, nous lui serons très réconnaissant.