jeudi 15 octobre 2009

Lire la suite... (enfin dans Blogger)

Depuis le 9 septembre, Blogger permet de couper un article pour que n'apparaisse sur la page d'accueil que le début du message, avec un lien "Lire la suite". Je suis encore partagée sur l'utilisation de cette fonction : j'aime bien tout lire d'un coup sans devoir cliquer pour lire la fin puis recliquer pour voir les sujets suivants, mais je reconnais qu'une succession d'articles longs dissuade de balayer les derniers messages publiés sur un blog.

La difficulté pour le rédacteur est d'être suffisamment passionnant dans le début de son article pour que le lecteur éprouve la nécessité impérieuse de lire la fin, ou de rédiger spécifiquement une sorte de résumé de l'article... le contraire de ce que je viens de faire!

Avec le nouvel éditeur de Blogger, il suffit de positionner le curseur à l'endroit où l'on veut couper son texte puis de cliquer sur l'icône "Insérer un saut" complétement à droite de l'éditeur.



Pour ceux qui n'auraient pas basculé vers le nouvel éditeur et n'auraient donc pas le bouton dans l'éditeur, il est possible de rajouter "manuellement" cette coupure avec l'onglet "Modifier le code HTML" en insérant le code <!-- more --> à l'endroit de la coupure.

Grâce à Céline j'ai réussi à modifier le libellé qui invite à lire la suite (il suffit d'aller dans Mise en page > Eléments de la page, de modifier l'élément "Messages du blog" et de remplacer le "texte du lien de la page de messages" par ce que l'on veut).

Simple mais...

Edit - La suite ne concerne que ceux chez qui le lien "Lire la suite..." n'apparaît pas sur la page d'accueil alors qu'ils ont inséré un saut, soit avec le bouton prévu à cet effet soit en rajoutant directement <!--more--> dans le code HTML

