Solution pour résumer vos articles avec la nouvelle méthode de Blogger

Résumé
Comme vous le savez tous, Blogger a introduit une nouvelle fonctionnalité il y a quelques jours (Article d'introduction) qui permet de résumer les articles en cliquant simplement sur le bouton "Insérer un saut" (comme dans Wordpress). Cependant, la plupart d’entre vous qui ont essayé d’utiliser cette fonctionnalité ont rencontré plusieurs problèmes, donc voici les solutions.

L’article n’est pas résumé alors que vous avez cliquez sur le bouton "Insérer un saut" ou bien l’article est résumé mais la mention Lire La Suite n’apparait pas:

Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez :
<data:post.body/>
Et juste après ajoutez ceci :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'><data:post.jumpText/></a>
</div>
</b:if >
Personnaliser le lien Lire La Suite:
Par défaut l’expression "Plus d’infos" (ou Read more) est affichée à la fin des résumés invitant les visiteurs à lire l’article en entier, vous pouvez modifier cette expression avec le mot ou l’image que vous voulez en remplaçant le texte en rouge dans le code précédent avec par exemple: Lire La suite... ou avec une image: <img src="URL_De_Votre_Image" alt="Lire La Suite" title="Lire La Suite"/>

Vous pouvez également ajouter des éléments de styles en utilisant la classe jump-link.
Par exemple pour modifier la position, la couleur ou l’arrière plan du lien Lire La Suite, ajoutez ce code juste avant ]]></b:skin> :

