Résumé automatique avec image de vos articles dans la page d’accueil, des archives et des libellés

Aujourd’hui je vais vous montrer comment afficher un résumé avec image de vos articles dans la page d’accueil, des archives, des libellés et de recherche. Tout cela sera fait de manière totalement automatisé, c'est-à-dire que vous allez appliquer l’astuce et vos articles (anciens et nouveaux) seront résumés sans que vous n'ayez à les modifier. 

J’utilise cette astuce depuis la création de mon blog et voici un aperçu de ce que ça donne :

Mise à jour 4 --- 15 Janvier 2013

Changement d'hébergement.

Les avantages

 -Tous vos articles sont résumés automatiquement.
 -La première image est affichée dans le résumé automatiquement.
 -Les articles dans Les pages d’Archives, de Libellés et les résultats des recherches internes sont automatiquement résumés.
 -Deux copier/coller suffisent pour appliquer cette astuce.
 -Vous choisissez la longueur du résumé et la taille des images.

Inconvénients

 -Le seul point négatif de cette astuce est que les résumés perdent toute la mise en forme. 
Mais lorsque vous cliquez sur « lire la suite » l’article est affiché normalement.

 -Les images sont déformée si leur taille est trop différente de la taille définie par défaut pour les résumés.

Cette astuce est parfaite pour les blogs qui utilisent peu (ou pas) d’images dans les articles.
Elle est surtout pratique pour tout ceux (y compris moi) qui veulent résumer leur articles sans trop se prendre la tête en utilisant la méthode classique le bouton de résumé de Blogger.
J’utilise toujours des images de même dimension (128x128) et une longueur de texte équivalente, ce qui donne un look Pro et assez beau à la page d’accueil.

Installation - Étape 1 :

Comme je l’ai dit en haut, deux petits copier/coller suffisent pour utiliser cette astuce. La preuve :
Connectez vous à Blogger, Allez dans "Présentation", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez (Ctrl + F) </head> et juste avant copier/coller ces lignes:

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;           /* Longueur des des résumés, article avec image */
img_thumb_height = 128;       /* Hauteur de l’image dans le résumé */
img_thumb_width = 128;       /* Largeur de l’image en pixel */
</script>
<script src='http://blogspot.leblogger.com/js/LireLaSuite0.js' type='text/javascript'/>

Pour afficher l'image du résumé à droite

Utilisez plutôt ce code juste avant </head&gt;

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;           /* Longueur des des résumés, article avec image */
img_thumb_height = 128;       /* Hauteur de l’image dans le résumé */
img_thumb_width = 128;       /* Largeur de l’image en pixel */
</script>
<script src='http://blogspot.leblogger.com/js/LireLaSuiteDroite0.js' type='text/javascript'/>

Pour Centrer l'image du résumé

Pour afficher le résumé avec l'image au centre (taille réelle de l'image, comme affichée dans l'article non résumé) et le texte du résumé juste en dessous de cette image, copier/coller ce code avant </head> :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;        /* Longueur des des résumés,article sans image */
summary_img = 250;     /* Longueur des des résumés, article avec image */
</script>
<script src='http://blogspot.leblogger.com/js/LireLaSuiteCentre0.js' type='text/javascript'/>

Installation - Étape 2 :

Maintenant, recherchez <data:post.body/> et remplacez le par ces lignes:

<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 style='float:right;padding-top:20px;'><a expr:href='data:post.url' rel='bookmark'> Lire La Suite...</a></span>
</b:if>
</b:if>

Vous pouvez utiliser une image au lieu de l'expression Lire La suite... en la remplaçant par : 

<img src="URL de votre image" title="Lire La Suite" alt="Lire La Suite">

Maintenant les messages de votre page d’accueil, archives, libellés et de recherche sont résumés avec une image et le lien Lire la suite... 

Remarque

Si vous voulez contrôler la taille (Message par message) et la mise en forme des résumés il faut utiliser la méthode classique et résumer les articles un par un en suivant ce tutoriel. la nouvelle fonction de résumé de Blogger.