Tweeter

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”.

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”.

@+

Si vous avez aimé cet article, n'oubliez pas de le partager en utilisant les boutons ci-dessous

Tweeter

Rejoins la communauté de Blogger au bout du doigt et soit informé des nouvelles publications sur Facebook. Clique sur "J'aime"