/* LireLaSuite */
.jump-link a{font-family:Arial, Helvetica, sans-serif; font-size:16px; display:block;
padding: 3px 1px 3px 1px;color:#000; float:right; text-align:center; width:100px; height:20px; background:#F8F8FF; border:2px solid #EDEDED; text-decoration:none; margin-bottom: 15px; }
.jump-link a:hover {color:#fff; text-decoration:underline; background: #00FF00;}

L’article est bien résumé mais la barre latérale est affichée en bas de la barre centrale (En dessous des messages du Blog)

Si vous avez essayé de résumer vos articles par le passé, vous avez sûrement testé la méthode avec le class="fullpost" et vous avez sûrement constaté que quelques articles étaient bien résumés et d’autres ne l'étaient pas.
Les articles apparaissaient en entier parce vous avez mal placé le marqueur de résumé : <span class="fullpost">, avec la nouvelle méthode de Blogger c’est la même histoire.
Lorsque vous cliquez sur "Insérer un saut" Blogger ajoute le marqueur <!-- more --> au code html de votre message, mais si ce marqueur est ajouté à l’intérieur d’une balise <div>....</div> cela va produire un bug et votre barre latéral va être déplacée ….

La seule solution à ce problème est de vérifier manuellement et pour chaque message que le marqueur <!-- more --> n’est pas à l’intérieur d’une balise <div>....</div>

Exemple: le marqueur <!-- more --> est à l’intérieur d’une balise <div> .... </div>
Résumé Blogger

Il faut le déplacer à l’extérieur de la balise <div> .... </div> donc juste après l'élément fermant </div>
Résumé Blogger

Pour finir:

Personnellement j’utilise le "Vrai résumé automatique" où il me suffit d’écrire le message et de le publier sans me sourcier de DIV ou de vérifier à chaque fois si mon blog ressemble toujours à mon blog ….
En plus pour utiliser cette méthode il faut évidement annuler les autres méthodes de résumé ce qui implique qu’il faut re-résumer tous les messages du blog si vous ne voulez pas que vos articles s’affichent en entier dans la page d’archives, de libellés et de recherche.
Bien sur la méthode de Blogger à l’avantage de garder la mise en forme des résumés et d'afficher des résumés de taille différentes mais cela existe depuis plusieurs années….
Libellés : Publié le samedi, octobre 03, 2009
36 Commentaires
  1. Bonjour

    L ancienne methode (span = fullpost) avait l inconvénient que le display:none posait des problèmes sous IE avec un iframe dans le corps du message.

    Problème résolu avec le post jump

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

    RépondreSupprimer
  3. C'est ça que j'utilisai depuis un bout de temp merci!!! J'espère que tu trouvera une autre solution sous peut.

    RépondreSupprimer
  4. Pour plus de facilite, on peut remplacer le tag
    alt;!--more-->
    par
    alt;/div> alt;!--more--> alt;div style="text-align: left">

    On pourra remplcer left par center ou justify, meme si je recommande de laisser left pour un plus grand confort de lecture.

    RépondreSupprimer
  5. @ Guillaume
    ajouter encore des DIV je ne sais pas si c'est une bonne idée ni si ça va marcher, mais c'est certainement pas SIMPLE ....
    On peux aussi essayer de remplacer les DIV par des SPAN ....

    Merci pour l'orthographe.... j'assure bien, hein !!!!

    RépondreSupprimer
  6. @ Admin@T.F
    Je suis convaincu que l'équipe de Blogger va rapidement améliorer cette fonctionnalité et résoudre le bug de la SideBar .....

    RépondreSupprimer
  7. Soufiane
    Merci pour ton site merveilleux. J'aimerais savoir comment faire pour que un de mes messages soit toujours le premier qui apparait. J'ai lu qu'il fallait changer la date du message mais je ne sais pas comment faire. Merci pour ton aide.

    RépondreSupprimer
  8. @ Hélène Boissonneault
    Merci beaucoup beaucoup pour le Don
    On m'a beaucoup posé cette question mais Je pense que Blogger va publier une nouvelle fonctionnalité pour créer des pages statiques dans les prochaines jours, donc je ne détaille pas trop ma réponse ....

    -tu crées le message et tu le publies. Ensuite tu reviens dans le message pour modifier la date et mettre une date future : 2015. (il y a un bouton "options" en bas a droite lorsque tu rédiges les messages)

    -Dans Blogger "Paramètre", "mise en forme", tu choisi d’afficher un seul message dans la page d’accueil.

    Pour cacher/afficher les widgets dans la page d’accueil tu peux lire cet article sur Les conditionnels b: "if / b: else" qui offrent énormément de possibilités.

    Voilà déjà maintenant dans l’accueil de ton blog il n’y a qu'un seul article accompagné des widgets que tu as choisi.

    J'espère que ça va te servir et si tu as des questions n’hésite pas

    RépondreSupprimer
  9. MERCI MERCI MERCI

    Merci pour tous tes trucs.

    Et pour le don, ça me fait plaisir, tu le mérites pleinement. Mon site est emplie de tes trucs et astuces, ça se paye un peu je trouve. J'aurais aimé donné davantage mais pour l'instant ce n'est pas possible pour moi.

    Continue ton superbe travail.

    RépondreSupprimer
  10. Les div ca a marche pour moi...
    Continue ton excellent travail Soufiane, je pense que tout le monde apprécie tes astuces et ta reactivite.

    Merci beaucoup

    RépondreSupprimer
  11. Super astuces . Continue: tu est le meilleur ;)

    RépondreSupprimer
  12. @ Guillaume
    @ Cenimation
    Merci les gas ...

    RépondreSupprimer
  13. Bonjour, je tombe par hasard sur votre site, je le trouve utile et interessant, bonne continuation !

    RépondreSupprimer
  14. salut et merci de m'avoir répondu...le "lire la suite" fonctionne parfaitement et ce, depuis le début...j'ai dû toucher à quelquechose car comme je te disais, j'ai désormais tous mes gadgets qui se trouvent a la suite de mes messages sur la page d'accueil...quand je clique sur lire la suite du message que je voulais résumer,il s'ouvre dans une nouvelle page(parfait!!) et là, les gadgets s'affichent a droite...normal,mais je comprends pas.
    comment les remettre a leur place dans ma page d'accueil...
    merci.
    virginie

    RépondreSupprimer
  15. @ ninie
    regard la deuxième partie du tuto :
    L’article est bien résumé mais la barre latérale est affichée en bas de la barre centrale (En dessous des messages du Blog)

    RépondreSupprimer
  16. il faut préciser que avec le nouveau fonction de blogger on a la possibilité de résumé nos article sans changer sur le code .
    la solution et de passer au nouveau éditeur de messages. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif

    "Paramètres
    "paramètres globaux" eb bas de la page .
    Cochez "Editeur mis à jour".
    Et vous voila ...http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
    Pour plus d’infos

    http://blogger-au-bout-du-doigt.blogspot.com/2009/10/resume-darticles-laccueil-en-un-clique.html

    RépondreSupprimer
  17. @ اربح من الانترنت

    As tu regardé l'article d'introduction que j'ai écrit il y a exactement 47 jours ???????

    Le lien que tu donnes parle de la même chose avec seulement 7 semaines de retard....
    Et comme expliqué dans l'article, il ne suffit pas d'utiliser le nouveau éditeur pour....
    Essai !!!!

    Pour info, j'utilise le nouveau éditeur de messages depuis 5 ou 6 mois, regard ça : Blogger in Draft

    RépondreSupprimer
  18. @ اربح من الانترنت
    sinon,

    marhaban bika houna ya akhi, ana soufiane mina al mag'rib
    innani atakalamou allourata al arabiya bi "Talakah" hahahaha....

    RépondreSupprimer
  19. C'est encore moi, Laurence, du blog http://onzejoursanewyork.blogspot.com/
    Dans un message, j'ai supprimé un "lire la suite" et la magie c'est faite !
    Merci encore,

    Laurence

    RépondreSupprimer
  20. J'avais déjà tenté de customiser le jump-link, sans succès. J'ai réessayé avec le code que tu proposes, couleur et background s'appliquent, mais impossible d'aligner le lien lire la suite à droite. J'ai finalement renoncé, le laisser à gauche ne me dérange pas vraiment. Mais je continue de m'interroger sur le pourquoi du comment...

    RépondreSupprimer
  21. J'ai un théme que j'ai télécharger, et je souhaiterais justement retirer le lire la suite , mais je ne sais pas comment faire ?

    RépondreSupprimer
  22. @Océane
    Ton Thème utilises la même methode pour résumé les articles que celle-ci : http://www.leblogger.com/2009/06/lire-la-suite-partie-message.html

    Il faut supprimer deux codes, mais enregistre ton thème avant ....

    RépondreSupprimer
  23. @Laurence
    Je ne sais pas c'est quoi le sujet mais c'est cooool :a

    RépondreSupprimer
  24. @Hetkala
    C'est moi qui m'était trompé b-( j'ai mis Position au lieu de Float 8-)

    J'ai modifié le post et maintenat le lien "Lire la Suite" aura la même apparence que celui de LeBlogger.com et sera placé a droit :a .....

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

    RépondreSupprimer
  26. Salut Soufiane,
    Je suis actuellement en train de créer un blog et ton site m´aide beaucoup. Sans tes solutions je pense que je n´aurais pas pu avancer si vite. Un grand merci.
    Je me permet de te poser une petite question...est-il possible de mettre des résumés avec photo hors de la page d´accueil ?
    Je réussi à mettre les résumés, mais uniquement dans la page d´accueil et ça m´embete un peu. Je voudrais les mettre dans un article normal et pas la page d´accueil...tu as une idée ? Encore merci pour ce site.

    RépondreSupprimer
  27. Bonjour Souffiane,

    Comment vas-tu ? Tu ne peux imaginer le bonheur que j'ai à utiliser ton site qui m'apporte beaucoup de réponses à mes questions de technicienne du dimanche.

    Je t'ai posé quelques questions sur d'autres posts, mais oublie les, j'ai pu trouver mes réponses (en fouillant entre ton blog et les codes sources de certains blogs).

    Tu peux voir le résultat de mon blog (pas encore de fond ou de bannière, attention, c'est encore un construction !) ici
    http://aliceetpeterpunk.blogspot.com/

    Mais une question demeure sur le dernier widget que j'ai installé. J'ai appliqué la fonction "Read More" de blogger que j'ai remplacé par une image, seulement, l'image est à gauche et j'aimerais qu'elle se situe plutôt à droite. De plus, je me demandais si il y avait un moyen qu'elle apparaisse au début du message et non en fin (mais ça, ce serait la cerise sur le gateau!).

    Si tu pouvais m'aider...

    Merci ^^
    8-(

    RépondreSupprimer
  28. Alice & Peter Punk
    C'est déjà dans l'article ;) ;) ;) ;)
    Tu n'as pas regardé l'article, n'est ce pas ;)

    RépondreSupprimer
  29. Merci pour cette aide ! Encore une fois, leBlogger m'a sauvé !!!

    RépondreSupprimer
  30. Bonjour Soufiane,
    J'ai tenté de suivre vos indications... mais sans succès..
    Je pensais avoir été bonne élève mais
    apparemment je suis recalée Ouiiin.
    Après avoir inséré le code.. Installé un saut de page
    Inscrit un petit lire la suite au bon endroit...
    Rien ne se produit. Koijéfédetravers? ;)
    Je serai très heureuse d'avoir un peu d'aide
    car mes articles sont tellement longs qu'ils m'effrayent moi-même :)

    RépondreSupprimer
  31. Merci pour toutes tes astuces, ton blog est une véritable source de renseignements pour les débutants comme moi.
    Je viens de tester cette astuce mais j'ai 2 fois le lien "lire la suite" qui apparaît à la fin du résumé.
    Comment régler ce petit problème??

    RépondreSupprimer
  32. Pas de réponse! mais tant mieux car comme ça j'ai trouvé toute seule!Merci
    Bonne journée

    RépondreSupprimer

Copyright 2015 Soufiane.fr