Blogger : Afficher un resumé du message + photo

Vous aimez cette article ?

Il ya beaucoup de "Lire la suite" hacks pour Blogger sur le web, mais aucun d'eux ne créer automatiquement des résumés de message avec des vignettes pour chaque message.
Je vais vous expliquer comment l'installer et le personnaliser...



Installation :
Deux petits copier/coller suffisent pour utiliser cette astuce:
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 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://lebloggers.blogspot.com/2009/07/methode-pour-un-resume-photo-dun.html' style='display:none;'>Résumé</a><a href='http://www.lebloggers.blogspot.com' style='display:none;'>leBloggers</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><a href='http://wwww.lebloggers.blogspot.com' style='display:none;'>leBloggers</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...