samedi 24 octobre 2009

Résumer un article et lien Plus d'infos

La possibilité de n'afficher qu'une partie d'un article est une option qui manquait aux rédacteurs de longs messages.
Blogger vient d'ajouter cette fonctionnalité que l'on appelle plus communément par le "Lire la suite" (ou le "Plus d'infos" selon l'indication du texte du lien qui renvoie vers la suite (justement) de la lecture du message ainsi tronqué).

Cette option n'est pas sans difficulté à manier. En effet, selon les cas, il n'est pas rare de constater que son usage se traduit par un dérèglement général du blog qui voit la colonne de droite se retrouver tout en bas de la page d'accueil. Cela fait un peu désordre !

On ne le répétera jamais assez : avant de faire des manipulations sur le code du template (ou même sans raison d'ailleurs !) il faut penser à faire tant des sauvegardes du blog qu'une copie du code.

Ces préalables bien posés, nous allons voir maintenant comment procéder.

Procédure

Il faut écrire son article tout d'abord. Si vous avez l'habitude de mettre en forme votre texte (Justifier par exemple), je vous conseille de ne pas le faire de suite.

Une fois donc ce texte brut achevé, vous allez positionner votre curseur à l'endroit où vous comptez insérer le saut de page. Il est préférable de choisir comme emplacement le début d'un nouveau paragraphe.
Le curseur placé au bon endroit, vous allez cliquer maintenant sur l'icône Insérer un saut.
Aussitôt vous verrez une ligne de pointillés qui matérialise le saut de page à l'endroit de votre coupure (et par l'introduction d'un marqueur <-- more --> si vous consultez le code HTML).
Il ne vous reste plus qu'à aller en Mise en page / Eléments de la page puis à cliquer sur le lien Modifier dans le bloc Messages du blog. (NB)
S'ouvre cette fenêtre qui va vous permettre de personnaliser le message indiquant à vos lecteurs que l'article est tronqué dans cette présentation, mais que s'ils veulent lire la suite ils vont devoir cliquer sur un lien.
Par défaut le message proposé est "Plus d'infos >>". Ce n'est pas très explicite à mon goût, c'est pourquoi j'ai préféré le changer par "Pour lire la suite, cliquez ici >>". A vous de voir ce qui vous correspond le mieux.

Voilà, c'est presque terminé. Il ne vous reste plus qu'à Enregistrer vos modifications.

Comme je le disais un peu plus haut, si vous être adepte de la présentation de texte en justifié, c'est maintenant que je vous conseille de le faire. Vous prendrez toutefois la précaution de ne pas inclure la ligne de pointillés dans cette mise en page (arrêtez-vous avant et recommencez après).

Il ne vous reste plus qu'à aller voir le résultat.
Malgré les consignes que je vous ai données, il est malgré tout possible que cela ne marche pas.

Si...

En fonction du type d'erreurs, il y a certains correctifs à apporter (voir cette info publiée par Blogger).
La plus commune se traduit par un renvoi de votre colonne de droite tout en bas du template.
Ne pas paniquer, ce n'est pas grave.
Pour faire simple, on va expliquer que le marqueur de la coupure <-- more --> ne doit pas se trouver entre deux balises <div> et </div>

Si c'est ce que vous constatez en examinant le code HTML, il vous suffira de déplacer le <-- more --> en dehors de ces balises.

Si vous êtes amenés à pratiquer régulièrement le "Lire la suite", vous verrez que vous en maîtriserez très rapidement l'usage.

A+

NB : depuis une récente mise à jour, le lien Mise en page est devenu Présentation.

39 commentaires:

  1. Super cette astuce !
    Je vais l'essayer sans tarder car je suis victime de la colonne de droite qui se fait la malle tout en bas de la page depuis que je suis passée à un modèle de blog à 3 colonnes.

    Vous êtes mes sauveurs !!!

    RépondreSupprimer
  2. Bonsoir,
    je suis une vraie fan de votre blog d'aide. J'essaie tout ce que vous proposez mais là je me casse les dents avec mon blog à 3 colonnes.
    Je suis bien votre procédure et au moment de voir le résultat, la fin de mon message a disparu et rien...

    Bouuuuuuuuhhhh !!! Je recommencerai mais suis bien déçue.

    Merci pour cette très bonne idée.

    RépondreSupprimer
  3. Je n'ai qu'une colonne et pourtant, ça ne fonctionne pas.Est-ce dû aux nouveaux modèles, comme pour la mésaventure de la couleur des commentaires de l'auteur ???

    RépondreSupprimer
  4. Bonjour toi,

    Y a pas de problème lié au nombre de colonnes, je pense.

    Comment est-ce que ça ne fonctionne pas ?
    Le gadget s'installe t'il ? Il est placé au bon endroit ? Il est visible ?...
    Tes messages ont-ils des libellés ?

    RépondreSupprimer
  5. Non, j'ai décidé d'arrêter de mettre les catégories car ça fatigue...
    Non, ce n'est pas visible, et, en + je n'arrive pas à mettre un titre dans la ligne grise même avec Ctrl+V...C'est un vrai mystère.

    RépondreSupprimer
  6. Merci beaucoup pour votre blog d'aide. Je suis un vrai fan.

    Cette fois-ci, je n'ai pas tenté ma chance avec ce gadget car il semble que plusieurs connaissent des ratés.

    Merci.

    RépondreSupprimer
  7. Bonjour, Je suis une fan de votre blog, il est très explicite. Selon vos indications, mise en page, modifier, changer plus d'infos, la fonction lire la suite s'est très bien installée. Par contre, SVP est-ce que vous sauriez comment changer la police de caractère, la taille, la couleur de ce "lire la suite". Vrai dilemne, je n'y arrive pas ... Bien cordialement.
    Sagane.

    RépondreSupprimer
  8. Helllo!

    Je reviens vite pour auprès de votre site car vous êtes vraiment très fort, et vous êtes également un très bon conseillé.

    J'ai procédé comme ci-contre mais mon résultat n'est pas satisfaisant.

    Lorsque j'arrive au passage "configurer les messages", j'ajoute donc le texte du lien, j'essaie par la suite d'enregistrer mais ça ne fonctionne pas.J'ai au début de cette même page "corrigez les erreurs sur ce formulaire".
    Je ne comprends pas!
    Du coup , en regardant ma 1ère page, mon message est ajouté en 1ère page, mais pas sous forme de lien mais l'entièreté.
    Je tenais à mettre ce lien, à "qui êtes vous" dans ma colonne de gauche, que puis-je faire?

    Merci de vos précieux conseils!

    RépondreSupprimer
  9. Bonjour Elle,

    Le lien évoqué dans l'article ci-dessus propose au lecteur de continuer la lecture d'un message dans une nouvelle page. En gros, il n'a droit qu'à une "mise en bouche" du sujet et si ça l'intéresse, il peut ouvrir une 2ème page qui présente l'intégralité du message.

    Je pense que votre besoin se situe plus au niveau d'un lien tel que ceci.

    RépondreSupprimer
  10. Bonjour Waldorf et Statler :)
    J'ai commencé à rédiger mon message comme vous me le proposer,
    mais malheur encore un hic!
    Je ne veux que ce lien soit une direction vers un autre site, mais s'ouvrant sur une page de mon propre blog.En gros, je ne veux que ma présentation ne figure entièrement sur la page d'acceuil, mais uniquement mon pseudo "Elle".
    Donc mon pseudo en lien, qui mène à ma présentation mais sur une autre page de mon blog.

    J'espère avoir été un peu plus claire :(
    J'attends impatiemment votre réponse.
    Bonne journée à vous! :-)

    RépondreSupprimer
  11. Bonjour Elle,
    Je ne vois, dans l'immédiat, d'autre solution que de faire 2 messages :
    - celui affiché en une du blog avec l'affichage désiré et un lien vers :
    - le second qui reprend l'intégralité du message. Mais dans ce cas il faudra jouer sur la date pour lui mettre une date antérieure très ancienne afin qu'il n'apparaisse pas dans les archives.
    Bref, ce n'est pas satisfaisant ;-)
    Bonne fin de semaine.

    RépondreSupprimer
  12. Bonjour,
    Merci d'avoir fait ce blog qui m'aide beaucoup.

    Seulement, j'ai suivi ce que vous écrivez mais je ne trouve nulle par l'icône "saut de page". Pourriez-vous m'aider???

    Merci.

    RépondreSupprimer
  13. Bonjour,
    Avez-vous le nouvel éditeur de message ? Paramètres / Général / Paramètres globaux.
    L'icône est représentée dans la 1ère copie d'écran.

    RépondreSupprimer
  14. En fait, on suit tout ce qui est écrit et après, il faut encore aller sur "Présentation", cliquer sur "Modifier le HTML", cocher "Developper les modèles de gadget" et ensuite "Enregistrer"; pour que ça marche

    RépondreSupprimer
  15. J'ai suivi votre procédure et réussi l'appliquer sur mon blog, mais j'aimerais savoir s'il est possible de modifier le positionnement, la taille et la couleur du texte "lire la suite"?

    RépondreSupprimer
  16. Bonjour.
    Je trouve dommage de ne pas pouvoir placer ce "more" ou bon nous semble. Genre, j'aimerai bien qu'il se positionne vraiment à la suite de mon texte (comme on le voit souvent) et non pas en retour de ligne, à droite, à gauche ou au centre. J'ai essayé dans le code du message, rien à faire. Je pense que c'est une histoire de "div" peut-être mais rien de sûr.
    Si jamais tu as l'astuce et le temps...merci pour toutes tes aides et ton implication.

    RépondreSupprimer
  17. Bonjour CC,
    Ok je note ça dans un petit coin.
    Merci, c'est gentil.

    RépondreSupprimer
  18. Bonjour,
    Votre site m'a déjà été d'un grand secours précédemment et j'espère qu'il continuera...
    Comme "Sagane" et "Lilichat", je souhaite personnaliser "Lire la suite". Changer la police, la taille, la couleur, le centrer, etc...
    Pourriez-vous m'indiquer comment procéder svp ?
    Merci.

    RépondreSupprimer
  19. un grand merci à vous des que j'ai un souci ou une question je viens sur votre blog et je trouve toujours ma réponse!

    merci

    RépondreSupprimer
  20. GENIAL!!!Merci beaucoup pour cette astuce!!!C'est tellement simple et le rendu est tellement beau!!!!Le tout sans modifier notre templates avec des codes bizarroïdes!!!BRAVO!!!!!

    RépondreSupprimer
  21. Bonjour,

    Je suis comme "Cyberbase" et "Lilidream" j'attend avec impatience comment modifier l'apparence et l'emplacement de "Lire la suite..."

    Merci

    RépondreSupprimer
  22. bonjour,

    peut-on faire cette manip sur d'anciens messages deja postes? je n'y arrive pas...

    merci pour vos bons conseils

    RépondreSupprimer
  23. Bonjour,

    Voilà comment j'ai fait:

    J'ai rajouté ces deux lignes:

    .jump-link {text-align:right; font-weight:normal;font-style:italic;padding-bottom:20px;}
    .jump-link a{color:#00CCFF;}

    dans le css (Modifier le code html)juste avant
    ]]>
    </b:template-skin>

    Ensuite on peu modifier la couleur, le style etc...

    RépondreSupprimer
    Réponses
    1. Bonjour

      Super blog, mais j'ai une petite question :
      Comment faire pour lorsqu'on clic sur "lire la suite" le post s'ouvre sur une autre page ?

      Supprimer
    2. Cette astuce est déjà expliqué sur ce même blog. C'est très simple au final vous verrez.

      Supprimer
    3. Claude, peut-on voir ton blog pou voir le résultat de ton code ?

      Supprimer
    4. Bonjour Helios,

      Voici l'adresse:
      http://lettredalsace.blogspot.fr/

      Supprimer
  24. Bonjour,

    Pour ma part, j'aimerai faire comme ici : http://ziksdumonde.blogspot.fr/
    pour pouvoir afficher ou masquer une partie du message, à la suite.

    Sauriez-vous comment il faut faire svp ?

    J'ai regardé son code source mais... en vain.

    D'avance merci !

    Ce serait pour mon blog
    http://sarah-ruiz-moto-site.blogspot.fr/
    Pour ne pas que toutes les petites images chargent à chaque fois !

    Et un grand merci pour votre site qui m'aide beaucoup depuis près de deux ans maintenant !

    RépondreSupprimer
  25. bonjour bonjour !
    voilà, je sais comment mettre le marqueur d'expansion mais je voulais savoir comment modifier la police de ce dernier et comment le centrer sur la page, afin de rendre le lien plus visible pour les lecteurs?
    Merci d'avance pour votre réponse et bonne soirée!

    RépondreSupprimer
    Réponses
    1. Bonjour.
      Avez-vous reçu un MP en réponse ? J'aimerai aussi customiser le "Lire la suite" pour mon blog http://orchidee-liline22.blogspot.de.
      En effet, le lien est de la même couleur et police que le reste du texte, et il n'est pas toujours évident au premier coup d'œil de voir que l'article est tronqué.
      Merci de votre aide.

      Supprimer
  26. Bonjours à tous,
    J'ai une petite questions parce que je l'ais mis mais ca me renvois en bas de la page ? j'aimerais que ca me fasse l'inverse
    Merci pour vos futur réponse

    RépondreSupprimer
  27. Suis comme beaucoup, désireux de changer la couleur, la taille ou la police du marqueur d'expansion. Avez vous une idée simple. Je débute!!

    RépondreSupprimer
  28. Comment faire pour changer la taille et la couleur du lien car on ne le voit pas beaucoup malheureusement :(

    RépondreSupprimer
  29. Bonjour,
    je me suis posé la même question concernant la difficulté à rendre le marqueur d'expansion plus visible. Voici la solution à laquelle je suis arrivé :
    1. dans le menu "Mise en page", j'ai sélectionné "Articles du blog" et décoché toutes les cases qui produisaient de l'information inutile (je n'ai laissé QUE le lien vers les commentaires)
    2. pour m'assurer que les libellés disparaissaient bien, j'ai ajouté un gadget (toujours depuis l'écran "Mise en page") contenant uniquement le code style suivant (entre deux balise style donc) : type="text/css">.post-labels {display: none;} (je n'ai mis aucun titre à ce gadget, qui n’apparaît pas et se contente de faire son travail)
    3. Je me suis assuré que la couleur des liens ("Modèle"/"Personnaliser") restait bien visible même quand le lien avait déjà été visité (ce n'est pas le cas dans tous les modèles par défaut)
    4. J'ai changé le texte du lien vers l'article complet pour mettre quelque chose de plus long et explicite, et j'ai utilisé quelques capitales... (">> Lire la SUITE de cet article")
    5. Pour mes messages avec une image, j'ai mis l'image de préférence à gauche, et peu de texte avant le séparateur. De cette façon, le grand blanc rend bien visible le lien vers l'article complet.

    Voilà, c'est du bricolage, mais c'est déjà ça :) si vous voulez voir à qui ça ressemble, voici mon blog : toutmagic.blogspot.fr

    et bravo pour ce blog, que j'ai bookmarqué ! :) j'y ai trouvé pas mal d'aide intéressante !

    RépondreSupprimer
  30. Merci enormement pour ce magnifique tuto très bien expliqué, j'ai réussi du premier coup. Ca me change la vie sur Blogger, stt que ça faisait lgtps que je me demandais comment faire. Je suis tombée sur des tutos très "prise de tete" avant de trouver celui-ci, alors qu'en fait c'est tout simple. Merci beaucoup!

    RépondreSupprimer
  31. Yep merci du conseil ! J'adore ton blog ça aide pas mal à s'y retrouver & a tout comprendre !
    Bisos

    RépondreSupprimer
  32. Merci beaucoup
    Je suis un peu perdue aussi c'est d'une grande aide
    Bonne journée

    RépondreSupprimer
  33. Bonjour,
    J'ai personnalisé mon modèle et du coup la possibilité de lire la suite n'apparaît plus.
    Comment puis-je faire pour que ca fonctionne?
    Merci beaucoup

    RépondreSupprimer

Merci de prendre note des messages d'annonce en une du blog.
Et d'adresser vos questions sur notre
Communauté des Utilisateurs de Blogger hébergée sur Google+.

LinkWithin

Related Posts with Thumbnails