Remplacez “message plus ancien/récent” par les titres des articles

By
Advertisement

L’un des défauts que l’on remarque chez Blogger est le fait que le lecteur qui lit un article n’est pas informé sur le titre de l’article précédent ou suivant celui qu’il lit. Pourtant, il y a des grandes chances qu’un lecteur puisse demeurer encore un peu sur votre blog s’il est tenté de lire le message plus ancien ou plus récent, attiré par le titre de celui-ci. Voici donc pour vous une astuce de MS-Potilas qui a concocté quelques bouts de code à ajouter dans votre modèle afin d’avoir les titres des articles affichés à la place de “message plus ancien” et “message plus récent”.

afficher titres articles à la place de message plus anciens récents sur blogger blogspot

1. Se connecter à son compte blogger, cliquer sur “Modèle” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Modifier le code html” puis sur “Traiter”.

2. Trouvez la balise suivante ]]></b:skin> et mettez le code css ci-dessous juste avant :

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}


 



3. Trouvez la balise </head> et ajoutez le script suivant juste avant ladite balise



<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


4. Trouver la balise </body> et mettre le code suivant juste avant :



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>


// Post titles to Older Post and Newer Post links (without stats skew)


// by MS-potilas 2012.



//<![CDATA[

var urlToNavTitle = {};


function getTitlesForNav(json) {


  for(var i=0 ; i < json.feed.entry.length ; i++) {


    var entry = json.feed.entry[i];


    var href = "";


    for (var k=0; k<entry.link.length; k++) {


      if (entry.link[k].rel == 'alternate') {


        href = entry.link[k].href;


        break;


      }


    }


    if(href!="") urlToNavTitle[href]=entry.title.$t;


  }


}


document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');


function urlToPseudoTitle(href) {


  var title=href.match(/\/([^\/_]+)(_.*)?\.html/);


  if(title) {


    title=title[1].replace(/-/g," ");


    title=title[0].toUpperCase() + title.slice(1);


    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")


  }


  return title;


}


$(window).load(function() {


window.setTimeout(function() {


  var href = $("a.blog-pager-newer-link").attr("href");


  if(href) {


    var title=urlToNavTitle[href];


    if(!title) title=urlToPseudoTitle(href);


    if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Article suivant :<br />" + title);


  }


  href = $("a.blog-pager-older-link").attr("href");


  if(href) {


    var title=urlToNavTitle[href];


    if(!title) title=urlToPseudoTitle(href);


    if(title) $("a.blog-pager-older-link").html("Article précédent: &gt;&gt;<br />" + title);


  }


}, 500);


});


//]]>


</script>


</b:if>




Enregistrez le modèle et allez admirer le résultat, sur une page d’article.



5. Ajoutez le code css suivant sur le lien pour “Accueil” n’est pas centré entre le titre de l’article précédent ainsi que celui de l’article suivant. Trouvez la balise ]]></b:skin> et ajoutez ce code juste avant :



.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}


Et voilà, maintenant, le vilain titre de “message plus ancien” et “message plus récent” seront remplacés par les titres des articles sur votre blog.



S’il vous vient l’envie de placer ces liens sur les articles précédents et les articles suivants au-dessus des articles, comme c’est le cas sur d’autres plateformes des blogs, allez lire l’article “Déplacer messages anciens/messages récents”.



@+


11 commentaires:

  1. Article très intéressant et utile..;)

    RépondreSupprimer
  2. Désolé de poster un commentaire qui n'as rien avoir avec le sujet mais je ne savait pas ou le poster.
    Je visite très souvent ton blog et n'ayant pas trouver mon info je viens directement te poser la question à travers ce commentaire car j'ai pu voir que toi tu y était arriver. Voici mon soucis:
    J'aimerais que quand on ouvre une de mes pages blogger il y est (tout comme toi) des blocs de commentaire pour chaque article publiés.
    Cordialement.

    RépondreSupprimer
  3. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  4. Bonjour

    Je bloque à l'étape "Trouver la balise body " car elle n'est pas dans mon code... :(

    RépondreSupprimer
  5. well done !
    Merci pour la ressource, c'est tout de même nettement plus intuitif :-)

    RépondreSupprimer
  6. Bonjour,

    Article vraiment super. Par contre, j'ai tenté de le mettre sur mon blog, mais ça ne fonctionne pas. Avant la balise body, il faut vraiment copier le code tel quel, avec les mêmes espaces et sauts de ligne ? Merci pour votre aide. Mon blog (je le commence!) : www.ideedebiz.blogspot.com

    RépondreSupprimer
  7. Bonjour,

    Très bon tuto ! bravo !, Je visite très souvent ton blog et d'habitude je ne commente pas les blogs utile faute de temps mais la waoooo ! je ne peut pas résister, je m'en fou du temps :) !

    Cordialement
    http://partagelibre.blogspot.com/

    RépondreSupprimer
  8. Bonjour Rodney,
    je voudrais savoir s'il serait possible non pas de remplacer "messages plus anciens", "Home" et "Messages plus récents" par des images car ça, je l'ai déjà fait sur mon blog minimaliste http://nbbc-met.blogspot.fr mais plutôt rendre ces flèches "flottantes" à 50% de la hauteur comme dans certains sites (sans "home" bien sûr). J'ai essayé de mettre le code après dans un div flottant (comme mon titre) mais si les images des flèches apparaissent bien, les liens ne fonctionnent pas. Est-ce possible? Dans le cas contraire, inutile que je perde mon temps à chercher...

    RépondreSupprimer
  9. Il fallait lire:
    J'ai essayé de mettre le code après "b:include name='nextprev'"
    (je ne me rappelle plus comment on fait passer du code dans les commentaires et Blogger l'a effacé sans prévenir. J'espère que ça va passer cette fois...)

    RépondreSupprimer
  10. Pour les Blogueurs et Blogueuses qui ne trouvent pas ce qu'ils cherchent dans le code HTML: le nouvel éditeur est bogué au niveau de la recherche avec Ctrl+F et F3. Personnellement, je fais Ctrl+A (sélectionner tout), Ctrl+c (copier) et Ctrl+V (coller) dans un éditeur de texte genre bloc-note comportant un outil de recherche et affichage des numéros de lignes ce qui n'est malheureusement pas le cas du Bloc-Note de Windows, il me semble (je suis sous Linux depuis plusieurs années). Cela permet de repérer la ligne que l'on cherche. C'est un peu long mais...
    Astuce1: On peut aussi s'en servir par la même occasion pour faire une sauvegarde de son modèle.
    Astuce2: En faisant Ctrl+A (sélectionner tout), Ctrl+c (copier) et Ctrl+V (coller) directement dans l'éditeur HTML de Blogger, cela développe tout le code. Mais comme l'outil de recherche ne fonctionne alors pas mieux, cela ne sert pas à grand-chose.

    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