Tutoriel : comment ouvrir des liens dans une nouvelle fenêtre

Amis bloggers,

Tout comme moi, il vous arrive certainement souvent d'insérer des liens dans vos posts.

Problème: lorsqu'un lecteur clique sur un lien, celui-ci s'ouvre dans la même fenêtre que votre blog. Le lecteur quitte donc votre blog pour aller vers la page pointée par le lien.
Solution: que vos liens s'ouvrent dans une nouvelle fenêtre, laissant au lecteur la possibilité de continuer à lire votre blog en parrallèle.

Pour cela, je vous propose de progresser dans votre geek-itude. En effet, pour mener à bien cette mission il vous faudra entrer dans le code HTML de vos posts, rien que ça. Mais rassurez-vous c'est à la portée de tout le monde et vous en êtes largement capable (notez que si votre Copine Débile peut le faire, vous le pouvez aussi !!)

Alors commençons :

Vous savez que le langage pour afficher des pages dans le web s'appelle le langage HTML. C'est dans ce langage que sont écrites les pages web (avec d'autres langages pour des fonctions spéciales comme le flash, le php, l'ajax mais ça ne nous intéresse pas ici). Ca ressemble à ça (cliquez sur les photos pour les agrandir) :

Vous, lorsque vous écrivez votre post tranquillement dans votre interface blogger, et bien cette interface va le traduire automatiquement en langage (code) HTML. D'ailleurs, vous pouvez le constater car lorsque vous avez écrit un post, si vous cliquez en haut à droite de la zone d'écriture sur l'onglet "Modifier le code HTML", vous visualisez la version HTML de ce que vous avez précédemment écrit. Et bien sûr, lorsque vous cliquez sur "Rédiger", vous revenez à la version normale.

 

C'est magique n'est-ce pas ?

En fait votre interface blogger, en langage technique, c'est un CMS (Content Management System), c'est à dire un système de management du contenu. Il va traduire vos actions simples en langage codé. C'est grâce à lui que vous pouvez facilement gérer un site web. Avant, seuls les développeurs qui savaient lire et écrire les langages informatiques pouvaient créer et gérer des sites web. Maintenant, c'est à la portée de tout le monde (youpi!).

Néanmoins, il est toujours très utile de comprendre un minimum le code HTML, cela vous permettra une plus grande marge de manoeuvre dans la gestion de votre blog. C'est ce que nous allons voir.

Commençons par voir ce que donne un lien en langage HTML. Par exemple j'écris "Cliquez ici" et je mets un lien vers Google sur le mot "ici".
En langage HTML cela va se traduire par :
Cliquez < a href="www.google.fr" ;> ici < /a >

 

En effet, la balise HTML d'un lien s'ouvre avant le mot ou l'ensemble de mots sur lesquels va porter le lien et se referme juste après. Elle s'ouvre avec les éléments suivants :
<a href="www.google.fr"> et elle se referme avec </a>.

Maintenant prenons un exemple : vous avez écrit un post et vous y avez inséré un lien comme à votre habitude. Ouvrez ce post et entrez dans sa version HTML. C'est bizarre hein ?!!

Passez d'une version à l'autre quelques fois pour vous familiariser.

Bon, maintenant on va rechercher votre lien. Pour ceci, vous avez deux possibilités : soit chercher les mots sur lesquels vous avez mis le lien, soit chercher la balise de lien (elle se présente toujours comme suit : <a href="www.google.fr">).

Pour rechercher dans votre code : soit vous parcourez toutes les lignes de code et perdez 2 dixièmes à chaque oeil, soit vous utisez cette fabuleuse fonction "ctrl+f", qui ouvre un pop up (ou qui s'ouvre dans un coin de cotre navigateur Internet selon les versions) dans lequel vous entrez les lettres "href" (ou les mots de votre lien) et qui va rechercher automatiquement pour vous (on n'arrête pas le progrès :)

Vous allez finir par tomber sur votre lien. Exemple :

Maintenant il vous faut ajouter à votre balise lien une propriété qui va lui indiquer que le lien doit s'ouvrir dans une nouvelle fenêtre. Cette propriété s'écrit comme ceci :
Target="_blank".

C'est facile, à condition de la mettre au bon endroit = dans votre balise lien, juste après l'url, en laissant bien un espace entre les deux éléments, mais avant le signe [>].

Concrètement ça donne ça :
<a href="www.google.com" target="_blank">

Et en image :

Ensuite, enregistrez et vérifiez que ça marche bien sûr, puis refaites la même chose pour tous vos liens (oui je suis d'accord c'est un peu fastidieux mais bon).

Et voilà c'est (déjà lol) terminé !

A bientôt pour un nouveau tutoriel !!