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://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg&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://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg&quot;;
Si vous les mettre l'ancienne version des articles similaires avec image : Ici 

5 commentaires:

  1. dommage j'ai pas réussi http://agnagan.blogspot.com

    RépondreSupprimer
  2. Dommage, moi non plus. Mais il faudrait corriger l'article car il y a quelques passages pas clairs du tout, c'est peut là où on s'est planté :

    Voilà les passages :

    Maintenant, collez juste aprés le code au-dessus.
    ET
    3. Maintenant, la dernière étape, trouver l'un de ces quatre codes :
    et placer ce code juste après l'un de ces quatre codes au dessus

    RépondreSupprimer
  3. @BBR : il a bien une faute qui a été rectifié pour le premier code à plaçer: il faut le mettre juste aprés

    et le deuxiéme code il faut le mettre en dessous l'un des quatre codes à trouver.

    RépondreSupprimer
  4. très Bien :)

    Livres et animations d'electromécanique Gratuits

    www.genie-electromcanique.com

    RépondreSupprimer

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top