Comment ajouter un Widget Articles Similaires sur Blogger/Blogspot


Depuis quelques temps maintenant après avoir une nouvelle fois changer le template de mon blog, j'étais à la recherche d'un widget "Articles Similaires" sans grand succès, mais c'est maintenant chose faite.


L'avantage de ce fameux Widget "Articles Similaires", cela permet à vos visiteurs de pouvoir découvrir un nouvel article sur la même thématique  juste après la lecture du post.


Étape 1:  connectez-vous à votre compte blogger et cliquez sur modèle, puis modifier le code HTML


Étape 2: positionnez vous à l'intérieur du code et faite CTRL+F ou B du clavier

Étape 3: Recherchez la balise </head> dans la boite de dialogue HTML

</head>

Étape 4: Copier Coller juste avant la balise  </head> le code suivant

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

Étape 5: Recherchez la balise <div class='post-footer'>

<div class='post-footer'>

Étape 6: Juste au dessus de la balise <div class='post-footer'> coller le code suivant

<!-- Related Posts with Thumbnails Code Start--><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><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop><script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=5;var relatedpoststitle="<b>Related Posts:</b>";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://bouquinovore.blogspot.fr/2014/11/comment-ajouter-un-widget-articles.html" rel="nofollow" >Articles Similaires Widget</a></div></b:if><!-- Related Posts with Thumbnails Code End-->

Une fois enregistré le modèle, si le Widget Articles Similaires n'apparait pas, il vous suffit de coller le dernier code ci-dessus(étape 5) juste avant la balise </b:includable> prècédé par le code suivant <b:includable id='postQuickEdit' var='post'>

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


Vous avez aimé cet article ? Alors partagez-le avec vos amis!