• ACCUEIL
  • blogger

    Les liens dans un article ou page

    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:
    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


    Insérer un lien















    METHODE :
     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
    "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


    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


    -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...














    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 
    Vous avez créé des pages (voir le dossier Pages) et vous vous souvenez que ces pages ne peuvent s'afficher que via le "Gadget Pages"..
    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"
    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




    • 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