Si le lien "Lire la suite..." s'affiche correctement, il ne faut pas rajouter le code tel qu'expliqué ci-dessous (sans quoi le lien s'affichera deux fois).


Quand j'ai essayé la 1ère fois cette fonctionnalité, je voyais bien sur la page d'accueil uniquement la 1ère partie de mon article... mais aucun lien pour lire la suite! Alors que sur mon autre blog, ça marchait tout seul...

La solution se trouve apparemment (ça a l'air de marcher) dans l'article How to Use Blogger's Integrated Read More Feature qui signale que le "Read more" peut ne pas apparaître, normalement uniquement si vous avez modifié le modèle. Effectivement c'est mon cas, j'ai rajouté des boutons de partage en bas de chaque article...

L'article de l'aide de Blogger Creating 'After the jump' summaries précise que le problème peut se poser en cas d'utilisation de modèles à 3 colonnes.

Avant toute chose, sauvegardez votre modèle actuel (dans Mise en page > Modifier le code HTML cliquer sur "Télécharger le modèle dans son intégralité").

Ensuite, cliquez sur "Développer des modèles de gadget" et cherchez le code <data:post.body/> (n'oubliez pas l'usage de la touche CTL F pour trouver facilement le texte dans la page)

puis ajoutez juste après le bout de code suivant :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Il n'y a plus qu'à "Enregistrer le modèle" et à essayer sur un article...

Pour aller plus loin et pour les modèles personnalisés, plus d'indications dans l'article How to add Blogger's Read More function to customized templates

Lire aussi :
Un nouvel éditeur de message dans Blogger

(tous mes tutoriels et mes bidouilles sont dans l'index "informatique")
Rendez-vous sur Hellocoton !

24 commentaires:

  1. moi je préfère ne pas avoir à cliquer pour lire la suite....mais si le début est passionnant, je ferai un effort!

    RépondreSupprimer
  2. Merci pour cet article très très bien pour ceux qui nagent dans les codes... pour ceux comme moi quoi !

    RépondreSupprimer
  3. Myrtille, je ne comprends pas tout !
    Eclaire-moi !
    Si je suis passée au nouvel éditeur mais que je ne veux pas utiliser "insérer un saut" (à cause du bug avec mes trois colonnes), je peux utiliser !--more-- à l'endroit où je veux faire ma coupure ?
    Et j'ai juste cette petite balise à insérer dans la partie html de mon article ?
    Je n'ai pas besoin d'insérer tout un code dans mon modèle de blog, comme avec le span class="fullpost" ?
    Et dans ce cas, on peut mettre ce que l'on veut pour le Lire la suite, en allant sur le bloc message de la mise en page ?

    Ça m'intéresse au plus haut point tout ça. Je suis à deux doigts de refaire ma manip' d'installation compliquée alors si je peux l'éviter...

    RépondreSupprimer
  4. Re-coucou !
    Pardon pour ma question stupide ! Je viens de comprendre que le !-- more -- est l'écriture html de "insérer un saut", donc c'est la même chose et ça ne résout pas mon problème d'incompatibilité avec mes trois colonnes !

    Par contre, je ne comprends toujours pas à quoi servent les lignes de code que tu nous proposes d'insérer dans notre modèle, à la fin de ton article ?
    Non, je n'y mets pas de la mauvaise volonté !

    C'est peut-être pour ceux qui sont encore sous l'ancien éditeur et, dans ce cas, ça remplace ce que j'avais inséré moi, dans mon ancien modèle, pour faire fonctionner le span class="fullpost" ?

    RépondreSupprimer
  5. @Céline : < !--more-- > est la traduction html du bouton "insérer un saut" donc c'est bien la même chose.

    Le bout de code sert à afficher le lien "Lire la suite..." à l'endroit de la coupure. Il n'est pas lié à l'utilisation de l'ancien éditeur mais au type de modèle qu'on utilise (apparemment)

    Quand on utilise un modèle qui n'est pas un modèle standard de Blogger, ou quand on a bidouillé visiblement son modèle (ce qui était mon cas après avoir rajouté mes boutons de partage en bas d'article) ce bout de code n'y figure pas et il faut le rajouter soi-même.

    Je ne sais pas si l'absence de ce code dans le modèle peut être lié aussi à la disparition de ta 3e colonne quand tu insères le saut. Dans mon cas, l'insertion du saut revenait à supprimer totalement la fin de l'article...

    RépondreSupprimer
  6. D'accord Myrtille... je comprends mieux.
    Donc, pour voir si j'ai bien compris, d'après ce que tu m'expliques, il faudrait que j'essaie de rajouter ces lignes de code dans mon modèle, pour voir si ça me permet d'utiliser la "cassure" sans perdre ma troisième colonne ?

    Je vais essayer sur mon blog test tiens ! Et je te dirai si ça marche, of course !

    RépondreSupprimer
  7. Me revoilà !
    Je te confirme que ça marche sur mon blog test.
    J'ai donc inséré les lignes de code dans mon modèle 3 colonnes, puis j'ai publié un message avec une cassure, seulement... mon "lire la suite" ou quoi que ce soit d'autre s'affiche 2 fois !
    Je te laisse voir ça :ICI
    Et si je ne mets rien du tout dans le formulaire du bloc message, ça m'affiche toujours 2 fois le "plus d'infos".

    Il y a peut-être un morceau de code à enlever quelque-part !

    RépondreSupprimer
  8. @Céline : si le lien "Lire la suite" s'affiche deux fois c'est que le code était déjà dans ton modèle html - qqs lignes plus bas sans doute - et qu'il ne sert à rien de le rajouter... Il ne faut le rajouter que si le lien ne s'affiche pas au départ.

    Si tu enlèves ce que tu viens d'ajouter (lol), le lien devrait apparaître en une seule fois.

    (pas totalement évident cette manip finalement...)

    RépondreSupprimer
  9. Myrtille,
    Je lis avec une grande attention ton blog mais je n'ose jamais me lancer dans ce bidouillage.
    Le mot htlm m'effraie!!!!
    J'ai l'impression que je n'y arriverai jamais et pourtant j'adore ce que toi et Céline parvenez à faire!
    Si je m'y colle, je sens que tu vas être inondée sous les SOS
    J'attends d'avoir un peu de temps et je mets en pratique...

    RépondreSupprimer
  10. Je comprends ce que tu me dis, mais si je ne rajoute pas ce bout de code, donc si j'utilise tout simplement la cassure de texte comme j'ai essayé de le faire, ma troisième colonne disparaît !
    Alors que là, elle reste en place !

    Un truc de ouf, comme diraient tes enfants !

    RépondreSupprimer
  11. Bon, ça y est, j'ai enfin trouvé LA solution à mon problème !
    C'était une ligne qui n'était pas à la bonne place !
    Je suis pas mécontente de moi (dit-elle modestement).
    J'en avais un peu marre de passer des heures à bidouiller ces jours-ci !

    RépondreSupprimer
  12. Alors là, j'ai carrément honte.
    Je t'ai raconté n'importe-quoi avant, ça ne marche pas du tout, ma colonne se fait toujours la malle !
    Et le pire, c'est que sur mon blog-test, avec le même modèle, ça fonctionne !
    Grrrrrrr

    Au fait, tu peux effacer tous mes commentaires inutiles !

    RépondreSupprimer
  13. Moi j'essaie de ne faire que du court.. alors je ne suis pas trop concernée... mais merci de l'info, je ne savais pas ! et on ne sait jamais !

    RépondreSupprimer
  14. @Alice : il suffit de repérer quelques trucs simples et après ça roule mais si tu n'en éprouves pas le besoin, alors pas la peine de se compliquer la vie

    @Prune : je t'envie de réussir à faire court, ça dépasse mes compétences!!!

    @Céline ;-)

    RépondreSupprimer
  15. C'est encore moi ... dans ce nouvel éditeur je ne trouve plus la correction ortographique :-(

    merci de m'éclairer :-)

    RépondreSupprimer
  16. @Didi : Perso, je me méfie des correcteurs orthographiques et je ne l'utilisais pas. Mais Céline m'a aussi posé la question et j'ai bien l'impression qu'il a disparu du nouvel éditeur...

    RépondreSupprimer
  17. merci ! J'essayais depuis un moment avec différentes astuces, mais tu as
    trouvé la solution, c'est parfait !
    Voyez le résultat ici (http://emuze-mariage210707.blogspot.com/)

    RépondreSupprimer
  18. ahh merciiii ça m'a super aidée!!!

    RépondreSupprimer
  19. Merci, j'ai enfin compris comment faire après beaucoup de recherches sur internet...!

    RépondreSupprimer
  20. Alors là merci merci merci Myrtille ! j'étais en train de me prendre la tête avec les codes HTML pour essayer de modifier la page et ça ne marchait pas, et Myrtille arrive et elle me règle ça en deux temps trois mouvements, merci !!!
    du coup je garde l'adresse de ton blog précisément !
    Vanessa

    RépondreSupprimer
  21. très bonne astuce, en application sur mon blog grâce à toi ;)

    RépondreSupprimer
  22. Merci, ça va me servir pour mon blog, j'ai quelques articles à rallonge. A noter : la fonction s'appelle "insérer le marqueur d'expansion" désormais.

    RépondreSupprimer
  23. Bonjout tout le monde,
    Merci ça marche, regardez ;) http://caomode.blogspot.com/
    a bientôt !

    RépondreSupprimer
  24. Merci ça a marcher pour moi sur
    http://caomode.blogspot.com/

    RépondreSupprimer