Tout sur les liens !
Lors de la rédaction d'un article, vous pouvez réaliser divers types "liens". Voici une présentation des divers possibilités, du plus simple au plus complexe... y compris une façon de créer des ancres pour naviguer à l'intérieur d'un même article.
1-Lien vers un site web via le menu "Associer"
2-Lien vers une adresse email
3-Lien vers un document situé dans Google Drive
4-Lien spécifique sur un image ou photo
5-Lien & page virtuelle
6-Liens réalisés en mode HTML
7-Créer des ancres
1- Lien vers un site web via le menu "Insérer un lien"
Méthode:
-Préparer : D'abord copier votre lien destinataire (URL) en ouvrant la page dans votre navigateur (éventuellement un de vos articles)
Nature du lien, il redirige :
Lorsque le lien est réalisé vous pouvez le modifier ou le supprimer via un clic
2-Lien vers une adresse email via le menu "Insérer"
L'ancienne interface de Blogger le permettait
3-Lien vers un document situé dans Google Drive
Vous utilisez Google Drive
-en stockant des fichiers (texte, diaporama, pdf...)
-en utilisant les outils de Drive pour créer des documents texte, feuille de calcul, présentation.. qui sont stockés sur Google drive.
Dans un article de votre blog, vous pouvez donc faire un lien vers ces fichiers afin de les visualiser
Mieux, vous pouvez aussi les intégrer dans un article: ils sont directement affichés dans l'article : la méthode est un peu plus délicate, voir notre article dédié "Insérer un document de Google Drive"
4-Liens spécifiques via images et photos
Comment rendre une image cliquable :
=> Voir notre dossier
Exemple:
5-Liens & Page
Attention: ici, il ne s'agit plus des articles mais de PAGES, vous allez donc créer des ONGLETS de type "PAGE" situés entre l'en-tête et les articles de votre blog !
L'art de détourner les pages : comment créer des onglets virtuels "Pages" qui, en fait, ne correspondent pas à des pages réelles du blog mais sont des liens vers un autre site / blog OU vers une liste d'articles triés via un libellé.
Objectif : en cliquant sur le nom de la page vous serez immédiatement redirigé vers le site web indiqué (ou autre blog, compte Google+, page Facebook, un libellé pour lister les articles du blog ayant ce libellé...)
Procédure :
1-Mode conception > Mise en page > Ajouter un gadget >
Cliquer sur "Ajouter un lien externe" puis renseigner
pour afficher :
Objectif : en cliquant sur le nom de la page vous afficherez immédiatement la liste des articles du blog ayant ce libellé...
Procédure : Comment faire un lien vers un libellé ?
IDEM que ci-dessus pour faire un lien vers une adresse web, mais il faut utiliser cette adresse web et modifier/adapter le texte en majuscule rouge
http://NOM_DU_BLOG.blogspot.fr/search/label/NOM_DU_LIBELLE
Ainsi vous pouvez faire une sorte de menu qui trie automatiquement vos articles selon le libellé choisi.
Exemple de blog consacré à la cuisine: chaque recette a au moins un libellé "entrée", plat", "dessert" , par ce biais les recettes seront classées.
A savoir : Par défaut, les libellés Blogger affiche 20 articles par page.
Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:
http://NOM_DU_BLOG.blogspot.fr/search/label/NOM_DU_LIBELLE?&max-results=X
et
vous souhaitez faire un lien d'accès direct vers une page : c'est possible.
Voici la structure de l'URL:
6-Liens réalisés en mode HTML
<a href="http://www.google.fr/">Texte du lien</a>
Exemple : Texte du lien
<a href="http://www.google.fr/" title="Une infobulle pour ce lien vers Google">Aller sur Google</a>
Exemple :Aller sur Google
<a href="http://www.google.fr" target="_blank">Google dans une nouvelle fenêtre</a>
Exemple : Google dans une nouvelle fenêtre
2 possibilités : target="_blank" = dans une nouvelle fenêtre
OU target="_self " = dans la fenêtre actuelle
7-Créer des ancres
Si votre article est vraiment très long, il peut être utile de faire figurer des liens de navigation à l'intérieur de l'article pour faciliter la lecture.
Principe
Il faut d'abord, en mode html, positionner les ancres (repères) puis ensuite créer les liens vers les ancres
Code en html :
il suffirait donc d'attribuer à l'élément vers lequel on veut pouvoir pointer un identifiant (avec l'attribut HTML
(en savoir plus : Comment ça marche )
mais...
Blogger n'acceptera pas ce code ! toutefois il existe une solution pour contourner !
1-Créer l'ancre (sur un titre de préférence).
Rappel : Blogger n'accepte pas les ancres traditionnelles de type<a id="haut"></a>
ou
<a name="Nom_Ancre"></a>
ou
<a name="Nom_Ancre">expression vers laquelle votre lien pointera</a>
mais cela ne fonctionne pas car Blogger modifiera obligatoirement ce lien dans le code
MAIS Blogger accepte
<h2 id="top">Tout sur les liens !</h2>
-ce code sert pour créer "une ancre" (ensuite on fera un lien pour aller à cet endroit)
-éventuellement choisir toute balise <h ?> de votre choix selon le niveau de titre choisi.
-choisissez un nom d'ancre simple, ici "top". Son nom n'apparaitra pas dans la page, il reste "caché" dans le code
2-Créer le lien vers cet ancre
Rappel : Théoriquement le lien est de type
<a href="#top">Retourner au début de cet article</a>
mais cela ne fonctionne pas car Blogger modifie obligatoirement le lien!
MAIS Blogger accepte
si l'on indique l'URL complétée (ici) de #top
ainsi:
<a href="URL complète de l'article#top">Retourner au début de cet article</a>
ex:
http://blogavecblogger.blogspot.com/2015/02/les-liens-dans-un-article-ou-page.html#top
3-Exemples
dans cet article :
Retourner au début de cet article
Voir l'Article de démonstration avec
-4 ancres : 3 parties + retour en haut de page
2-Lien vers une adresse email
3-Lien vers un document situé dans Google Drive
4-Lien spécifique sur un image ou photo
5-Lien & page virtuelle
6-Liens réalisés en mode HTML
7-Créer des ancres
1- Lien vers un site web via le menu "Insérer un lien"
Méthode:
Vous souhaitez faire un lien à partir d'un mot/phrase d'un texte de votre article :
-Préparer : D'abord copier votre lien destinataire (URL) en ouvrant la page dans votre navigateur (éventuellement un de vos articles)
-Sélectionner le texte du lien avant de faire le lien
-Cliquer sur "Associer"
-Coller l'adresse du lien
-Noter la possibilité d"Ouvrir le lien dans une nouvelle fenêtre"
Ancienne interface de Blogger
Nouvelle interface de Blogger 2020
-Cliquer sur "Associer"
-Coller l'adresse du lien
-Noter la possibilité d"Ouvrir le lien dans une nouvelle fenêtre"
Ancienne interface de Blogger
Nouvelle interface de Blogger 2020
Sélectionner le texte support du lien puis cliquer "Insérer un lien" ensuite coller l'URL du lien
Eventuellement :
"Ouvrir le lien dans une nouvelle fenêtre" => le lien s'ouvrira dans une nouvelle du navigateur
"Ouvrir le lien dans une nouvelle fenêtre" => le lien s'ouvrira dans une nouvelle du navigateur
"Ajouter l'attribut "rel=nofolow" => le lien ne sera par indexé par les moteurs de recherche
Nature du lien, il redirige :
- vers tout site web (faire un copier/coller d'URL pour éviter les fautes de frappe) => http://www.google.fr
- mais aussi vers un article de votre blog
- dont vous aurez copié l'adresse URL affichée par le navigateur lorsque vous affichez votre blog
- via un lien permanent qui s'affiche sur le côté de l'article
- Exemple : lien vers un article de ce blog
L'ancienne interface de Blogger le permettait
-Sélectionner le texte du lien avant de faire le lien : M'écrire
-Même méthode que ci-dessus
La nouvelle interface de Blogger l'a d'abord permis...
-Même méthode que ci-dessus
La nouvelle interface de Blogger l'a d'abord permis...
mais aujourd'hui cela a disparu, il faut faire un lien manuel
sur le principe : mailto:toto@free.fr
3-Lien vers un document situé dans Google Drive
- Comprendre
Vous utilisez Google Drive
-en stockant des fichiers (texte, diaporama, pdf...)
-en utilisant les outils de Drive pour créer des documents texte, feuille de calcul, présentation.. qui sont stockés sur Google drive.
Dans un article de votre blog, vous pouvez donc faire un lien vers ces fichiers afin de les visualiser
Mieux, vous pouvez aussi les intégrer dans un article: ils sont directement affichés dans l'article : la méthode est un peu plus délicate, voir notre article dédié "Insérer un document de Google Drive"
- Comment faire un lien vers un fichier de Google Drive ?
- Vous possédez un document, ex : un fichier PDF stocké sur votre ordi
- D'abord le copier dans le cloud de Google = > Google Drive
- Se connecter à Google Drive https://drive.google.com/
- indiquer l'adresse email (Gmail)du compte
- Le mot de passe
- Sur l'interface de GOOGLE DRIVE
- Glisser
déposer votre fichier PDF dans le bon dossier (ou créer
un nouveau dossier)
OU Menu > + Nouveau > Importer un fichier - Afin de pouvoir faire un lien, vous devez obtenir l'adresse du fichier (PDF)
- Sur le fichier PDF clic droit
- Choisir "Obtenir le lien partageable"
ATTENTION ! Drive propose, par défaut, "LIMITE" cad de partager avec des "personnes ajoutées...."or il faut " Tous les utilisateurs ayant le lien"donc bien cliquer sur la bonne option !
Pour obtenir :
=> COPIER LE LIEN
- FINALISER :
- dans l'article, sélectionner mot/phrase support du lien
- Cliquer sur "insérer un lien" > créer une URL > coller l'adresse et valider
4-Liens spécifiques via images et photos
Comment rendre une image cliquable :
=> Voir notre dossier
Exemple:
5-Liens & Page
Attention: ici, il ne s'agit plus des articles mais de PAGES, vous allez donc créer des ONGLETS de type "PAGE" situés entre l'en-tête et les articles de votre blog !
L'art de détourner les pages : comment créer des onglets virtuels "Pages" qui, en fait, ne correspondent pas à des pages réelles du blog mais sont des liens vers un autre site / blog OU vers une liste d'articles triés via un libellé.
- Page virtuelle qui redirige vers une adresse Web :
Objectif : en cliquant sur le nom de la page vous serez immédiatement redirigé vers le site web indiqué (ou autre blog, compte Google+, page Facebook, un libellé pour lister les articles du blog ayant ce libellé...)
Procédure :
1-Mode conception > Mise en page > Ajouter un gadget >
Cliquer sur "Ajouter un lien externe" puis renseigner
pour afficher :
- Page virtuelle qui redirige vers un LIBELLE
Objectif : en cliquant sur le nom de la page vous afficherez immédiatement la liste des articles du blog ayant ce libellé...
Procédure : Comment faire un lien vers un libellé ?
IDEM que ci-dessus pour faire un lien vers une adresse web, mais il faut utiliser cette adresse web et modifier/adapter le texte en majuscule rouge
http://NOM_DU_BLOG.blogspot.fr/search/label/NOM_DU_LIBELLE
Ainsi vous pouvez faire une sorte de menu qui trie automatiquement vos articles selon le libellé choisi.
Exemple de blog consacré à la cuisine: chaque recette a au moins un libellé "entrée", plat", "dessert" , par ce biais les recettes seront classées.
A savoir : Par défaut, les libellés Blogger affiche 20 articles par page.
Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:
http://NOM_DU_BLOG.blogspot.fr/search/label/NOM_DU_LIBELLE?&max-results=X
avec X: le nombre d'articles à afficher.
- Lien direct vers une PAGE
et
vous souhaitez faire un lien d'accès direct vers une page : c'est possible.
Voici la structure de l'URL:
https:/monblog.blogspot.com/p/mapage.html
ASTUCE: Pour connaitre l'adresse URL d'une page : Aller en mode "CONCEPTION" puis rubrique "PAGES"
ASTUCE: Pour connaitre l'adresse URL d'une page : Aller en mode "CONCEPTION" puis rubrique "PAGES"
et "Afficher"
La page s'affiche dans le navigateur : copier son URL puis l'utiliser pour faire un lien
6-Liens réalisés en mode HTML
- Code de base d'un lien
<a href="http://www.google.fr/">Texte du lien</a>
Exemple : Texte du lien
- Créer une infobulle via "title="
<a href="http://www.google.fr/" title="Une infobulle pour ce lien vers Google">Aller sur Google</a>
Exemple :Aller sur Google
- Choisir l'ouverture via "target="
<a href="http://www.google.fr" target="_blank">Google dans une nouvelle fenêtre</a>
Exemple : Google dans une nouvelle fenêtre
2 possibilités : target="_blank" = dans une nouvelle fenêtre
OU target="_self " = dans la fenêtre actuelle
7-Créer des ancres
Si votre article est vraiment très long, il peut être utile de faire figurer des liens de navigation à l'intérieur de l'article pour faciliter la lecture.
- COMPRENDRE
- Exemple 1 : cliquer sur Retourner au début de cet article
- Exemple 2 : Voir l'Article de démonstration
- METHODE ==>Tout se crée... en mode HTML
Principe
Il faut d'abord, en mode html, positionner les ancres (repères) puis ensuite créer les liens vers les ancres
Code en html :
il suffirait donc d'attribuer à l'élément vers lequel on veut pouvoir pointer un identifiant (avec l'attribut HTML
id) et d'y associer un lien débutant par le caractère dièse #, suivi du nom de cet identifiant (en savoir plus : Comment ça marche )
mais...
Blogger n'acceptera pas ce code ! toutefois il existe une solution pour contourner !
- ANCRES avec BLOGGER
1-Créer l'ancre (sur un titre de préférence).
Rappel : Blogger n'accepte pas les ancres traditionnelles de type<a id="haut"></a>
ou
<a name="Nom_Ancre"></a>
ou
<a name="Nom_Ancre">expression vers laquelle votre lien pointera</a>
mais cela ne fonctionne pas car Blogger modifiera obligatoirement ce lien dans le code
MAIS Blogger accepte
<h2 id="top">Tout sur les liens !</h2>
-ce code sert pour créer "une ancre" (ensuite on fera un lien pour aller à cet endroit)
-éventuellement choisir toute balise <h ?> de votre choix selon le niveau de titre choisi.
-choisissez un nom d'ancre simple, ici "top". Son nom n'apparaitra pas dans la page, il reste "caché" dans le code
2-Créer le lien vers cet ancre
Rappel : Théoriquement le lien est de type
<a href="#top">Retourner au début de cet article</a>
mais cela ne fonctionne pas car Blogger modifie obligatoirement le lien!
MAIS Blogger accepte
si l'on indique l'URL complétée (ici) de #top
ainsi:
<a href="URL complète de l'article#top">Retourner au début de cet article</a>
ex:
http://blogavecblogger.blogspot.com/2015/02/les-liens-dans-un-article-ou-page.html#top
3-Exemples
dans cet article :
Retourner au début de cet article
Voir l'Article de démonstration avec
-4 ancres : 3 parties + retour en haut de page
afin de naviguer facilement dans un long article
4-Conclusion
=>Le fait que Blogger accepte uniquement un lien vers l'ancre avec l'adresse complète de l'article ne permet pas une véritable navigation à l'intérieur de l'article, mais, en fait, crée une nouvelle ouverture de l'article dans le navigateur.
Aussi la création d'ancres dysfonctionne car Blogger modifie le code créé et les ancres traditionnelles ne fonctionnent pas correctement !
Il faut donc recourir aux astuces indiquées ci-dessus, seules solutions fonctionnelles
4-Conclusion
=>Le fait que Blogger accepte uniquement un lien vers l'ancre avec l'adresse complète de l'article ne permet pas une véritable navigation à l'intérieur de l'article, mais, en fait, crée une nouvelle ouverture de l'article dans le navigateur.
Aussi la création d'ancres dysfonctionne car Blogger modifie le code créé et les ancres traditionnelles ne fonctionnent pas correctement !
Il faut donc recourir aux astuces indiquées ci-dessus, seules solutions fonctionnelles
