Accueil
Blogger
JavaScript

Ajouter une estimation du temps de lecture dans les articles Blogger

Dans ce tutoriel, on verra comment installer une fonctionnalité qui permettra d’afficher le temps de lecture dans les articles de votre blog Blogger
Afficher une estimation du temps de lecture sur un article Blogger


Dans le tutoriel d’aujourd’hui, on verra étape par étape comment installer une nouvelle fonctionnalité qui permettra d’afficher le temps de lecture dans les articles de votre blog Blogger.

Afficher une estimation du temps de lecture va enrichir l’expérience de vos utilisateurs et les encouragera à commencer la lecture puisqu’ils sauront le temps qu’il leur faut pour lire votre article. En plus, cela permettrait éventuellement de renforcer la confiance de vos lecteurs et ainsi de réduire votre taux de rebond (le nombre de visiteurs qui quitteraient votre article pour retourner sur les résultats des moteurs de recherche).


    Comment afficher une estimation du temps de lecture sur un article Blogger ?

    La vitesse de lecture moyenne est estimée autour de 200 mots par minute, donc pour un article de 2000 mots, le temps de lecture serait de 10 minutes. C’est le principe de ce plugin jQuery qui calculera et affichera automatiquement le temps de lecture estimé pour chacun de vos articles.

    Prérequis avant l'installation du plugin

    Vérifier que la bibliothèque jQuery est bien installée dans votre thème Blogger

    La première étape consiste à vous assurer que la bibliothèque jQuery est bien intégrée dans votre thème. Pour ce faire, il faudra accéder au code HTML de votre thème.

    Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.
    1. Cliquez sur "Thème"> "Modifier le code HTML"
    2. Une boite contenant le code HTML de votre thème s'affichera
    3. Cliquez n'importe où à l'intérieur du code HTML
    4. Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
    5. Dans la barre de recherche, saisissez jquery.js ou jquery.min.js 
    Vous allez probablement trouver un code qui ressemble à ceci : 

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    Si vous ne trouvez aucun code jQuery dans votre thème, ajoutez le code qui suit au-dessus de la balise </head>. 

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


    Vous pouvez essayer une version plus récente de la bibliothèque jQuery si vous le souhaitez, à savoir la version 3.1.1 dont le code est le suivant :

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    Notez bien : votre thème doit contenir une seule version de la bibliothèque jQuery pour éviter tout dysfonctionnement ou conflits entre les différentes bibliothèques.

    La bibliothèque d'icônes Font Awesome

    Ce plugin utilise également des icônes "Font Awesome", donc on va vérifier si la bibliothèque est bien installée dans notre thème, sinon il faudra l'ajouter.

    Cherchez d'abord maxcdn.bootstrapcdn dans la barre de recherche.

    Si vous trouvez le code suivant, passez à la prochaine étape : 

    
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

    Sinon, ajoutez le code suivant au-dessus de la balise </head> 

    
<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>

    Ajouter le code jQuery à votre thème Blogger

    Cherchez le code </body> dans votre barre de recherche

    Collez le code suivant au-dessus de la balise </body>

    
<script type='text/javascript'>

//<![CDATA[

// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license

!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);

$(function(){$('.post-body').readingTime();});

//]]>

</script>

    Ajuster le code

    Ce plugin calcule le temps de lecture sur une base de 270 mots par minute. Vous avez la possibilité de changer le nombre de mots en modifiant le code dans la ligne suivante :

     t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,

    Personnaliser l’apparence du plugin à l'aide des propriétés CSS

    Cherchez le code ]]></b:skin>

    Collez le code qui suit au-dessus de la balise ]]></b:skin>

    
span.right {float:center;display:inline-block;padding:10px 5px;}

.read-time{width:100%;background:#f2f2f2;margin-bottom:10px;font-family: 'arial',sans-serif,Georgia,serif;font-weight:700;font-size:12px;border-radius: 10px;letter-spacing: 1px;}

    Ajouter le code HTML pour activer l’affichage du plugin dans les articles

    Maintenant, il faudra insérer le code HTML ci-dessous à l'endroit où l'on souhaite voir paraître le temps de lecture. Dans notre exemple, on va l’afficher au début de chaque article.

    Pour faire de même, suivez ces étapes :

    Afin de repérer facilement l’endroit exact où sera affiché notre plugin, je vous recommande d'utiliser l’outil de développement de votre navigateur internet.

    Voici le procédé pour le navigateur Google Chrome :

    Pour ouvrir l'inspecteur d'élément de Google Chrome, appuyez sur la touche F12 ou effectuez un clic droit à l’intérieur de votre article et cliquez ensuite sur "Inspecter" .

    Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac pour afficher la barre de recherche

    Chercher ensuite la balise post-body-

    Inspecteur Chrome ajouter le code HTML plugin temps de lecture Blogger 

    Comme indiquer sur l'image ci-dessus le code d'activation du plugin sera inséré en dessous de la balise de fermeture </div>, mais avant cela il faudra trouver son emplacement dans le code HTML de votre thème Blogger.

    Pour ce faire, toujours dans l’outil de développement de votre navigateur, défilez vers le haut jusqu’à la balise d’ouverture <div class = "votre élément HTML" >. C’est cet attribut class qui vous permettra de trouver aisément l’emplacement dans votre thème.

    Dans notre exemple, je vais chercher "post-info" dans le code HTML de mon thème Blogger (si vous ne le trouver pas, mettez votre attribut entre deux apostrophes comme ceci 'post-info').

    Inspecteur Google Chrome chercher les balise HTML dans le thème Blogger

    Après avoir trouvé votre attribut class dans le code HTML de votre thème Blogger, défilez vers le bas jusqu’à la balise de fermeture </div> et ajoutez le code qui suit pour activer le plugin

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

<div class='read-time'>

<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/> de lecture</span></div>

 </b:if>

    Ajouter une estimation du temps de lecture dans votre thème Blogger



    Félicitations ! Grâce à ce plugin, le temps de lecture sera affiché automatiquement dans chacun de vos articles.

    Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile à d'autres personnes.