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

By
Advertisement

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.


10 commentaires:

  1. Un très grand merci Rodney ! cela n'a pas l'air très facile ! ouh lala ;=)

    RépondreSupprimer
  2. @ Papilles et Pupilles : De rien. Tu verras que si tu t'y met, ça ne te prendra que moins de 10 minutes chrono.

    RépondreSupprimer
  3. bonjour
    connaitriez vous une astuce pour afficher un bas de page de ce style:

    page 3 sur 105 << 1 2 3 4 5 >> derniere page

    merci pour votre blog bien instructif.

    RépondreSupprimer
  4. Salut Rodney

    Super script de ta part, que j'ai vue en oeuvre la semaine passée.
    Mais apparemment, il y a du changement chez Blogger car ton script ne marche plus tout à fait : il ne transforme que le lien "récent" avec le titre du prochain article, le lien "ancien" reste écrit à l'ancienne, "Message plus ancien". C'est le cas sur ton propre blog, on peut le voir ci-dessous...
    As tu une explication ?

    RépondreSupprimer
  5. Re salut

    J'ai cherché et j'ai trouvé pourquoi le script bug :
    il faut absolument mettre la div avec l' id='topPagerLinks'
    dans le template car le script appelle cet identifiant de div pour écrire ses liens avec les noms d'articles.

    Le problème, c'est que ça nous place effectivement une div en plus en haut de l'article avec le pager. Et si on n'en veut pas... ça ne marche qu'à moitié.

    J'ai donc contourné le problème en appelant directement la div qui contient le pager original comme ceci :
    topPager = document.getElementById('blog-pager');

    ici "blog-pager" remplace le "topPagerLinks" dans le script original.

    Puis en éliminant le script qui écrit les liens dans la div initialement prévue (sinon, on se retrouve avec les liens doublés)
    donc le script à insérer est celui-ci (j'ai aussi viré la référence à Home ou accueil)


    function pItemPager() {
    topPager = document.getElementById('blog-pager');
    if(document.getElementById('blog-pager-newer-link')){
    piNewer = document.getElementById('blog-pager-newer-link').getElementsByTagName('a');
    piNTitle = '◄ '+piNewer[0].href.split('/')[5].replace(/-/g,' ').replace(/.html/g,'');
    piNewer[0].innerHTML = piNTitle;
    }

    if(document.getElementById('blog-pager-older-link')){
    piOlder = document.getElementById('blog-pager-older-link').getElementsByTagName('a');
    piOTitle = piOlder[0].href.split('/')[5].replace(/-/g,' ').replace(/.html/g,'')+' ►';
    piOlder[0].innerHTML = piOTitle;
    }
    }

    On collera quand même le bout de script dans la div du 'blog-pager' pItemPager() comme prévu initialement.

    Voilà...

    RépondreSupprimer
  6. Ha ça fait un moment que je cherche quelque chose comme ça aussi, merci Rodney!

    RépondreSupprimer
  7. Bonjour,

    J'ai essayé le changements des messages anciens et récents mais je suis bloquée à l'étape "trouver name='nextprev'" parce que je ne le trouve pas...

    Quelqu'un peut-il m'aider svp ?

    Merci et bonne journée

    RépondreSupprimer
  8. @ Compagnie Lever du Jour

    Il faut que tu coches "Développer des modèles de gadgets".

    @ punktitude

    Tes changements de script sont nickels ; ça marche super bien ! Merci !

    RépondreSupprimer
  9. Bonjour Rodney !

    Je suis à la recherche d'une astuce permettant d'afficher "messages plus récents / + anciens" au dessus à droite du titre de l'article plutôt que centré en dessous de l'article.
    (Mais articles ne sont faits que de photos et je voudrais faciliterla navigation entre d'une photo à l'autre).

    Merci d'avance

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT