21 mars 2012

Widget Articles Similaires Pour Blogger Blogspot

Related Posts Blogger
Dans ce tutoriel nous allons voir comment intégrer le widget "Articles Similaires Pour Blogger" qui affiche les messages similaires (articles de la même catégorie) après chaque article de votre blog Blogger.
Ce widget augmente également le référencement et le nombre de pages vues sur votre blog. Il est conseillé donc de l'installé.







Comment installer le widget articles similaires


Avant de commencer, vous devez enregistrer une copie de votre modèle sur votre disque dur.

1. Connectez-vous à votre blog et allez à "Présentation" > "Modifier le code HTML" > cochez la case "Développez des modèles de gadgets"

2. Maintenant, ajouter le code CSS ci-dessous juste avant la balise ]]></b:skin>
#related-posts {
    padding:10px;
    display:block;
    clear:both;
}
#related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.75em;
    margin-top: 0;
    padding-top: 0;
}
#related-posts a:hover{
    text-decoration:underline;
}
#related-posts ul{
    list-style-type:none;
    margin:10px 0;
    padding:0;
}
#related-posts ul li{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwRPWpQbkPM0oOAk3ziQGEIJbWS0RrgaGTXM4JqIW38VxNKnDT2UdIIaj1NpdStUsv9TdZYMuUveuQUJRozy64qDfe_DFZfzOpsggT3D2edSf61gkw-WeDl9nmR1vdwFwGTtE3yNiq8TEh/s320/w2barrow.gif") no-repeat scroll left center transparent;
    display: block;
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-top: 0;
}

3. Ajouter le code JavaScript suivant juste avant la balise </head>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

# Vous pouvez changer le titre du widget en modifiant la valeur "Related Posts"
var relatedpoststitle="Related Posts";

4. Maintenant, cherchez l'une des lignes suivantes :
<div class='post-footer-line post-footer-line-1'>
ou
<p class='post-footer-line post-footer-line-1'>

5. Et ajouter le code suivant juste après
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in- script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

var maxresults=5 : c'est le nombre d'articles similaires à afficher; Vous pouvez changer cette valeur avec le nombre que vous voulez.

6. Enregistrer votre modèle.

Le widget "Articles Similaires" est installé maintenant sur votre blog. Vous pouvez le personnaliser en modifiant le code CSS.
Si vous rencontrez des problèmes lors de l'installation, vous pouvez me contacter via les commentaires.

Le script "Articles similaires" est réalisé par Blogger Plugins.

