Nouveau style article similaires avec 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/AVvXsEh8RcJmkyzizvMLzza0_WcQTyo8gq3J1o3w-Aaqp37lV6gszi9EFZ7SDPVByn3AiArOEAwndTg09kHs0ZzmRlg0pRP0NFwk5B8Un5_aQx_QnTtSf4nlhmalrrsroTDHIsLqbOYzC6sOBlQv/&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/AVvXsEh8RcJmkyzizvMLzza0_WcQTyo8gq3J1o3w-Aaqp37lV6gszi9EFZ7SDPVByn3AiArOEAwndTg09kHs0ZzmRlg0pRP0NFwk5B8Un5_aQx_QnTtSf4nlhmalrrsroTDHIsLqbOYzC6sOBlQv/&quot;;

Si vous les mettre l'ancienne version des articles similaires avec image : Ici