Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Remplacer le lien Lire la suite par une image sur Blogger

Dans mes précédents tutoriels, je vous ai expliqué comment ajouter le lien Lire la suite, modifier son apparence et modifier le mot affiché.

Aujourd'hui je vais vous expliquer comment remplacer ce lien par une image.

C'est parti pour les explications ;)

Sommaire

  1. Faire une sauvegarde de votre thème
  2. Ajouter votre image à Blogger
  3. Remplacer le lien Lire la suite par votre image
  4. Ajuster la mise en page de l'image

Faire une sauvegarde de votre thème

Comme toujours, cette étape est très importante. Elle permet de facilement revenir en arrière si vous vous trompez.

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Remplacer le lien Lire la suite par une image sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Ajouter votre image à Blogger

Pour remplacer le lien Lire la suite par une image nous allons avoir besoin de l'adresse URL de cette image.
Voici une méthode simple pour ajouter une image sur Blogger et obtenir son adresse URL.

Créez un nouvel article brouillon. Ajoutez votre image à l'article puis faites un clique-droit dessus. Sélectionnez Copier l'adresse du lien :

Remplacer le lien Lire la suite par une image sur Blogger

Vous avez maintenant copié l'adresse URL de votre image. Conservez la dans un fichier Notepad, par exemple, en attendant la suite.

Enregistrez votre article mais ne le publiez pas ! Il restera ainsi un brouillon auquel vous pourrez ajouter d'autres images pour obtenir leur adresse URL. En mode brouillon il sera inaccessible à vos lecteurs ;)

Remplacer le lien Lire la suite par votre image

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Modifier le code HTML :

Remplacer le lien Lire la suite par une image sur Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Remplacer le lien Lire la suite par une image sur Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.

Collez la ligne suivante dans la boîte de recherche :
<data:post.jumpText/>
Appuyez sur Entrer.

Vous trouverez le code suivant :
<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>
Remplacer le lien Lire la suite par une image sur Blogger

Remplacez <data:post.jumpText/> par le code suivant :
<img src="http://adresse.fr/image.png" alt="Lire la suite" />
Comme ceci :
<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src="http://adresse.fr/image.png" alt="Lire la suite" /></a>
  </div>
</b:if>
Remplacez http://adresse.fr/image.png par l'adresse URL de votre image que vous avez copié plus tôt. Comme ceci :

Remplacer le lien Lire la suite par une image sur Blogger

Ce qui donne :

Remplacer le lien Lire la suite par une image sur Blogger

Ajuster la mise en page de l'image

Maintenant que nous avons remplacé le lien par une image, on peut ajuster sa mise en page en ajoutant du CSS.

Le code CSS qui correspond au lien Lire la suite (que vous l'ayez remplacé par une image ou non) est :
.jump-link {
}
Dans mon exemple, je décide de centrer mon image et de rajouter de l'espace au-desssus, entre le texte et l'image. Pour cela j'ajoutes les codes CSS suivants :
text-align: center;   /* Alignement de l'image : center = centré ; left = gauche ; right = droite */
margin-top: 20px;   /* Espace au-dessus de l'image */
margin-bottom: 0;   /* Espace en-dessous de l'image */
Comme ceci :
.jump-link {
  text-align: center;   /* Alignement de l'image : center = centré ; left = gauche ; right = droite */
  margin-top: 20px;   /* Espace au-dessus de l'image */
  margin-bottom: 0;   /* Espace en-dessous de l'image */
}
Ce qui donne :

Remplacer le lien Lire la suite par une image sur Blogger

Et voilà ! Vous savez maintenant remplacer le lien Lire la suite par une image, et modifier sa mise en page ;)

Bon blogging !

Autres articles

79 commentaires:

  1. Pas mal le tuto ! :D
    J'y penserais si jamais je voudrais changé ;)
    Merci pour cet article en tout cas :)

    RépondreSupprimer
    Réponses
    1. Coucou !
      J'ai voulu procéder à ton tuto mais quand je tape le code... il ne trouve rien :( , pareil pour l'article précédent avec le code /*Content c'est le néant :(

      Supprimer
  2. Bonjour,

    Merci beaucoup pour ces informations très claires.
    Comme tu parles de "lire la suite" sur cet article, j'en profite pour te demander où est-ce que tu trouves cela dans la conception du blog? Moi aussi je suis sur blogger mais mes articles s'affichent en entier et j'aimerais pouvoir en afficher qu'une partie mais je ne sais pas comment faire. J'espère être claire...

    Bonne journée,
    Marine.

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      J'en ai fait un tutoriel : http://ladybirdr.blogspot.com/2015/02/afficher-un-apercu-darticle-ajouter-et.html
      Tu peux trouver tous mes tutoriels sur la page dédiée accessible dans le menu en haut du blog ou en allant ici : http://ladybirdr.blogspot.fr/p/tutoriels-blogger.html

      Supprimer
  3. Merci pour ce superbe tuto (comme d'habitude!), je m'en vais le faire de ce pas!
    Je voulais aussi savoir si tu pouvais nous faire des tutos pour personnaliser notre version mobile, j'aime beaucoup la tienne et j'aimerais en avoir une similaire car je ne suis pas du tout satisfaite de la mienne bien que je sois obligée de la laisser depuis que google favorise les sites avec des versions mobiles pour le référencement! Tu me serais vraiment d'une grande aide!
    Julie xx

    RépondreSupprimer
    Réponses
    1. Pas de soucis je le note sur ma liste de tutoriels à faire ;)

      Supprimer
  4. Merci pour tout tes tutos ! Ils m'ont beaucoup aidé a refaire mon blog. Même si je ne maitrise pas tout, j'ai compris pas mal de chose entre CSS et HTML ^^
    Par contre pourrais tu m'aider pour le pieds des articles ? J'aimerai le modifier, mais je ne trouve même pas la ligne adéquate dans le HTML.
    Mercii encore, j'attendrais les prochains tutos avec impatience !

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      C'est déjà noté sur ma liste de tutoriels à faire. Elle est plutôt longue cette liste lol, mais promis j'en fais un tuto ;)

      Supprimer
  5. Oh génial ce tuto, il me sera sûrement utile!
    J'en profite d'être ici, pour te poser toutes les questions que j'ai pour toi, je commence à m'éparpiller partout et je risque de ne plus retrouver mon message et donc de ne pas voir ta réponse.
    Si je souhaite ajouter une image à la place de "article plus recents/anciens", comment dois-je procéder ?
    Est-il possible d'ajouter une "ligne" de séparation entre mon blog en lui-même et le pied de page (comme avec la side bar) ?
    Voilà, voilà!
    Ton blog m'est vraiment d'une grande aide, merci pour tous ces supers utiles (qui sont vraiment utiles!). Je le recommande souvent à mes lectrices lorsqu'elles ont besoin d'aide pour personnaliser leur design, elles sont toutes du même avis que moi! ♥

    RépondreSupprimer
    Réponses
    1. Je note l'idée de tutoriel pour remplacer les liens de navigation (article plus ancien/récent) par une image ;)
      Pour le pied de page, tu peux jeter un œil à ce tutoriel : http://ladybirdr.blogspot.com/2015/05/modifier-le-pied-de-page.html
      Il suffit d'ajouter une bordure en haut du pied de page ;)
      C'est très gentil ! Je suis contente de pouvoir aider ! ^^

      Supprimer
  6. Coucou, je voulais te demander comment as tu fais pour avoir un thème wordpress sur blogger ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce n'est pas un thème Wordpress. C'est le thème Simple de Blogger (celui avec l'aperçu tout blanc) que j'ai complètement modifié moi-même ;)

      Supprimer
    2. Pourrais-tu nous faire un tuto pour faire une barre de navigation comme celle ci ? Car il existe la meme sur un thème wordpress et j'aime beaucoup ! Et pour installer le système des 3 articles en début du blog ?

      Supprimer
  7. bonjour, j'ai une petite question qui a rien avoir avec cet article. Mais depuis que j'ai refais mon blog, je n'est plus dans le pied des articles les réactions alors que j'ai bien cocher pour que cela s'affiche. Je suppose que c'est une erreur dans le html mais je ne sais pas où. J'espère que tu va pouvoir m'aider ;)

    RépondreSupprimer
    Réponses
    1. Tu peux essayer ceci :
      Sur la page Modifier le code HTML cliques sur Accéder au gadget à droite de Enregistrer. Sélectionne Blog1. Changes Blog1 en Blog2 et sauvegardes. Changes à nouveau Blog2 en Blog1 et sauvegardes.

      Si ça ne marche pas je ne peux pas te dire pourquoi ça ne marche pas sans regarder ton code HTML. De plus, régler les problèmes de ce genre peut prendre du temps. Si tu le souhaites je peux essayer de régler le problème mais par prestation seulement.

      Supprimer
  8. Coucou ! :)
    Merci beaucoup pour ce tuto ! :) J'ai par contre un problème : après avoir mis l'image, on voit toujours l'ancien bouton :/ C'est très moche ! ^^' Est-ce que tu saurais comment faire pour l'enlever ? :)
    Si tu veux aller voir, voici le lien de mon blog :
    www.lectureavie.blogspot.com
    Merci !
    Léa

    RépondreSupprimer
    Réponses
    1. Bonjour Léa,
      Il faut que tu supprimes le code CSS que tu avais ajouté pour le lien Lire la suite :

      .jump-link a {
      font-family: Walter Turncoat;
      font-size: 16px;
      color: #FEFEFE;
      background-color: #D4B5F0;
      padding-top: 7px;
      padding-bottom: 7px;
      padding-left: 10px;
      padding-right: 10px;
      text-decoration: none;
      }

      Supprimes ce code en faisant attention à ne rien supprimer d'autre ;)

      Supprimer
  9. Bonjour Catherine ,j'ai bien exécuté ce que tu as dis mais au moment du code CSS mon blog dis modèle appliqué mais ne change pas l'emplacement de l'image ni l'espace . Je ne sais plus quoi faire !!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a une erreur dans ton code CSS. Voici le code de ton pied de page :

      /* Footer
      ----------------------------------------------- */
      .footer-inner {
      padding: 30px 0;
      overflow: hidden;
      .footer-outer {max-width: 1060px;
      margin: 0 auto;
      footer {
      width: 100%;
      }

      Il manque un signe } pour fermer le code .footer-outer, et une signe } pour fermer le code .footer-inner

      Rajoute ces signes avant les lignes .footer-outer { et footer { et comme ceci :

      /* Footer
      ----------------------------------------------- */
      .footer-inner {
      padding: 30px 0;
      overflow: hidden;
      }
      .footer-outer {
      max-width: 1060px;
      margin: 0 auto;
      }
      footer {
      width: 100%;
      }

      Supprimer
  10. Incroyable !!!! Merci pour tout ses tutoriaux , vraiment ça m'aide bien !!!! Gros bisous

    RépondreSupprimer
  11. Bonjour Catherine,
    Je te remercie de nous laisser tes tutos gratuitement et de répondre aussi rapidement!
    Je te contacte aujourd'hui car j'ai un pb. J'ai voulu mettre une image à la place de "lire plus", et je ne parviens pas à retirer mon ancienne image (je ne sais plus comment je l'avais faite), et ça fait un énorme trait gris sur mon blog.
    Je te serais reconnaissante si tu pouvais me dire comment régler ce pb??
    Merci d'avance,
    Justine
    mon blog : biancojustine.blogspot.com

    RépondreSupprimer
  12. Re Catherine.
    C'est toujours moi. J'ai à moitié résolu mon pb, sauf que j'ai tjs un souci, c'est qu'autour de mon "plus d'infos", il y a un rectange gris assez épai que je voudrais retirer pour y mettre ma photo. Aurais-tu 2,3 tips? Merci!!
    Justine du blog : biancojustine.blogspot.com

    RépondreSupprimer
  13. Re re re re Catherine, c'est encore moi. Finalement j'ai réussi à régler le pb. Merci pour ces tutos si précieux
    Justine du blog biancojustine.blogspot.com

    RépondreSupprimer
  14. Bonjour,

    Je voudrais savoir ou l'ont peux retrouvez la même image que toi? Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je l'ai créé moi-même avec la police Helena (http://crtv.mk/s00rN) et une image du pack 66 Hand Sketched Elements (http://crtv.mk/b02Hy)

      Supprimer
  15. Merci pour cet article je suis vraiment contente du résultat sur mon blog. Je me dis qu'heureusement que tu as crée ce blog parce que tu me sauves la vie avec tes explications et tes idées ! Ca fait déjà deux fois que ton aide m'est utile et c'est pas près d'être fini ! :) xoxo

    http://notanotherbrickinthewall99.blogspot.fr/

    RépondreSupprimer
  16. Bonjour, merci beaucoup pour tout ces tutos, ça m'aide énormément pour changer mon blog de style de temps en temps.. J'ai un petit soucis concernant mon image "lire la suite" je n'arrive pas à la centrer.. ça doit bien faire une heure que je cherche et que je me creuse la tête.. Pourrais-tu m'aider ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne trouves pas ton code CSS pour modifier l'alignement de l'image, l'as-tu bien rajouté ?

      Supprimer
  17. Encore un tuto de compris ! Merci encore :D
    J'ai voté pour toi au Golden Blog Awards ;)

    RépondreSupprimer
  18. Ton tuto est super. J'ai ben réussi à intégrer une image à la place de mon ancien "lire la suite", mais alors lorsqu'il s'agit de le centrer, c'est mission impossible pour moi !

    RépondreSupprimer
    Réponses
    1. Il semble que tu as réglé le problème ? ;)

      Supprimer
    2. Oui ! Merci encore pour tous tes tutos :)
      Bisous

      Supprimer
  19. Bonjour !
    Bon du coup j'ai laissé pas mal de commentaires hier, mais au fur et à mesure que je faisais tes autos j'ai répondu à pas mal de questions, merci !
    J'ai une autre question mais qui n'a pas trop de lien avec cet article. J'aimerais changer la couleur de mes liens dans tout le blog. J'aimerais qu'ils soient gris et deviennent moutarde quand je survole.
    J'ai trouvé dans le code un endroit qui à l'air de correspondre mais j'ai peur de faire une bêtise.

    J'aimerais du coup changer ça :

    a:link {
    text-decoration:none;
    color: $(link.color);
    }

    a:visited {
    text-decoration:none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration:underline;
    color: $(link.hover.color);
    }

    En ça :

    a:link {
    text-decoration:none;
    color: #333333;
    }

    a:visited {
    text-decoration:none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration: none;
    color: #f9b60d;
    }

    Est-ce qu'à l'endroit ou je décide de faire la modif, il risque d'y avoir des bugs de code ?

    J'ai fait un test et par exemple les modifs que j'ai apporté aux titres de mes articles ne marchent plus ( je voulais les mettre en plus foncé )

    Merci pour ta réponse !

    http://mrs-aurore.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui ce sont bien ces codes qu'il faut changer pour modifier la couleur de tous les liens du blog.

      a:link { correspond aux liens par défaut, qui n'ont pas été cliqué.
      a:visited { correspond aux liens une fois visités, donc qui ont été cliqué.
      a:hover { correspond aux liens quand ils sont survolés par la souris.

      A noter que les titres des articles sur la page d'accueil et les pages de type recherche de libellé, et archive sont aussi des liens. Si tu veux modifier seulement ces liens alors il faut utiliser :

      h3.post-title a {
      }

      De même que pour les liens du blog tu peux utiliser :

      h3.post-title a:hover {

      et

      h3.post-title a:visited {

      ;)

      Supprimer
  20. ( encore moi ;) ) J'ai suivi ton tuto, par contre mon image est immense ! Il y a t il un moyen de régler ça ?
    Merci encore!

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Oui c'est possible rajoute les 2 lignes suivantes avant le signe } du code CSS de ton image :

      width: 50px; /* Largeur de l'image */
      height: auto; /* Hauteur automatique en fonction de la largeur */

      Remplace 50px par la largeur en pixels que tu souhaites donner à ton image ;)

      Supprimer
  21. Salut catherine, j'aimerai savoir si c'était possible de placer "lire la suite" juste après un texte

    RépondreSupprimer
    Réponses
    1. Bonjour Sonny Hu,
      Tu peux placer le lien "Lire la suite" en ajoutant un marqueur d'expansion dans ton article. Cela te permet de définir le texte qui sera affiché au-dessus du lien. Pour plus d'informations : http://ladybirdr.blogspot.com/2015/02/afficher-un-apercu-darticle-ajouter-et.html

      Supprimer
  22. Coucou c'est encore moi ! Merci pour ce tuto très sympa et bien expliqué comme d'habitude :)
    J'ai un problème pour copier ce code
    .jump-link {
    text-align: center; /* Alignement de l'image : center = centré ; left = gauche ; right = droite */
    margin-top: 20px; /* Espace au-dessus de l'image */
    margin-bottom: 0; /* Espace en-dessous de l'image */
    }
    ou faut-il le mettre ??
    bisous

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut le mettre dans tes codes CSS. Par exemple, au-dessus de la ligne :

      /* Content

      Supprimer
    2. C'est tout ? D'accord merci beaucoup :)

      Supprimer
  23. Trop top ton tuto, j'y suis arrivée du premier coup
    Merci

    RépondreSupprimer
  24. Bonjour,
    Je démarre de zéro en matière de blogging et je ne comprends pas où il faut insérer le code CSS pour changer la disposition de son image.
    On ne me propose pas de .jumplink à compléter ensuite donc où dois-je l'insérer ?
    Merci par avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que tu as réglé le problème ? Ton image s'affiche bien sur le blog ;)

      Supprimer
  25. bonsoir catherine je ne peux pas faire clique droit sur mac pour copier le lien il y a un autre moyen
    ( je cherche a mettre une image pour CRÉER UN ENCART D'INTRODUCTION POUR LA BARRE LATÉRALE) merci pour tous vos tutoriels géniales

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour ouvrir les options du clique-droit sur Mac, appuie sur Ctrl (ou Cmd je ne sais jamais lequel ^^) et clique sur la photo en gardant la touche Ctrl (ou Cmd) enfoncée ;)

      Supprimer
  26. Bonjour Catherine,
    Merci pour ce super tuto. Malheureusement pour moi j'ai bien cliqué sur le ... mais je n'ai pas du tout de même en recherchant manuellement. Je ne le trouve pas.
    Avez vous une idée du problème? Ou peut être que je peux mettre le code quelque part d'autres je ne sais pas.
    Merci =)

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélia,
      Peux-tu me donner le lien de ton blog ?

      Supprimer
  27. Bonjour Catherine,

    Un grand merci pour votre super blog bien utile!!! Surotut que je débute...

    J'ai un petit soucis, je ne trouve pas la ligne suivante:
    <data:post.jumpText/

    Cela est peut être du à ce message que j'ai lorsque j'essaye de sauvegarder:
    Impossible d'enregistrer le modèle.

    Votre modèle n'a pas pu être analysé car il contient des erreurs. Veuillez vous assurer que tous les éléments XML sont correctement fermés. Message d'erreur XML :
    Content is not allowed in prolog

    Vous avez une idée d'ou vient le problème?
    Merci encore!!
    Adeline

    RépondreSupprimer
    Réponses
    1. Bonjour Adeline,
      Tu as du supprimer un bout de code par erreur. Ce message apparaît quand un code n'est pas fermé :/
      Je te conseil de charger la sauvegarde de ton blog que tu as du faire avant de commencer les modifications. Ou alors, quitte la page pour modifier le code de ton thème, et retourne dessus. Blogger chargera la dernière version sauvegardé ;)

      Supprimer
  28. Bonjour Catherine
    Superbe idée, ça en jette ! Seulement quand on clique sur lire la suite le lien envoie à une ancre, je suppose, à l'emplacement où on a mis la ligne de renvoie ce qui fait qu'on ne voit pas l'article en entier .
    Comment faire pour que, lorsqu'on clique sur lire la suite le lien envoie au début de l'article, je ne trouve pas dans le code html où ça se situe.
    Merci encore

    RépondreSupprimer
  29. Oups, j'ai troiuvé, j'ai enlevé "+ "#more"" dans le code après la balise <a qui renvoie à l'article. Désolé pour le dérangement

    RépondreSupprimer
  30. Bonjour Lady bird Red

    Merci c'est génial mais pourquoi mon image s'affiche t'elle aussi sur l'article entier ? Merci à toi.

    RépondreSupprimer
    Réponses
    1. Bonjour Claude,
      Je n'ai jamais eu ce problème. Tu as peut-être supprimé un morceau de code par erreur en supprimant "#more" dans le code de ton blog.
      Vérifies que le code de ce lien dans ton thème est comme ceci :

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

      Avec le texte ou l'image de ton choix à la place de <data:post.jumpText/>

      Supprimer
  31. Coucou finalement j'ai réussi à mettre une image à la place de lire la suite merci beaucoup pour ton tuto !
    Je voulais te demander, je voudrai faire Pareil avec Articles plus anciens et Accueil :)

    RépondreSupprimer
    Réponses
    1. Bonjour Naholia,
      Je n'ai pas encore écrit de tutoriel qui explique comment les remplacer par des images, mais j'ai écrit un tutoriel pour modifier l'apparence ces liens si cela t'intéresse : http://ladybirdr.blogspot.com/2015/03/modifier-le-fond-et-lapparence-des.html

      Supprimer
  32. Bonjour :)
    Alors ta manip est très bien expliquée pour une nana qui ne touche absolument pas aux codages comme moi mais, quand je veux centrer mon lire la suite je ne vois pas comment changer le CSS ni où copier coller ton code... Peux tu m'aider ? :)
    MERCIIIIIIIII
    https://trucsetastuceslifestyle.blogspot.fr/

    RépondreSupprimer
  33. Et bien en fait au moment d'écrire mon commentaire j'ai tilté ! il faut le rajouter dans modèle > personnaliser > avancé > ajouter le fichier CSS > coller ton lien et appliquer au blog :)
    <3
    https://trucsetastuceslifestyle.blogspot.fr/ voilaaaaa

    RépondreSupprimer
    Réponses
    1. Bonjour Fanny,
      Tu peux faire comme ça, ou alors aller dans Modèle > Modifier le code HTML. Clique dans la boîte de code et appuie sur Ctrl et F en même temps. Dans le champ de recherche qui doit apparaître dans la boîte de code, colle :

      .jump-link {

      Et appuie sur Entrer (attention aux espaces).
      Si tu ne trouves pas ce code, colle les codes CSS donnés dans le tutoriel avant la ligne :

      ]]></b:skin>

      Supprimer
  34. Bonjour,

    et merci pour vos tutos, moi le problème que j'ai c'est en ouvrant la page htlm je rentre la ligne de code : dans la barre de recherche ctrl+F mais impossible de la trouver , quand je clique sur entrée rien ne se passe du coup, impossible de la trouver st ce normal que ca ne fonctionne pas ? merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien cliqué à l'intérieur de la boîte de code avant d'appuyer sur Ctrl + F ? Car si non, alors un champ de recherche apparaît bien mais en haut de la page web. Or ce champ de recherche ne marchera pas. Il faut utiliser le champ de recherche qui s'affiche en haut de la boîte de code.
      De plus, attention à ne pas ajouter d'espaces avant ou après les codes à chercher ;)

      Supprimer
  35. Bonjour, J'ai un petit souci à savoir que sur le pied de mon article, c'est comme si j'avais deux liens pour lire la suite. De plus, il y a sous la photo ... mais je ne sais pas d'où cela vient. Pourriez vous m'aider? Merci pour tous tes précieux conseils.
    Voici mon blog: https://simplymaissa.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Cela vient de ton thème qui créé automatiquement des aperçus d'articles. As-tu ajouté un marqueur d'expansion manuellement à ton article ? Si oui, supprime-le ;)

      Supprimer
    2. Bonsoir,
      Merci pour ta réponse. Par contre, je n'ai pas trop compris, je ne sais pas ce qu'est un marqueur d'expansion. Désolée du dérangement.
      Maïssa

      Supprimer
    3. Bonjour Maïssa,
      Pas de soucis, as-tu créé un aperçu d'article manuellement dans tes articles ?
      Pour info voici un article sur les marqueurs d'expansions ;)

      Supprimer
  36. Bonjour,

    J'ai fait le code tout bien comme il faut, quand je fais aperçu avant d'enregistrer on voit bien l'image, mais après avoir enregistré, sur mon blog y'a pas l'image. Juste un truc moche marqué "image" du coup qu'est-ce qu'il faudrait faire. Finalement j'ai peut-être fait quelque chose de travers ? Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Il y a une petite erreur dans ton code. Il manque le http avant l'url de l'image.
      Remplace le code de ton image par ceci :

      <img alt="Lire la suite" src="http://2.bp.blogspot.com/-Y_3D_CpRC_A/V-gsRkSGccI/AAAAAAAAAjI/LlS-o3jgoNQFPhUZ9HROUpsQHB4gQKJRgCLcB/s1600/lire%2Bla%2Bsuite.PNG" data-pin-nopin="true">

      Supprimer
  37. Bonjour,
    Merci pour ce tuto qui m'a bien aidé. J'ai juste un souci et je pense que cela vient du thème mais je n'en suis pas sûre.
    J'ai au dessus de l'image insérée pour faire le lien, un "read more" qui permet également d'accéder à la suite de l'article et je ne sais pas comment le retirer? De plus, j'aimerai réduire la taille de l'image et la centrer, puis je le faire au même endroit dans le code?
    Merci encore,
    Bonne journée
    Maïssa
    http://simplymaissa.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Cela vient bien de ton thème. Mais tu peux cacher ce 2e lien en ajoutant le code suivant :

      a.read-more.anchor-hover {
      display: none;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Pour centrer ton image, ajoute le code CSS suivant :

      .jump-link {
      text-align: center;
      }

      De même, ajoutes-le avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
    2. Merci beaucoup pour votre réponse. Cela m'a vraiment beaucoup aidé.
      Cependant, je crois que cette manipulation interfère avec mon menu parce que dès que je l'effectue, cela le modifie totalement et je ne parviens pas à garder sa mise en forme.
      Merci d'avance

      Supprimer
  38. Bonjour, je vous remercie pour ce tutoriel supplémentaire qui m'aide beaucoup. J'aurai juste une interrogation, j'ai fait tout ce qui était indiqué mais sur mon blog, j'ai toujours un lien Read More au dessus de mon image. Cependant, quand j'essaie de mettre une image à la place de lire plus, cela modifie l'aspect de mon menu qui est un menu déroulant.
    De plus, je n'ai pas la partie jump link pour pouvoir centrer l'image.
    Désolée du dérangement,
    Merci encore pour tout et bonne journée
    Maïssa
    http://simplymaissa.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Les codes CSS ne devraient pas interférer avec ton menu. Vérifie bien que tu n'as pas supprimé ou ajouté des signes { : ; } /* ou */ par inadvertance. Une toute petite erreur et les codes CSS qui suivent en seront pas bien pris en compte.

      Supprimer
    2. En replaçant le lien Lire la suite par une image, tu as peut-être supprimé un morceau de code par inadvertance. D'où le problème avec ton menu. Si tu as bien fait une sauvegarde, charge-la et recommence ;)

      Supprimer
    3. Bonsoir,
      Merci pour vos réponses. J'ai chargé la sauvegarde et réeffectué plusieurs fois la manipulation mais à chaque fois, cela modifie mon menu.
      Et pourtant, j'ai bien fait attention à ne rien modifier d'autre que ce qui était indiqué et à chaque fois, la structure de mon menu est modifiée.
      Je m'excuse de la gêne occasionnée.
      Bonne soirée.

      Supprimer
    4. Bonjour Maïssa,
      Il me semble que tu as réglé le problème non ? Car ton menu fonctionne et ton image Lire la suite est bien centré ;)

      Supprimer
  39. Bonjour Catherine,j'ai un problème...j'ai voulu ajouter mon image c'est bien marquer lire la suite mais ce n'est pas l'image c'est avec l'écriture et en haut à gauche il y a un carré qui m'indique que c'est une image.Je ne comprends pas le problème,j'ai tout essayé.Mon blog: bichylit.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Nora,
      Si tu as une carré à la place de ton image c'est que l'adresse URL de ton image est invalide. Vérifie que l'adresse url est bonne. Elle doit être de ce type : http://adresse.com/image.jpg

      Supprimer
  40. Coucou, j'avais déjà fait ta manip il y a un moment, et je tente de le refaire sur un nouveau blog, mais je n'arrive pas à utiliser la fonction recherche cmd+f. Ce que je trouve extrêmement bizarre. J'ai essayé sur chrome et safari mais à chaque fois que je tape ou ou quoi que ce soit avec Jump dedans par exemple, il ne me trouve aucune ligne de code. Donc je n'arrive pas à trouver l'emplacement nécessaire. Peux-tu me dire si ça t'es déjà arrivé ? Et dans quelle catégorie et à peu près à quel niveau de l'arborescence se trouve cette ligne ? Merci beaucoup

    RépondreSupprimer
  41. Hehe, j'ai bien fait de t'envoyer un message, je viens de trouver :).

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger