22 mars 2012

Résumé Automatique De Vos Articles Avec Image

Readmore Blogger Hack
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.

4 commentaires:

  1. " Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : The element type "div" must be terminated by the matching end-tag ".

    Error 500 "


    Ne marche pas

    RépondreSupprimer
  2. Everyone loves it when folks come together and share opinions.
    Great blog, stick with it!

    Check out my web-site ... vitiligo treatment

    RépondreSupprimer
  3. ça n'a pas fonctionné pour moi http://haiti-tribune.blogspot.com. allez voir et comme vous pouvez m'aider et je vous serai très reconnaissant.

    Merci d'avance

    RépondreSupprimer