ThéorieFonctionnalitésContenu

Créer des liens


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Créer des liens
Les liens sont une partie essentielle de tout projet Web.
Tous les liens en HTML ont la même construction. Il y a des attributs pour de telles choses mais dans la pratique c'est à vous de décider comment vous bâtirez par exemple des liens de façon à ce que le visiteur voie clairement s'il s'agit d'un lien de retour à la page d'accueil, d'un lien croisé à un thème apparenté ou d'un lien à une toute autre adresse web.
Petit tour de présentation.

Structure classique d'un lien en HTML

<a href="http://draft.blogger.com/go/terms">Conditions d'utilisation</a>

Pour les liens en HTML existe le repère a (a = anchor = ancre).

Pour que cet élément devienne un lien, l'attribut <a href= est nécessaire (href = hyper reference = référence hyper(texte)).

Comme valeur pour l'attribut href, attribuez la cible du lien que vous souhaitez.

Comme contenu de l'élément a , à savoir entre <a> et </a>, notez le texte proposé au visiteur comme lien.


Haut de page


Mise en forme d'un lien (CSS)

Si dans la partie CSS de votre blog, vous ne mentionnez rien, les liens seront représentés dans les couleurs par défauts du navigateur.
Par exemple bleu pour les liens menant aux pages qui n'ont pas encore été visitées et violet pour les pages déjà visitées.
Heureusement, sur Blogger, dans les modèles proposés, la mise en forme des liens de bases est déjà mise en place et est même reliée avec l'éditeur de modèle grâce aux variables. Pour déterminer vos propres styles de liens pour votre blog, il existe plusieurs méthodes, vous pouvez utiliser les attributs CSS décrits dans l'aide en ligne Blogger.

Grâce aux CSS, il est ainsi possible d'empêcher le soulignement du texte de lien qui fait partie la plupart du temps des réglages par défaut, modifier la taille de la police, etc.

Les pseudo-formats :
Bien qu'il suffit d'utiliser l'élément a pour mettre en forme, il existe des pseudo-formats qui déterminent si le lien a déjà été visité, si il est survolé, etc.

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Dans les définitions de formats pour les différents pseudo-formats vous pouvez affecter les propriétés CSS appropriées que vous voulez. Les pseudo-formats signifient :

:linkPour les liens aux pages qui n'ont pas encore été visitées
:visitedPour les liens aux pages qui ont déjà été visitées
:hoverPour les liens survolés avec la souris
:activePour les liens en train d'être cliqués

Variables Blogger comme mentions :
Sur les modèles actuels de Blogger, les mentions de couleurs de liens sont raccordées à l'éditeur de modèles. Bien que les noms des variables peuvent varier, sur les modèles actuels proposés dans la bibliothèque du tableau de bord, Blogger a pris soin d'utiliser les mêmes noms :

a:link {
  color: $(link.color);
}

a:visited {
  color: $(link.visited.color);
}

a:hover {
  color: $(link.hover.color);
}


Ces variables sont exécutées grâce aux commandes mentionnées au début du code HTML du modèle (dans la section : /* Variable definitions) :

  <Group description="Links" selector=".main-outer">
    <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/>
    <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
    <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#33aaff"/>
  </Group>

Pour chaque variable, est mentionnée, une valeur par défaut et la valeur modifiée via l'éditeur de modèle. D'autres mentions sont également requises :

name Nom de la variable utilisée dans les CSS
description Nom de la fonctionnalité apparaissant dans l'éditeur de modèle.
Si le nom en anglais figure dans la liste des traductions de Blogger, le nom mentionné en anglais apparaîtra en français.
type Type de mention CSS. Dans ce cas-ci, une mention de couleur.
default La valeur par défault fixée par le créateur du modèle.
value La valeur modifiée dans l'éditeur de modèle.


Haut de page


Lien interne à un blog

Si vous écrivez des liens menant vers des pages spécifiques de votre blog en HTML dans vos articles ou tout simplement dans le code HTML de votre modèle, vous avez la possibilité de "raccourcir" ce lien en ne mentionnant que le répertoire et la page de destination. Cette méthode est relativement pratique si un jour, vous décidez de changer l'url de votre blog ou si vous décidez de passer vers un nom de domaine personnalisé.

Exemple avec l'url d'un article

Avec l'url complète :
<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html">Un favicon personnalisé</a>

Avec l'url réduite :
<a href="/2012/03/un-favicon-personnalise.html">Un favicon personnalisé</a>

Dans cet exemple, le domaine du blog n'a pas été mentionné, mais il est bien considéré par les navigateurs, puisque le lien complet figure sous le même domaine.


Haut de page


Titre d'un lien

Nous avons vu plus haut a quoi ressemblait la structure HTML de base d'un lien. Il est également possible de compléter cette structure avec plusieurs éléments. En l’occurrence, dans ce chapitre, un titre et plus précisément une infobulle.

Une infobulle est un petit cadre informatif qui apparaît à côté d'un lien quand on le survole, si celui-ci est doté de l'attribut title.

<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html" title="Une infobulle pour ce lien">Un favicon personnalisé</a>

Bien que cela paraisse très simple, il faut tout de même faire attention de ne pas y indiquer n'importe quoi.

Par exemple, n'ajoutez pas d'apostrophes ou de guillemets. Si c'est inévitable, ajoutez-les en caractères échappés.

A ne pas faire :
<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html" title="Je ne peux pas mettre de ", ni d'apostrophe dans le titre">Un favicon personnalisé</a>

Écrivez plutôt :
<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html" title="Je ne peux pas mettre de &quot;, ni d&#39;apostrophe, dans le titre">Un favicon personnalisé</a>



Haut de page


Relation logique d'un lien : rel="nofollow"

"L'attribut nofollow permet aux webmasters de donner l'instruction suivante aux moteurs de recherche : "ne suivez pas les liens sur cette page" ou "ne suivez pas ce lien spécifique".

À l'origine, l'attribut nofollow apparaissait dans la balise Meta au niveau de la page et demandait aux moteurs de recherche de ne pas suivre (c'est-à-dire explorer) les liens sortants de la page."




La relation nofollow s'applique de cette manière dans le lien :

<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html" rel="nofollow">Un favicon personnalisé</a>

Si vous utilisez l'éditeur des articles de Blogger en mode "rédaction", l'attribut nofollow est mentionné comme option à cocher dans les paramètres.


Créer des liens


Bien évidemment, il existe d'autres relations logiques, comme par exemple, l'auteur d'un article, les libellés, la date de publication. Tous ces éléments jouent un rôle très important pour le référencement.
Heureusement pour vous, si vous utilisez un modèle Blogger par défaut, tous ces éléments sont déjà introduit.


Haut de page


Fixer la fenêtre cible

Grâce à l'attribut target= (target=cible) dans la structure HTML du lien, vous pouvez fixer une fenêtre cible pour le lien. Si vous voulez ouvrir le lien dans une nouvelle fenêtre, affectez à target la valeur _blank (sans oublier le tiret de soulignement qui précède!).

<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html" target="_blank">Un favicon personnalisé</a>

D'autres valeurs peuvent être attribuées à l'élément target :

_blank Ouvrir le lien dans une nouvelle fenêtre
_self Ouvrir le lien dans la fenêtre actuelle
_top Si le lien se trouve dans une fenêtre incorporée (frame ou iframe), il refermera toutes les fenêtres et s'ouvrira dans la fenêtre principal du navigateur
un nom Si la fenêtre de destination est nommée, l'élément target peut contenir le nom de la fenêtre cible

Sur Blogger, dans l'éditeur des articles en mode "rédaction", la fonctionnalité target="_blank" est paramétrable dans l'option du lien.


Créer des liens


Haut de page


Lien ouvrant une fenêtre pop-up

Avec l'élément javascript window.open intégré dans le lien, vous pouvez définir l'ouverture du lien dans une fenêtre pop-up.

<a href="http://bloggercode-blogconnexion.blogspot.com/" onclick="javascript:window.open(this.href, 'popup', 'toolbar=no, location=no, statusbar=yes, menubar=no, scrollbars=yes, width=600, height=600'); return false;">Un lien pop-up</a>

En rouge : vous ajoutez l'url de la page à ouvrir.

En bleu : L'élément javascript window.open exécute l'ouverture en pop-up.

En vert : Le nom de la fenêtre de destination.

Surligné en bleu : Les éléments permettant de définir des propriétés à la fenêtre pop-up.


Les principales propriétés de la fenêtre pop-up :

Propriétés Significations Valeurs
toolbar Si oui (yes), la fenêtre reçoit sa propre barre d'outils. Si non (no= réglage par défaut), elle ne reçoit pas de barre d'outils. yes | no
location Si oui (yes), la fenêtre reçoit sa propre barre d'adresse URL. Si non (no = réglage par défaut), elle ne reçoit pas de barre d'adresse. yes | no
statusbar Si oui (yes), la fenêtre reçoit sa propre barre d'état. Si non (no= réglage par défaut), elle ne reçoit pas de barre d'état. yes | no
menubar Si oui (yes), la fenêtre reçoit sa propre barre de menus avec les commandes du navigateur. Si non (no = réglage par défaut), elle ne reçoit pas de barre de menus. yes | no
scrollbars Si oui (yes), la fenêtre reçoit des barres de défilement. Si non, (no), l'utilisateur ne peut pas faire défiler la fenêtre. Le réglage par défaut est no. yes | no
resizable Si oui (yes), le visiteur peut modifier la taille de la fenêtre. Si non (no), le visiteur ne peut pas modifier la taille de la fenêtre. Le réglage par défaut est no. yes | no
width La largeur de la nouvelle fenêtre en pixels. valeur en px
height La hauteur de la nouvelle fenêtre en pixels. valeur en px
top La position (en pixels) de la fenêtre à partir du haut de l'écran. valeur en px
left La position (en pixels) de la fenêtre à partir de la gauche de l'écran. valeur en px


Haut de page


Lien vers une adresse émail

Les liens à des adresses émail fonctionnent sur le même principe que les liens "normaux".

Attention ! N'oubliez pas que lorsque vous mentionnez une adresse émail sur le Web, les spammeurs peuvent également y avoir accès.

<a href="mailto:bloggercode@gmail.toto">Contacter par émail</a>

Avec l'attribut href dans le repère d'ouverture <a> la cible du lien est mentionnée.

Les liens à des adresses émail commencent toujours avec mailto:.

A savoir que le lien n'est exécutable chez l'utilisateur que si le navigateur utilisé soutient la rédaction et l'envoi d’émail, ou si avec de tels liens, un programme émails est démarré automatiquement depuis l'ordinateur.


Sur Blogger, dans l'éditeur des articles en mode "rédaction", il vous est également possible d'ajouter un lien vers une adresse émail.


Ajouter une adresse email




Haut de page


Une image en tant que lien et visionneuse Blogger

Une image peut également remplacer un texte de lien.

<a href="http://bloggercode-blogconnexion.blogspot.com/">
  <img src="URL DE L'IMAGE"/>
</a>

Ce qui donne :



Utiliser un lien pour afficher une image dans la visionneuse Blogger :

La visionneuse Blogger (alias lightbox), est apparue sur Blogger en septembre 2011.

Le principe est assez simple. Il s'agit d'une image encadrée par un lien qui contient l'url de l'image.

Pour que cette fonctionnalité soit opérationnelle dans vos articles, vous devez l'activer depuis le tableau de bord :

  • Tableau de bord
  • Paramètres
  • Publications et commentaires
  • Exposer des images en mode lightbox
  • OUI | NON


Créer des liens


Si oui, la fonctionnalité sera activée et les liens avec les images présentés comme ci-dessous s'ouvriront dans la visionneuse :


<a href="URL DE L'IMAGE APPARAISSANT DANS LA VISIONNEUSE"><img src="URL DE L'IMAGE APPARAISSANT DANS L'ARTICLE"/></a>


Rappel : La visionneuse est inactive dans les modèles dynamiques et sur les mobiles.


Si vous utilisez les images hébergées sur Picasa, vous pouvez contrôler les dimensions des images a afficher dans l'article et dans la lightbox en modifiant la valeur /sXXX/ qui se trouve dans l'url de l'image.

Exemple :

http://lh4.ggpht.com/_E5JYoHlDglk/TR-dax6BRCI/AAAAAAAADjM/hKMqNHjN9-w/s220/BCodeLogo.png


Haut de page


Créer des ancres et des liens vers des ancres

Blogger a défini des ancres dans les modèles telles que les backlinks, les commentaires ou encore le marqueur d'expansion. Vous pouvez également en définir à l'intérieur d'un article ou dans le code HTML d'un modèle.

Ensuite, vous pouvez poser des liens à de telles ancres pour faire un saut exactement à l'endroit de l'ancre dans la page.

Le lien peut aussi bien se trouver dans la même page ou dans une autre page.

Alors, le "saut" s'effectue à l'intérieur de la page affichée.

Une ancre se défini comme suit :

<a name="UN_NOM"></a>

Attribuez un nom à l'ancre. Ce même nom sera mentionné dans l'url précédé du symbole cardinal # :

<a href="#UN_NOM">LIEN VERS L'ANCRE</a>

Si l'ancre n'est pas dans la même page (ou vice-versa), vous devez mentionner l'url complète suivi du nom de l'ancre :

<a href="http://bloggercode-blogconnexion.blogspot.com/2012/03/un-favicon-personnalise.html#UN_NOM">LIEN VERS L'ANCRE</a>


Les principales ancres ajoutées par Blogger dans les modèles

Marqueur d'expansion#more
Section commentaires#comments
Formulaire des commentaires#comment-form
Backlinks#links


A savoir que l'attribut name="" est considéré comme obsolète. W3C recommande d'utiliser l'attribut id=""
<a id="UN_NOM"></a>


Haut de page


Liens "afficher/masquer" un contenu

La première étape consiste a ajouter un petit CSS qui permettra de masquer le contenu :

  • Tableau de bord
  • Modèle
  • Personnaliser
  • Avancé
  • Ajouter fichiers CSS

Ajoutez ce CSS :
.cacheexpand {
  display: none;
}

La classe cacheexpand (que vous pouvez renommée) doit être appliquée à chaque élément que vous voulez masquer.

<div class='cacheexpand' id='content1'>
contenu à masquer
</div>

En bleu : Il s'agit de l'identifiant du contenu à afficher/masquer.
Pour chaque "élément" à afficher/masquer, l'identifiant doit être unique !

Et enfin, dès que tout ça est mis en place, on crée le lien en faisant appel à la fonctionnalité JS onclick en reprenant la classe et le bon identifiant.

<a href="javascript:;" onclick="document.getElementById('content1').className = ( document.getElementById('content1').className == 'cacheexpand' ) ? '' : 'cacheexpand';">[+/-] afficher/masquer ce contenu</a>


Démo :

Félicitation !
Vous venez de démasquer un contenu masqué.


Haut de page


Liens dans les commentaires Blogger

L'un des moyens de faire connaître son blog sur le net, est de déposer l'url de son blog dans les commentaires.

Dans le formulaire de commentaires de Blogger, vous pouvez mentionner votre url de différentes manières :

1°) Dans le commentaire en format HTML

<a href="http://bloggercode-blogconnexion.blogspot.com/">mon blog</a>

Seul l'attribut href est autorisé !


2°) Le lien de l'auteur du commentateur :

L'url de votre blog sera appliqué sur votre pseudo si vous utilisez les options Nom/URL ou OpenID.


Créer des liens


Dans le cas de l'option Nom/URL, vous devrez ajouter un pseudo et l'url de votre blog (ou autre).

Dans le cas de l'option OpenID, vous ajoutez uniquement l'url de votre blog et vous confirmez que Blogger peut utiliser cet url. Le nom de l'url de votre blog servira de pseudo.


Et voilà, c'est terminé pour ce petit aperçu sur les liens sur Blogger.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire