Afficher un resumé du message + Photo (Blogger)




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://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>

<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 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://blogspot.leblogger.com/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.fr/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://www.leblogger.fr' style='display:none;'>leBlogger</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...

21 Commentaires

Laisser un commentaire

  1. Bonjour,
    Je viens de faire la manip... et cela n'a pas fonctionner... en effet blogger me signale qu'il faut que le message soit fermer... (???) Pour moi j'avoue ne pas comprendre...S.O.S.
    voyage4

    RépondreSupprimer
  2. hello... hapi blogging... have a nice day! just visiting here....

    RépondreSupprimer
  3. super la nouvelle méthose pour résumé les articles avec image

    RépondreSupprimer
  4. J'ai un problème, j'aimerai que ça ne le fasse que sur les articles mais pas sur les pages

    RépondreSupprimer
  5. coucou, c'est super ça marche, et justement je voulais absolument ce systeme pour mon blog :)
    merciii beaucoup :)

    Peux tu juste ajouter comment mettre la vignette à gauche s'il te plait car quand j'ai ajouté du code, c'est le lien "lire la suite" qui a bougé lol :)

    Encore merci :)
    Loulou :)

    RépondreSupprimer
  6. Bonjour j'ai utilisé votre méthode et elle fonctionne. Seul souci, je voulais seulement résumer mes articles sur ma page d'acceuil. Or toutes mes pages sont résumées. Que faire?

    RépondreSupprimer
  7. Bonjour,
    Merci pour l'aide, j'ai suivi tes explications par contre j'ai une question, pourquoi est-ce que dans les codes HTML il y a les liens de ton article et de ton blog ?
    Merci encore.

    RépondreSupprimer
  8. Bonjour, ça a fonctionné pour moi aussi.
    Tous mes messages sont résumés.
    Mais problème: mes "pages" sont aussi résumées et quand je clique sur mon lien "lire la suite", ça ne se développe pas. Résultat: impossible de lire les "pages" dans leur intégralité. Que faire ?

    RépondreSupprimer
  9. Bonjour,
    Je ne sais pas si vous suivez votre blog régulièrement et répondez aux messages mais je tente quand même!
    Je suis desespérée!J'ai essayer votre methode et tout marche parfaitement!Par contre,Pouvez vous m'aider svp: Comment afficher Lire la Suite que sur ma page d'accueil principal et non sur toutes les pages du Blog?
    Dois je ajouter quelque chose?
    Merci beaucoup...

    RépondreSupprimer
  10. Je ne trouve pas le "Modifier le code HTML" sur la page Mise en page... :(
    help me !

    RépondreSupprimer
  11. c'est bon j'ai trouvé en fait faut aller dans "Modèle" et pas dans "Mise en page"

    RépondreSupprimer
  12. Pour les personnes qui cherchent comment n'afficher que les résumés sur la page d'accueil ou uniquement sur les pages d'articles suivez ce tutoriel: http://blogger-astuces-tutoriels.blogspot.fr/2012/10/afficher-un-widget-uniquement-en-page.html

    RépondreSupprimer
  13. Bonjour, j'ai un soucis avec mon modèle, en fait j'aimerais que les articles s'affichent directement et qu'on n'ai pas à cliquer sur " read article "

    je vous laisse aller voir : http://amuslinblouse.blogspot.fr/

    RépondreSupprimer
  14. http://www.leblogger.fr/2008/11/blogger-afficher-partie-du-message-lire.html

    RépondreSupprimer
  15. Génial génial génial !!! Merci pour ces superbes info :)

    RépondreSupprimer
  16. Bonjour, je ne trouve pas "développer des modèles de gadget" sur mon blog unjardinsinonrien.blogspot.com
    Est ce moi qui ne voit pas clair ou cela vient il de mon modèle ? Merci

    RépondreSupprimer
  17. Bonjour, je ne sais pas ce que j'ai pu manipulé mais quand j'appuie sur lire la suite mon article apparait 2 fois de suite pourriez vous m'aider à résoudre ce probleme

    RépondreSupprimer
  18. bonojur j aimerais savoir comment i faut faire car quand je veux partager le lien sur Facebook il ne me mets la bonne photo . je ne peux choisir que entre les miniatures de mon profil et celle des gadgets ..

    RépondreSupprimer
  19. Il y a une meilleur methode partager a chaque fois les articles

    La methode pour lier facebook et son blog : http://www.leblogger.fr/2010/05/importer-le-flux-rss-dun-blog-dans.html

    RépondreSupprimer
  20. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne