Résumé Automatique De Vos Articles Avec Image

Dans ce tutoriel, je vais vous expliquer comment afficher un résumé automatique de vos articles avec image et lien "Lire la suite" dans la page d'accueil, des archives, des libellés et de recherche.

Installation Du Hack : Résumé avec Image et "Lire la suite"

Important : Télécharger votre modèle avant de commencer.

1. Connectez-vous à blogger
2. Allez à "Présentation" > "Modifier le code HTML"
3. Cocher la case "Développer des modèles de gadgets"
4. Recherche la balise </head> et juste avant copier/coller le code suivant :

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {  
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

# Vous pouvez changer les valeurs numériques en fonction de votre utilisation.

summary_noimg = 430;          :La longueur du résumé d'article sans image
summary_img = 340;              :Longueur du résumé d'article avec image
img_thumb_height = 100;       :Hauteur en pixel de l'image de résumé
img_thumb_width = 120;        :Largeur en pixel de l'image de résumé

5. Maintenant recherchez la balise <data:post.body/> et juste avant copier/coller le code suivant :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>

</div>

<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Lire la suite ... </a></span>
</b:if>
</b:if>

6. Enregistrer votre modèle.