Créer un Blog avec 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"

          Méthode:
                     -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
    "



    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 (le "lien permanent")
      • il s'affiche sur le côté de l'article
      • OU copier l'adresse URL affichée par le navigateur lorsque vous affichez votre blog


        Exemple : lien vers un article de ce blog
  • 2-Lien vers une adresse email via le menu "Associer"

    Sélectionner le texte du lien avant de faire le lien : M'écrire


    Même méthode que ci-dessus







  • 3-Liens spécifiques via images et photos

    Comment rendre une image cliquable : voir notre dossier
    Exemple:





  • 4-Rediriger une 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é.


    •  Possibilité de rediriger une page 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 :


  • Possibilité de faire un lien 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.




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





6-Créer des ancres

Si votre article est très long, il peut être utile de faire figurer des liens de navigation à l'intérieur de l'article.

==>Tout se crée en mode HTML

Il faut d'abord, en mode html, positionner les ancres (repères)  puis ensuite créer les liens vers les ancres


Principe théorique:

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  

1-Créer l'ancre  (sur un titre de préférence).

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>

car Blogger modifiera  obligatoirement  ce lien
 dans le code



MAIS Blogger accepte


<h2 id="top">Tout sur les liens !</h2>


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


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!) il faut indiquer l'URL complète 
:

<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


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 tradionnelles  ne fonctionnent pas correctement !
Il faut donc recourir aux astuces indiquées ci-dessus, seules solutions fonctionnelles