articles similaires avec une image

Le nouveau style des articles similaires avec image en bas des post en rapport avec les libellés.

Comme vous pouvez le voir dans l'image ci-dessus le widget offre une vue galerie des articles liés au moyen des libellés. Le passage de la souris sur l'image fait apparaît le titre de ce message . Pour vérifier : la démo.

Installation

1. Aller sur paramétre et le modèle HTML et cochez la case "Développer Widget modèle". Trouver (Ctrl+F) le code  ]]></b:skin>. Maintenant, collez juste avant le code au-dessus.

/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
    font-family:Helvetica,Arial,sans-serif !important;
    font-size:10px !important;
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
ul#related-posts li{
    float: left !important;
    height: auto !important;
    margin:0 15px !important;
    padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
    margin:0 13px !important;
}
ul#related-posts li a {
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #FFFFFF !important;
    display: block !important;
    height: 72px !important;
    position: relative !important;
    width: 72px !important;
}
ul#related-posts li a {
    color: #474C51 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
    height: 66px !important;
    line-height: 14px !important;
    padding:6px 0 0 6px !important;
    position: absolute !important;
    width: 66px !important;
    z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
    background: #fff !important;
    display: block !important;
    opacity:0.9 !important;
}
ul#related-posts li img {
    bottom: 0 !important;
    padding:0px !important;
}
ul#related-posts li a:hover {
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

2. Trouver le code suivant :

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

et le remplacer par celui-ci

<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkoCWa9h0zLKAzxecZcMbYkn4NYgNSI3nW_5p2M8VXmXPe-IbK04Y9Z2XictzQnLThXteKot9h5zOHxK2vJPgZPOeTjlhZ9hbOVsqgaAkLxT1efBlpIiAIlhSS6530l5cfM2k0OBvRvTRb/&quot;;
var maxresults=6;
</script>
<script src='http://bloggerz.googlecode.com/files/related_posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
        <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=6&quot;' type='text/javascript'/>
         </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>

Ce widget est personnalisé pour afficher 6 articles liées et ne s'affiche que sur la page.article Pour modifier et personnaliser voir les instructions au bas.

3. Maintenant, la dernière étape, trouver l'un de ces quatre codes :

    <div class='post-footer'>         Ou
<div class='post-footer-line post-footer-line-1'>
        Ou
<div class='post-footer-line post-footer-line-2'>
        Ou
<div class='post-footer-line post-footer-line-3'>

et placer ce code ci-dessous après l'un de ces quatre codes au dessus

<b:include data='post' name='RelatedPosts'/&gt;

Personnalisations :

1. Comment afficher les messages relatifs à chaque page et non seulement sur ​​les pages de messages?
Il suffit de retirer les deux lignes commençant par <!-- remove --> de l'étape 2. Ces lignes sont :

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
and
<!-- remove --></b:if>

2. Comment faire pour modifier le nombre de messages à afficher dans le widget?
Vous pouvez ajuster le nombre maximum de postes liés à l'affichage en modifiant cette ligne dans le code de l'étape 2.
 
var maxresults=5;
 
3. Pour changer l'image miniature par défaut, vous pouvez modifier cette ligne de code à l'étape 2

defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkoCWa9h0zLKAzxecZcMbYkn4NYgNSI3nW_5p2M8VXmXPe-IbK04Y9Z2XictzQnLThXteKot9h5zOHxK2vJPgZPOeTjlhZ9hbOVsqgaAkLxT1efBlpIiAIlhSS6530l5cfM2k0OBvRvTRb/&quot;;