Widget articles similaires pour blogger (related posts)

Pour diminuer le taux de rebond de votre blog et améliorer son référencement naturel, ainsi pour garder le visiteur connecté a votre site le plus de temps, il est recommandé de créer un ensemble de liens vers des articles qui ont une relation avec le sujet de votre article ou bien sa catégorie. Pour WordPress il existe beaucoup d’extensions qui vous facilite le travail en utilisant des plugins.

Aujourd’hui on va savoir comment ajouter un Widget d’article en relation (related posts) sous vos articles dans blogger blog ( voir l’image de notre widget ci-dessous).

Comment ajouter le Widget articles similaires pour blogger

Étape 1:  Sur votre tableau de bord de Blogger, allez dans « Modèle » et cliquez sur le bouton Modifier le code HTML.

Étape 2: Une fois vous êtes sur l’éditeur de modèle , cliquez dans la zone de code et appuyez en même temps sur les touches CTRL + F, puis tapez la balise suivante dans la boîte de recherche (appuyez sur Entrée pour la trouver):

 </ Head>

Étape 3: Juste au-dessus de la balise </head> , collez le code CSS suivant:

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: <span style="color: #ff0000;">27</span>px;
font-weight: normal;
color: <span style="color: #ff0000;">#fff</span>;
text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #<span style="color: #339966;">949494</span>;
text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #<span style="color: #ff0000;">F4F4F4</span>;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #<span style="color: #ff0000;">f9f9f9</span>;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
var relatedpoststitle=&amp;quot;Articles similaires&amp;quot;;
&lt;/script&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i&lt;json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i&lt;relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j&lt;a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i&lt;relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length&gt;1){document.write('&lt;h2&gt;'+relatedpoststitle+'&lt;/h2&gt;')}document.write('&lt;ul&gt;');while(i&lt;relatedTitles.length&amp;&amp;i&lt;20&amp;&amp;i&lt;maxresults){document.write('&lt;li&gt;&lt;a href="'+relatedUrls[r]+'"&gt;'+relatedTitles[r]+'&lt;/a&gt;&lt;/li&gt;');if(r&lt;relatedTitles.length-1){r++}else{r=0}i++}document.write('&lt;/ul&gt;');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]&gt;
&lt;/script&gt;&lt;/b:if&gt;

Personnalisation du widget « Related Posts » pour Blogger

– Pour changer la taille (27px) et la couleur (#fff) du titre «Articles similaires», changer les valeurs en rouge.
– Pour la couleur des liens d’articles, remplacez la valeur # 949494 en vert par une couleur de votre choix .
– Pour la couleur de fond sur « mouse hover », modifiez la valeur # de F4F4F4 en rouge.

Étape 4: Maintenant il nous reste d’ajouter le code qui va nous permettre d’afficher les liens d’articles en relation directement à la fin de notre article.

Pour cela cherchez la ligne ci – dessous dans votre thème:

<B: includable id = 'postQuickEdit' var = 'post'>

Étape 5: Une fois que vous l’avez trouvé, juste au dessus de la balise </b:includable> coller le code ci-dessous :

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
&lt;script type='text/javascript'&gt; var<b> maxresults=5</b>; removeRelatedDuplicates(); printRelatedLabels(&amp;quot;&lt;data:post.url/&gt;&amp;quot;); &lt;/script&gt;&lt;a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" &gt;Simple Related Posts Widget&lt;/a&gt;&lt;/div&gt;&lt;/b:if&gt;

Le nombre d’articles similaires par défaut est de 5, pour afficher plus d’articles en relation changer « maxresults=5″

Enfin cliquez sur enregistrer pour sauvegarder les modifications. Maintenant votre widget est en action, visitez un de vos articles pour voir le résultat final.

Je pense que ce petit  tutoriel vous aidera à ajouter facilement le widget d’articles en relation dans votre blog .

NB: si le code ne marche pas essayer de mettre le deuxième code de l'étape 5 juste après la balise <b>&lt;data:post.body/&gt; </b>(cherchez cette balise dans votre modèle)