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 recherche.
Tout cela de manière totalement automatisé, c'est-à-dire que vous allez appliquer l’astuce et tous vos articles et ceux que vous allez écrire 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 :

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.
 -En affichant les résumés des articles vos pages sont se charger plus rapidement....

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 articles ont la même taille et les images sont automatiquement redimensionnées vers la taille que vous choisissez. C’est Justement le but de cette astuce : Automatiser les résumés.

Cette astuce est parfaite pour les blogs qui utilisent peu (ou pas) d’image dans leur 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 pour résumer les messages un par un.
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 :

Comme je l’ai dit en haut, deux petits copier/coller suffisent pour utiliser cette astuce. La preuve :
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez (Ctrl + F) </head> 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://lewordpress.com//Blogger/JS/LireLaSuite0.js' type='text/javascript'/>

---

Pour afficher l'image du résumé à droite, utilisez plutôt ce code juste 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 */
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://lewordpress.com//Blogger/JS/LireLaSuiteDroite0.js' type='text/javascript'/>

Pour Centrer l'image du le 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://lewordpress.com//Blogger/JS/LireLaSuiteCentre0.js' type='text/javascript'/>

---

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

<b:if cond='data:blog.pageType != &quot;item&quot;'> <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> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Lire La Suite...</a></span> <a href='http://www.leblogger.com/2009/07/automatique-lire-la-suite-image-blogger.html' style='display:none;'>Résumé</a><a href='http://www.leblogger.com' style='display:none;'>Blogger</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><a href='http://wwww.leblogger.com' style='display:none;'>Blogger</a></b:if>

Changez le texte en rouge pour personnaliser l’affichage des résumés.
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">

Enregistrez. Maintenant les messages de votre page d’accueil, Archives, Libellés et Recherche sont résumé avec 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.

Vous avez aimé cet article ? Faites le savoir : Partager dans Facebook Pour des scoops en Live, Suivez moi sur Twitter : @LeBlogger

Abonnez-vous pour recevoir facilement les prochains articles: Par Email avec Google Reader avec Netvibes dans FeedBurner