mercredi 22 mai 2013

Related posts

Oui, j'ai mis pas mal de temps à trouver un système de "related posts" à peu près correct... Messages en relation). La plupart de ceux que j'avais testés avant me mettaient n'importe quoi!

Ici, j'ai trouvé mon bonheur: helplogger.blogspot.fr



1. D'abord, allez à </head et juste avant, collez ce code:

   <!--Related Posts with thumbnails Scripts and Styles Start-->

<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil69GTpH3fQG4nqZtJuIq-TTPlT1sEIW1Qoo-ncwFXmoZILdwBvUhyphenhyphen1JIVpHyIGp_nRLsMPqqZ5G9exR7K1txvZ2xDI9Gzs0pESPMeIRg1mxfF9Y5gZPNFOd8z9FwfK94FyJTJgzcgAQ_y/s1600/no_image.jpg&quot;;
var maxresults=8;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>

<!--Related Posts with thumbnails Scripts and Styles End-->

Beaucoup de choses peuvent être changées dans ce code à votre convenance...
Voici notamment la page avec les différents *.js (tous ne fonctionnent pas): http://helplogger.googlecode.com/svn/trunk/

2. Avant <div class='post-footer'> (le deuxième chez moi mais il ne faut pas se décourager et faire des essais... Ce sera peut-être le premier pour vous.)

<!-- Related Posts with Thumbnails Code Start-->

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3gHvPf2Yp6ob4JEjUNW-MgC5HApb9zrUuivA64vuYBZLn1lZYkWoG0aq6Yhq-uVfnFrF-5cf0igXl2IPTeGPBL65UH3XeTQ0EpzMPKSVR9AF56RFXoGGrB-52nd1O_zJxZPZcVG4CBbNo/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Le code en orange est peut-être une sorte de "mouchard". A voir...

Je re-modifierai certainement ce post un peu trop succinct bientôt, mais ce soir, je n'ai pas le temps. Trop tard...

On peut modifier pas mal de choses dans le code et on peut utiliser un autre fichier JS ici:

http://helplogger.googlecode.com/svn/trunk/

J'utilise celui-ci: http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js
Celui d'origine donnait en effet des thumbnails un peu trop gros à mon goût. Si vous pouvez héberger votre propre JS vous-même, il vous sera possible de modifier encore plus de choses.


Aucun commentaire:

Enregistrer un commentaire