Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Widget articles similaires pour blogger (related posts)

Màj le 6 mars 2017

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

widget-articles-similaires

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:

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;style type='text/css'&gt;
#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:

article-similaires

&lt;B: includable id = 'postQuickEdit' var = 'post'&gt;

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

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;div id='related-posts'&gt; &lt;b:loop values='data:post.labels' var='label'&gt; &lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt; &lt;/b:if&gt; &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=6&amp;quot;' type='text/javascript'/&gt;&lt;/b:if&gt;&lt;/b:loop&gt;
&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)

Vous aimerez également...

  • La diffusion d’annonces AdSense a été limitée : que faire ?
  • Comment ajouter une pagination à vos commentaires Wordpress
  • 14 méthodes pour améliorer la vitesse de votre site WordPress
  • Boutons de partage Jumbo avec compteur pour wordpress sans plugin
  • Comment désactiver Disqus pour custom post type sous Wordpress
  • Corriger l’erreur “are you sure you want to do this” dans Wordpress

Classé sous :Blogger, Tutoriels Balisé avec :wordpress guide

Accueil / Tutoriels / Widget articles similaires pour blogger (related posts)

Commentaires

  1. laure

    13 février 2017 à 12:59

    Bonjour,

    Merci pour le tutoriel.
    Je reçois un message d’erreur quand j’ajoute le deuxième code au dessus de donc impossible d’installer le widget…:
    Erreur d’analyse XML : Open quote is expected for attribute « cond » associated with an element type « b:if »..

    savez-vous comment résoudre le problème? merci

  2. wpcours

    13 février 2017 à 1:41

    Salut Laure

    Suivre les étapes à la lettre et assurez vous de copier le code entier sans faute.

  3. laure

    13 février 2017 à 1:56

    Bonjour
    merci pour la réponse rapide
    oui c’est exactement ce que j’ai fait mais ça ne fonctionne pas…
    merci

  4. laure

    13 février 2017 à 2:03

    Bonjour,
    J’ai recommencé à zéro une nouvelle fois mais ça ne fonctionne toujours pas… tans pis… merci quand même

  5. wpcours

    13 février 2017 à 2:09

    je vais ajouter une petite remarque en bas de l’article pour essayer une autre méthode.

  6. laure

    13 février 2017 à 2:18

    ok merci beaucoup. J’ai essayé cette autre méthode, mais j’ai toujours le même message d’erreur…

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • 5 façons pour trouver la clé de produit (serial) Windows facilement
  • Ajouter une Image mise en avant (featured image) sous le titre de vos article
  • 13 thèmes WordPress polyvalents pour sites des crypto-monnaies pour obtenir un site bien classé
  • C’est quoi l’API WordPress Heartbeat et pourquoi devriez-vous la contrôler ?
  • Créer un message d’incitation à réautoriser les annonces Adsense sans plugin

© 2023 ·Wpcours.com · Mentions · Contact