25 commentaires:

  1. bonjour merci pour cet article
    j'ai suivi avec une grande attention les 3 etapes mais "articles similaires" n'apparait tjs pas sur mon blog
    merci

    RépondreSupprimer
  2. Bonjour Sofia,
    j'ai visité ton blog (fashion-bakchic) et j'ai remarqué que vous n'avez pas terminer toutes les étapes (Vous avez manqué l'étape 4, 5 et 6).

    Pour terminer l'installation du widget, cherchez la ligne suivante :

    <div class='post-footer-line post-footer-line-1'>

    et juste après coller le code de l'étape 5 puis enregistrer votre modèle.

    Bonne chance.

    RépondreSupprimer
  3. Bonjour

    Avant que j'installe ce Widget, est-il possible que ce widget puisse être détaché de la barre en bas contenant le nom du rédacteur, le nombre de commentaires ?
    En quelque sorte qu'il puisse être entre la fin de l'article et la barre en question, permettant ainsi de différencier les deux parties, avec possibilité de le paraméter au niveau de couleur du texte des titres des articles, la couleur du fond.
    Merci d'avance

    Coridalement

    Laurent

    RépondreSupprimer
  4. Bonjour Laurent ,
    insérez le code de l'étape 5 juste après la balise <data:post.body/>

    Pour changer la couleur des titres, ajouter la ligne suivante : #related-posts a{color:code_de_la_couleur;} juste avant #related-posts a:hover

    Pour ajouter un couleur de fond, insérez cette ligne : background:#code_de_la_couleur; juste après #related-posts {

    Pour les codes couleurs consultez les liens suivants :

    http://theblogueur.blogspot.com/2012/03/code-des-couleurs-html-css.html

    http://theblogueur.blogspot.com/2012/03/generateur-de-code-couleur-hexadecimal.html

    RépondreSupprimer
  5. Bonjour

    Tout d'abord merci d'avoir répondu si vite à ma question.
    J'ai suivi exactement le protocole d'installation mais... car il y a toujours des mais :-)
    La recherche de dans le code html après avoir développé les modèles de gadget m'en affichait 2. En insérant soit en dessous du premier soit en dessous du second, le résultat donnait... rien :-(
    Pour m'assurer du bon fonctionnement du code, j'avais auparavant crée un blog fermé, fait l'import des post que j'avais posté sur mon premier blog et je n'avais en rien modifié la feuille de style du second.
    Ainsi j'étais sûr que tout était "clean". Mais malheureusement comme je disais plus haut cela ne fonctionne pas.
    Alors ma question est simple : aurais-je oublié quelque chose dans le protocole d'installation ou simplement Blogger n'accepte pas ce type d'ajout.

    Cordialement

    Laurent

    RépondreSupprimer
  6. Bonjour

    Comme dans mon précédent post la ligne de commande complète a disparue, je complète mon précédent post par ceci.
    Il faut donc lire ..... La recherche de data:post.body/ (j'ai bien sûr enlevé les cotes devant et à la fin.
    La suite dans le précédent post.

    Cordialement

    Laurent

    RépondreSupprimer
  7. Bonjour ,
    Ce widget est crée spécialement pour le plateforme Blogger, donc il accepte ce type d'ajout :)
    Vous pouvez voir la démo dans le lien suivant (j'utilise le même widget) :

    http://theblogueur-template.blogspot.com/2012/05/this-is-just-going-to-be-another-test.html

    Recommencez toute la procédure, mais surtout, vérifiez que vous avez bien copier les codes (n'oubliez pas de défiler les zones de texte dans l'étape 2 et 5).
    Pour l'étape 5, placer son code juste après la première occurrence de <data:post.body/>

    RépondreSupprimer
  8. Bonjour,

    Super article, chez moi ça a marché du premier coup.
    http://lettredalsace.blogspot.fr/

    Merci

    RépondreSupprimer
  9. Bonjour et merci pour ce très bon tutoriel. J'ai essayé de le suivre à la lettre mais je n'arrive pas à faire apparaître le widget. Pourriez-vous m'aider à trouver le grain de sable ? Vous remerciant par avance,
    http://yourcoach-lemag.blogspot.fr/


    Benoît

    RépondreSupprimer
  10. @Benoit Ligier
    Le widget est bien installé sur votre blog!

    RépondreSupprimer
  11. Merci pour votre réponse ! Mais que dois-je faire maintenant pour voir apparaître après chaque article les articles similaires ? Car pour le moment ce n'est pas le cas. Merci et très bonne journée,

    RépondreSupprimer
  12. Bonjour Benoit ,
    Le widget est affiché sur tous les articles que j'ai consultés!
    à noter que le script affiche les articles de la même catégorie (qui ont le même libellés)
    donc si un article n'a pas de libellé ou si le libellé contient seulement un article, le widget ne sera pas affiché.

    RépondreSupprimer
  13. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  14. Il semble que certains voient le widget et que d'autres (comme moi) ne le voit pas. J'ai pu le constater en copie écran. Quelle peut en être la cause ?

    RépondreSupprimer
  15. Ce doit être un problème de votre navigateur,
    Vérifier que le Javascript est activé..
    Essayer de mettre à jour le navigateur, de vider cache et cookies..
    Restaurer les paramètres d'internet explorer:
    Outils > Options Internet > Avancée > Restaurer les paramètres avancées..
    Et en bout de course si tout ça ne donne rien, d'essayer un autre navigateur.

    RépondreSupprimer
  16. vraiment sympa ca marche 10/10
    voici mon blog FreeBook
    AbdouBatna.blogspot.com

    RépondreSupprimer
  17. Bonjour, j'adorerais installer ce widget mais la balise" < p class='post-footer-line post-footer-line-1' >" est introuvable dans mon code CSS, elle n'existe pas, de ce fait je ne peux pas l'installer, et je ne peux installer aucun autre widget du même genre... Sais tu de quoi cela peut venir et comment y remédier sans changer de modèle de CSS ? merci, Bibulle.

    RépondreSupprimer
  18. Bonjour Bibulle,
    dans le tableau de bord allez à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"

    retrouver ensuite la ligne suivante :
    <data:post.body/>

    et juste après, ajouter le code de l'étape 5

    RépondreSupprimer
  19. je veux savoir comme je peux mettre le lien d'une page avec j'aime dans un message??

    RépondreSupprimer
  20. @Guilouzi sabrine
    Votre demande n'est pas clair.. pouvez vous préciser?

    RépondreSupprimer
  21. J'ai suivi il me semble à la lettre votre tuto ... mais rien ne s'affiche sur mon blog http://les-kikis-a-shanghai.blogspot.com/
    Je crois que j'aurais besoin d'un petit coup de main.

    Merci beaucoup !

    RépondreSupprimer
  22. Bonjour,

    J'ai suivi toutes les démarches mais malheureusement ça ne s'affiche pas.
    Bien à vous,
    http://sophienjoy.blogspot.com/

    RépondreSupprimer
  23. Check it out! I will professionally rewrite an article up to 500 words for $5 on #Fiverr https://www.fiverr.com/s2/8e3fdab858

    RépondreSupprimer
  24. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  25. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer