Ajouter la fonctionnalité "Lire aussi" automatiquement sur votre blog Blogger

Ajouter la fonctionnalité Lire aussi automatiquement sur votre blog Blogger

Pour maintenir votre blog pertinent et utile, il est important d'avoir des visiteurs réguliers. Pour y parvenir, vous devez leur offrir une expérience utilisateur optimale qui facilite la navigation sur votre site. L'ajout de la fonctionnalité "Lire aussi" automatiquement à votre blog Blogger est l'un des moyens les plus simples pour y arriver.

Dans cet article, nous vous montrerons comment ajouter cette fonctionnalité à votre blog en suivant des étapes simples. Nous vous expliquerons également pourquoi cette fonctionnalité est essentielle pour votre blog et comment elle peut améliorer l'expérience de vos visiteurs.

Si vous êtes blogueur sur Blogger, vous savez probablement à quel point il est important de garder vos lecteurs engagés. L'ajout de la fonctionnalité "Lire aussi" et des articles associés automatiquement à votre blog peut aider vos lecteurs à découvrir facilement d'autres articles pertinents. Dans cet article, nous vous montrerons comment ajouter cette fonctionnalité à votre blog en utilisant des balises HTML simples. Nous aborderons également l'optimisation de votre blog pour améliorer l'expérience utilisateur et le référencement, ainsi que la personnalisation de votre modèle pour vous démarquer.

La fonctionnalité "Lire aussi" permet à vos visiteurs de trouver facilement des articles similaires à celui qu'ils lisent actuellement. Elle est particulièrement utile pour deux raisons principales: elle améliore l'expérience de vos visiteurs en leur permettant de trouver plus facilement du contenu pertinent, et elle encourage également les visiteurs à rester plus longtemps sur votre blog en explorant d'autres articles. De plus, l'ajout de cette fonctionnalité à votre blog peut également améliorer votre référencement en augmentant le temps de session des visiteurs et en réduisant le taux de rebond. En suivant les étapes simples que nous présentons dans cet article, vous pouvez ajouter cette fonctionnalité à votre blog Blogger et améliorer l'expérience utilisateur pour vos visiteurs.

Comment ajouter la fonctionnalité "Lire aussi" sur votre blog Blogger?

Pour ajouter la fonctionnalité "Lire aussi" à votre blog Blogger, suivez ces étapes simples :

1. Connectez-vous à votre compte Blogger et sélectionnez le blog que vous souhaitez modifier.
2. Cliquez sur "Modèle" dans le menu de gauche, puis cliquez sur "Modifier le HTML".
3. Avant de procéder, assurez-vous de sauvegarder votre modèle actuel en cliquant sur "Sauvegarder le modèle" en haut de la page.
4. Ensuite, vous devez trouver la balise </head> et la balise de fermeture immédiatement avant. Si vous avez des problèmes pour trouver ces balises, utilisez la fonction de recherche de votre navigateur (CTRL + F sur PC ou CMD + F sur Mac) et recherchez "</head>".
5. Copiez et collez le code suivant juste avant la balise </head> :

<b:if cond='data:blog.pageType != "index"'><style type='text/css'>/* Multi Related Post */.arldzgnMultiRelated{border: solid 4px transparent;border-radius: 2.5rem 0 3.5rem 2.5rem;background: -webkit-gradient(linear,left top,left bottom,from(#100e17),to(#100e17)) padding-box,-webkit-gradient(linear,left top,right top,from(#db1d60),to(#ed4f32)) 0/50% no-repeat border-box,-webkit-gradient(linear,right top,left top,from(#eb7d01),color-stop(37.5vw,#ed4f32),to(rgba(237,79,50,0))) 100% 101%/65% 75% no-repeat border-box;background: linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#db1d60,#ed4f32) 0/50% no-repeat border-box,linear-gradient(-90deg,#eb7d01,#ed4f32 37.5vw,rgba(237,79,50,0)) 100% 101%/65% 75% no-repeat border-box;};color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}.arldzgnMultiRelated:hover{background-color:#222}.arldzgnMultiRelated .content{padding:12px 15px}.arldzgnMultiRelated .content .text{margin-right:5px}.arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em}.arldzgnMultiRelated .content a:hover{text-decoration:underline}.arldzgnMultiRelated .icon{height:auto;min-width:55px;background:;transition:all .3s}</style></b:if>

6. Recherchez <data:post.body/> et vous le trouverez plusieurs fois dupliqué. Un deuxième ou un troisième est nécessaire. Collez le code suivant directement sous le <div/>
   qui le suit

<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:view.isPost'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'></script></b:if></b:loop></b:if><script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Lire aussi:';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>

7. Enregistrez les modifications apportées à votre modèle et vérifiez que la fonctionnalité "Lire aussi" a été ajoutée à vos articles.

En suivant ces étapes, vous pourrez ajouter la fonctionnalité "Lire aussi" à votre blog Blogger et augmenter l'engagement de vos lecteurs. N'oubliez pas de personnaliser les valeurs rpp, rel et web pour répondre à vos besoins spécifiques.

NB: Pour corriger le message d'erreur dans le HTML modifier la ligne suivante dans le script:

 (script&callback=related_results_labels&max-results=100) 

par: (script&amp;callback=related_results_labels&amp;max-results=100)

Comment personnaliser les valeurs pour répondre à vos besoins spécifiques ?

L'ajout de la fonctionnalité "Lire aussi" sur votre blog Blogger peut améliorer l'expérience utilisateur et augmenter le temps passé sur votre site. Pour personnaliser cette fonctionnalité en fonction de vos besoins, suivez les étapes suivantes :

1. Modifier les paramètres var jumlah

Le paramètre var jumlah détermine le nombre d'articles à afficher, var jumlah est le texte affiché pour la section "Lire aussi", Pour personnaliser cette valeur, trouvez la ligne de code suivante dans le script :

(function() {var jumlah = 4;

Remplacez la valeur 4 par celles de votre choix.

2. Enregistrez les modifications apportées à votre modèle

Après avoir personnalisé la valeur, enregistrez les modifications apportées à votre modèle en cliquant sur "Enregistrer le modèle" en haut de la page.

3. Vérifiez que la fonctionnalité "Lire aussi" a été ajoutée à vos articles

Pour vous assurer que la fonctionnalité "Lire aussi" a été ajoutée à vos articles, vérifiez qu'une section en milieu de chaque article présente des liens vers des articles associés. Si vous ne voyez pas cette section, vérifiez que vous avez bien suivi toutes les étapes et que les valeurs ont été correctement personnalisées.

En suivant ces étapes, vous pouvez ajouter la fonctionnalité "Lire aussi" à votre blog Blogger et la personnaliser en fonction de vos besoins spécifiques.

L'ajout de la fonctionnalité "Lire aussi" et des sites associés automatiquement à votre blog Blogger peut aider vos lecteurs à découvrir d'autres articles pertinents sur votre blog. En suivant les étapes ci-dessus, vous pouvez ajouter cette fonctionnalité en un rien de temps. N'oubliez pas de personnaliser les valeurs rpp, rel et web pour répondre à vos besoins spécifiques.