Sur Wordpress et Blogger on utilisera la même méthode sauf que sur Blogger il y a une petite étape supplémentaire pour que ça fonctionne correctement !
Le problème sur Blogger c'est que lorsque vous passez du mode "HTML" au mode "Rédiger", les ancres que vous avez créent sont remplacés par des liens de ce genre https://www.blogger.com/blogger.g?blogID=4178557433152112888. Il y a une solution, c'est de coder le HTML en Javascript qui est lui aussi compatible avec tous les navigateurs. Ne vous inquiétez pas, avec mon tuto c'est facile et ça prend 2 minutes !
J'ai fait un petit sommaire cliquable pour cet article pour vous prouver que ça fonctionne bien avec mon astuce:
À NE PAS LOUPER !
1) Vous serez sûrement intéressé par mon article où je vous présente Hellobar, un super outil pour créer des Pop Up pour Blogger et Wordpress
Une ancre ou lien ancré c'est quoi ?
Une ancre, un lien ancré c'est la même chose. C'est un lien cliquable qui pointe vers un endroit précis de la page ou d'une autre page (point d'ancrage).
La plupart du temps on les utilise pour faire le sommaire d'un article (assez important pour les gros articles) ou un renvoi en haut de page.
Il va falloir dans un premier temps créer une ancre puis ensuite un lien qui redirige vers l'ancre que vous avez créé.
Il va falloir dans un premier temps créer une ancre puis ensuite un lien qui redirige vers l'ancre que vous avez créé.
Comment créer une ancre sur Blogger et Wordpress ?
Pour créer une ancre manuellement sur Blogger et Wordpress, c'est-à-dire sans plug in, vous devez utiliser le language HTML (il y a aussi un plug in pour wordpress). Sur Blogger lorsque vous rédigez un article vous devez passer du mode "Rédiger" au mode "HTML" et sur Wordpress du mode "Visuel" au mode "Texte" pour avoir accès au code HTML. Ensuite placer ce code à l'endroit o vous souhaitez arriver en cliquant sur votre lien:
<a name="ancre"></a>C'est vous qui choisissez le nom de votre ancre, j'ai mis ancre mais vous pouvez mettre ce que vous voulez. Le nom doit être écrit en minuscules sans accents et si vous souhaitez utiliser des espaces il faudra les remplacer par des underscores, c'est-à-dire le tiret bas. Ce qui nous donnera:
<a name="nom_ancre"></a>Je préfère vous le signaler dès le début pour être sure que vous ne fassiez pas d'erreurs, le plus simple reste d'utiliser un seul mot en minuscule et sans accents comme ça on ne se prend pas la tête.
Pour un sommaire cliquable, cette ancre se placera souvent au niveau des titres représentant les différentes parties de votre article. Vous pouvez les placer au sein de vos balises <h2> ou alors juste au-dessus.
Pour un renvoi en haut de page, cette ancre devra être placée au début de l'article.
Comment créer un lien vers un ancre ?
Pour créer un lien qui renvoie vers une ancre que vous avez créé (ce que je viens de vous expliquer au-dessus), vous devez utiliser un autre petit bout de code:
<a href="#ancre">Texte que vous souhaitez associer à votre lien</a>C'est un lien hypertexte qui renvoie vers votre ancre, faite attention de ne pas vous tromper et de bien utiliser le même nom d'ancre. Pour les espaces, utilisez les tirets bas comme je vous ai expliqué ci-dessus:
<a href="#nom_ancre">Texte que vous souhaitez associer à votre lien</a>Il y a plus simple sur Wordpress ! Vous n'êtes pas obligés de rajouter ce code HTML manuellement, une fois que vous avez créé votre ancre vous pouvez repasser en mode "Visuel" pour faire pointer un lien dessus en utilisant l'éditeur (insérer/modifier un lien). Dans la case "adresse web" il faut mettre un # et le nom de votre ancre, pour mon exemple #ancre, puis dans la case "titre" vous pouvez mettre ce que vous voulez ce ne sera pas visible, c'est un texte caché qui pourra être utile pour votre référencement (si vous ne mettez rien, ce n'est pas grave). Ne cochez pas la case ouvrir dans une nouvelle fenêtre/un nouvel onglet car c'est un renvoi sur une même page donc ça ne sert à rien.
Pour ceux qui utilisent wordpress c'est terminé, vous pouvez maintenant utiliser les ancres comme bon vous semble ! En revanche si vous êtes sur Blogger vous rencontrerez un problème lorsque vous repasserez du mode "HTML" au mode "Rédiger" !
Le problème sur Blogger
En effet blogger remplacera les ancres que vous aurez soigneusement créées par des liens du style https://www.blogger.com/blogger.g?blogID=4178557433152112888 et lorsque vos lecteurs cliqueront dessus, ils seront redirigé vers la page de connexion à un compte google.Je ne sais pas clairement de quoi ça viens mais en tout cas j'ai trouvé une solution pour contourner le problème, ça prend 2 minutes supplémentaires et c'est facile à faire ! Vous devez coder les petits bouts de code HTML en Javascript (les ancres ainsi que les liens pointants vers les ancres).
Le language Javascript est compatible avec tous les navigateurs internet, ça n'aura donc aucun effet négatif pour votre blog, article ou même pour le chargement de vos pages.
Pour ne pas se mélanger les pinceaux le mieux est de préparer à l'avance ces ancres (sur word, bloc note...). Si vous travaillez directement sur Blogger en mode "HTML" je vous conseille de faire un copier-coller de votre article au format HTML avant de faire quoi que ce soit (juste au cas où).
Attention de bien rester en mode "HTML", ne repassez pas en mode "Rédiger" tant que vous n'avez pas fini de transformer vos lignes de codes html en Javascript.
Une fois que vous avez préparé vos ancres vous pouvez les coder. Voici 2 sites qui vous permettent de crypter et décrypter le HTML et Javascript:
Il y également des logiciels mais j'ai préféré le faire directement sur le net et je pense que vous aussi. Une fois codé ça vous donnera un code de ce style:
Exemple de mon sommaire pour cet article
Je vais vous montrer comment j'ai fait le sommaire pour cet article, si vous n'avez pas l'habitude de bidouiller le HTML ça sera plus facile à comprendre.Tout d'abord, je prépare mes ancres sur le bloc note de mon ordinateur avant de les placer aux bons endroits dans le code html de mon article. Ça donne quelque chose comme ça:
Une fois que c'est tout prêt, je passe en mode HTML et je fait un copié/collé entier de mon sommaire, je le code en Javascript et je la place à l'endroit où je veux qu'il apparaisse dans l'article.
Pour les liens que j'ai placés avant chaque titre, je les codes un par un car ils ne se succèdent pas, ils sont placés avant chaque titre <h2>.
Voici à quoi ressemble le début de mon article en mode HTML avec les ancres codées en Javascript:
En rouge j'ai surligné le sommaire de mon article codé en Javascript, vous pouvez le placer ou vous voulez, en général ça sera au début de l'article.
En bleu j'ai surligné les ancres codées que vous devez placer au niveau des titres. Si j'ai placé mes ancres juste avant les balises h2 et non à l'intérieur c'est par rapport à mon design (modèle/template), si je les place dans la balise on arrivera bien au bon endroit dans l'article mais le titre sera parfois légèrement coupé.
Il y a quand même quelques inconvénients avec cette méthode, par exemple si vous voulez changer le nom d'une de vos ancres ça va prendre un peu plus de temps, si vous faites un sommaire essayez de le faire une bonne fois pour toute pour ne pas avoir à le retoucher.
Une autre chose, lorsque vous repasserez du mode "HTML" au mode "Rédiger" vous ne verrez pas apparaître votre sommaire ou vos ancres car le langage Javascript n'apparaît pas en mode "Rédiger", pour les voir apparaître cliquez sur "Aperçu" et vous verrez votre sommaire ou vos ancres mais ils ne seront pas cliquables pour cela il faudra publier l'article.
J'espère que mon tutoriel vous aidera, j'ai essayé de le faire le plus clair possible pour que même les moins expérimentés puissent le suivre sans problème ! N'hésitez pas à me poser des questions, je ferais de mon mieux pour vous répondre.
Vous pouvez aussi partager mon article en utilisant les boutons de partages pour aider d'autres personnes qui n'arrivent pas à créer des ancres / sommaires cliquables ou renvoi en haut de page !
Si vous avez aimé cet article, vous serrez peut-être aussi intéressé par mes autres tutoriels ou bien par ma catégorie webmaster ! Vous pouvez également vous inscrire à la newsletter pour rester à l'affût des bons plans !
Je suis toujours fasciné par les personnes qui prennent le temps d'expliquer clairement les choses.
RépondreSupprimerAyant un compte blogger je cherchais a rendre possible le chose suivante :
j'aimerai caché un petit texte qui ne se verrai que lorsque la personne à posté un commentaire,
le Fait de poster un commentaire agirai un peu comme un sésame.
J'ai déjà vu ce genre de chose sur des sites wordpress, mais n'est pas trouvé d'infos à ce sujet précis.
Je pense en lisant votre article que je m'approche de la vérité,du moins je l'espère car je n'ai que
des compétences limitées dans ce domaine.
Quoiqu'il en soit je repasserai voir à l'occasion si le sujet sera aborder.
Bonne continuation et merci.
Bonjour et merci pour votre commentaire,
SupprimerJ'ai bien compris ce que vous voulez faire, je sait également qu'il y a des plug in de ce genre sur Wordpress mais je ne connais pas pour le moment la solution pour faire la même chose sur blogger.
J'ai déjà pensé à créer un contenu disponible uniquement si le lecteur partage l'article sur les réseaux sociaux mais je n'ai pas encore trouvé d'astuce. Si je trouve une solution je la présenterai via un nouvel article/tutoriel.
Bonne continuation aussi ! À bientôt !