Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

mercredi 26 septembre 2007

Ouvrir les liens dans une nouvelle fenêtre

La théorie

L'attribut target permet de désigner le cadre (au sens large) dans lequel la ressource désignée par l'hyperlien doit s'ouvrir. Par défaut le lien s'ouvre dans la fenêtre d'appel (formellement target="_self").
Pour ouvrir le lien dans une nouvelle fenêtre, il faut utiliser :

target="_blank"

La polémique

target a été indroduit en html 4 mais supprimé de la norme html 4.1 strict. Sans rentrer dans la polémique, relevons quelques arguments pour et contre :
Pour :
Ouvrir le lien dans la même fenêtre entraîne des déperditions de pages visitées pour le site initial
Présenter une information supplémentaire légère en appui de la page principale (aide contextuelle ou agrandissement d'une vignette)
Contre :
L'attribut target contribue au mélange du code relatif à la présentation et au contenu
L'espace de travail de l'utilisateur est encombré de fenêtres supplémentaires

Un lien textuel

Il suffit d'ajouter l'attribut target="_blank" au tag <a>. Par exemple :

Un nouveau site sur <a href="http://www.mauricegay.ch" target="_blank" title="Les vins du Valais">les vins du Valais</a>

Un nouveau site sur les vins du Valais


Un lien sur une image

Le tag <img> doit être encapsulé dans une ancre. Comme pour un lien textuel, il suffit d'ajouter l'attribut target="_blank" au tag <a>. Par exemple :


<a title="texte lien" href="http://www.blogger.com/URL" target="_blank"><img title="Titre image" alt="texte alternatif" src="http://www.blogger.com/URL" /></a>

Vignette Maurice Gay


Ajouter automatiquement l'attribut target="_blank" dans la liste des liens du Blog

Pour que les liens du Widget Liste de Liens s'ouvrent dans une nouvelle fenêtre, il faut modifier le template :

Paramètres/Modèle/Modifier le code HTML/Développer des modèles de gadget

Rechercher : b:widget id='LinkList

(Il peut y avoir plusieurs listes de liens, LinkList1, LinkList2, ...)

<b:widget id='LinkList1' locked='false' title='Titre de la liste' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a href='data:link.target' target='_blank'>
<data:link.name/></a>
</li>
</b:loop>
</ul>
...

Il suffit d'ajouter target='_blank' (attention, encadré par une apostrophe).

Ajouter automatiquement l'attribut target="_blank" pour les posts

Paramètres/Modèle/Modifier le code HTML/Développer des modèles de gadget

Rechercher : b:includable id='post'

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' target='_blank'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
...

Ajouter deux fois target='_blank'


Autres trucs et astuces :

57 commentaires:

Peaceful/Paisible a dit…

ça y est, j'ai réussi...un truc, pour mettre quelques liens dans la side-bar, (rédigé sous le mode texte) il suffit que je rajoute target="_blank" et ça marche pour les autres...c'est logique ?

Peaceful/Paisible a dit…

j'ajoute une seule fois au premier lien ...

Jerom a dit…

Bonne astuce!
Ne pas oubliez de précisez que chez Firefox & Opéra ce n'est pas une fenêtre mais un onglet qui se crée, ce qui est préférable (selon moi^^).

Des actions qui sont faisable en utilisant CTRL+cli (chez Firefox) ou Shift+clic (chez Opéra) ;)

Sylber a dit…

Super asctuce pour les nuls ! Par contre il n'y a pas moyen simple de rendre tous les liens du blog ainsi ?

JackJack a dit…

Sympa ce truc, mais est-il possible d'appliquer ca a toute les images d'un blog blogger ?

Anonyme a dit…

Waouw !!!
COmpliqué tout ça !!
Je retente la semaine prochaine !

Anonyme a dit…

J'y arrive pas du tout !
Je crois que je ne comprend rien !!!
Soit je n'ai pas les mêmes "phrases" html, soit je remplace et ça ne fonctionne pas...
Pas douée la Sam hein Mousie !!!

Anonyme a dit…

Bonjour,
Je voudrais savoir si l'on peut par un lien, envoyer un utilisateur du blog, à un endroit précis de celui-ci (sur une note spécifique)?
Si oui, quel serait le modèle de l'adresse à utiliser :
http://...

En vous remerciant pour vos conseils.

Cordialement.

Prac a dit…

Bonsoir
C'est très simple. La destination du lien est identifiée par un id="xxxx" à placer dans un div ou un span.

Pour l'URL de départ

http://adresse du post#xxxx

prendre soin que le xxxx suive les règles d identifiant (minuscules, blanc souligné comme seul car. special)

un exemple de destination, sur mon blog test

Exemple de destination

mtislav a dit…

Peut-on savoir comment rendre une image intéractive dans blogger ? Je ne peux même pas recopier le texte que donne blogger, le serveur ne l'autorise pas ...

Est-il possible d'insérer un lien dans ce code que génére blogger quand on charge une photo ? Je pourrais essayer cela dit... Merci pour vos trucs.

Prac a dit…

Bonsoir, je vous ai repondu dans le groupe d aide :

Un lien sur une image

Bonne nuit

Dominic Toupin a dit…

Pour la liste des liens ça fonctionne mais même en suivant toutes ces étapes, mes liens dans les post ne s'ouvre pas dans une autre fenêtre. J'ai dû mettre les target blank à la main dans mes posts.

Que faire

Prac a dit…

Bonsoir Dominic

Avez-vous trouvé

b:includable id='post'

la modification apres l insertion de target='_blank' (aux 2 endroits) a-t-elle ete acceptee ?

Baquet a dit…

meme probleme que dominic mais moi ca ne fait rien ,j'ai bien mis ou il faut 2 fois les target blank ...
ca ne fonctionne pas !?

Anonyme a dit…

Merci pour cette astuce.

Grace à toi, les internautes ne quittent plus ma page ;)

http://radiomanu.blogspot.com/

Mélanie. a dit…

Bonsoir, j'ai essayé mais ça ne fonctionne pas, quand je veux enregistrer les modifications, voilà le message que ça m'affiche : Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : The value of attribute "expr:href" associated with an element type "null" must not contain the '<' character.
Merci de me dire où je me plante...

Anonyme a dit…

merci pour tes conseils pour ouvrir les liens dans une autre fenetre. J'étais un peu perdu pour modifier la trame html.

fb

http://fb-bourse.blogspot.com

krystal a dit…

bonsoir,
pour ma part, j'ai deux listes de liens .. je les vois bien apparaitre dans mon modèle mais il n'y a pas autant de lignes que dans votre exemple !! il y a une ligne pour chaque ... du coup je ne sais pas du tout où inserer le target="_blank" !!!

krystal a dit…

j'ai trouvé !!! pour tomber sur le modèle cité dans cet article , il suffit de cocher l'option "développer les modèles de gadgets" et haut à droite de la fenêtre du code HTML !!!! wouéééé !!!!!

krystal a dit…

bon ... ben ça ne marche pas .. ça me met le même message de mélanie !! ne faut-il pas écrire target qu'une seule fois ? ou mettre des " au lieu des ' ?
au secours !!!!!!

krystal a dit…

voilà ce que dit exactement mon message d'erreur :
Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "a" must be followed by either attribute specifications, ">" or "/>".
merci de votre aide

Prac a dit…

Bonsoir Krystal

Inserer le target='_blank' sur la meme ligne que a expr:href='data:post.link' sans retour à la ligne, sinon blogger insere automatiquement un
qui est invalide

krystal a dit…

merci de ta réponse viti-vino ...

j'ai inséré le target='_blank' après a expr:href='data:link.target' avec bien entendu "<" au début et ">" à la fin .. et tout ça sur la même ligne !! ça marche pas ....

je rappelle qu'il s'agit de la section : LinkList1'

merci ...

Prac a dit…

Bonsoir Krystal

Cela devient desesperant !! cela ne marche pas : Quel estle message lors de la mise a jour du code html (Paramètres/Modèle/Modifier le code HTML/Développer des modèles de gadget)

bon week end

Anonyme a dit…

Merci pour votre blog très utile.

Anonyme a dit…

Bonjour,
Je n'arrive pas a faire comme vous,
j'ai modifier le langage html ms je vais d'erreurs en erreurs..

J'ai donc procéder autrement,
Je vous explique ma démarche,

- Je suis allez dans publication d'un message/créer/Rediger
- j'écris ex: page2,
- je clique ensuite sur le bouton lien,
- une fenetre s'affiche,
- il me demande une URL,
- la j'écris :
- ex: http:nomblog/blogspot.com/page2.html
- j'enregistre,
- Et quand j'éssaie sur mon blog sa n'ouvre pas une nouvelle page,
- Enfin si sa m'ouvre la page d'erreur de blogspot en me disant que ce lien n'éxiste pas..

Alors comment puis je en cliquant sur le lien,
ouvrir une nouvelle fenetre,
que je pourais paraméter comme l'accueil du blog,
je n'y arrive pas,
j'ai vraiment chercher par tout...
help me

Prac a dit…

Bonsoir

Faites un lien vers un message existant

http://VOTREBLOG.blogspot.com/date/titre-message

Nancy Bertrand a dit…
Ce commentaire a été supprimé par l'auteur.
Nancy Bertrand a dit…

Je veux vous remercier pour l'immense aide que ce blog m'a procuré!

Belle initiative!

Prac a dit…

Merci Nancy et bonne suite

Anonyme a dit…

salut et bravo pour ton blog

j ai bien inséré le code target que tu files pour ouvrir les liens des messages postés dans une nouvelle fenetre. mais ca marche pas.

quelqu'un à réussi??
merci

Prac a dit…

Bonsoir Anonyme

Donnez nous l adresse de votre blog

Anonyme a dit…
Ce commentaire a été supprimé par l'auteur.
Anonyme a dit…

Bonjour,
Ok ça marche pour widget liste de liens. Ne pas oublier l'espace:target' target='_blank'>

Merci pour toutes ces astuces!

petits.clous a dit…

Bonsoir,
Tout d'abord merci pour ce blog !!
Auparavant j'avais réussi à faire cette manip sur mon modèle à 2 colonnes, mais en passant à 3 colonnes, je n'arrive plus à l'installer. J'ai droit à ce message d'erreur : Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "a" must be followed by either attribute specifications, ">" or "/>".

Est-ce qu'il y a quand même moyen de le faire ?

Merci d'avance.
nol de nol

les nuages bavards a dit…

Nickel !! Merci :)

Benjamin a dit…

Bonjour, merci pour cette astuce : j'ai réussi à l'appliquer à toutes les fenêtres de lien de mon blog.

Par contre, je n'arrive pas à faire la même chose pour une fenêtre de flux RSS (les flux apparaissent sous forme de liens, qui persistent à s'ouvrir dans la fenêtre active plutôt qu'une nouvelle fenêtre).

Où dois-je ajouter le "target='_blank'" dans ce cas ?

Pour être plus clair, j'aurais aimé inclure le morceau de code concerné dans ce post, mais je n'ai pas réussi à publier le message en l'état.

Quelqu'un peut-il m'aider ?

Unknown a dit…

Bonjour à tous,

@Benjamin :

Afin de ne pas trop "surcharger" ce blog qui se veut un recueil d'astuces et de conseils d'usagers de Blogger, je vous suggère de poser votre question sur le groupe d'aide Blogger, animé par les mêmes que ce blog, mais qui présente l'avantage d'élargir votre champs de questions/réponses à un plus grand nombre de blogueurs.
Note : vous n'avez pas besoin de vous inscrire sur le groupe pour poster votre question. En revanhce, n'oubliez pas de donner l'adresse de votre blog.
Merci,

a+
BB.

MaxBrub a dit…

Mon problème est que je vois un code différent dans la partie: b:widget id='LinkList2' .
Je ne vois pas ou insérer la partie BLANK!

Tine a dit…

mon blog est http://nutritionetsante.blogspot.com et je n'ai pas réussi a mettre dans le sidebar un lien s'ouvrant sur une autre page!
Peux tu m'aider?
Merci

Prac a dit…

Bonsoir

@santescolaire

Il faut faire exactement la modif

[a expr:href='data:post.link' target='_blank']

Vous avez du effacer le crochet fermant

Cdt

Anonyme a dit…

Je sais que ce post date d'un bail mai il est toujours très utile. Je me suis surprise à utiliser les conseils pour mon blog et ça me plaît! J'ai pleins de liens dans mes postes et cela va éviter à mes lecteurs de retourner sur la page précédente à chaque fois ou perdre l'adresse! Ça y est je deviens une geek. Merci pour cetet aide!!!

Prac a dit…

Bsr

@Aurelia

Merci, un remerciement fait toujours plaisir

Bonne suite

Anonyme a dit…

je ne comprend pourquoi je n'arrive pas à ajouter une autre liste de blog ni de liens...et dans celle de mes liens il n'accepte pas plus de trois liens je e sais pas quoi faire....!merci de m'aider

Anonyme a dit…

Bonjour

Comment fait-on pour qu'un lien soit cliquable dans un commentaire sur un blog Blogger?

Cordialement

Prac a dit…

Bonjour

Pour un commentaire avec lien cliquable mettez une balise a (ancre) :

<a href="URL">Lien</a>

Genea_Italie a dit…

j'aimerais bien que ce liens fonctionne pour voir ou il ce place !!

PHILIPPE AUGER a dit…

Hello j'avais aussi ce message : Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "a" must be followed by either attribute specifications, ">" or "/>".
et comme l'a dit pierre il faut bien laisser 1 "espace" entre les target

Ivy a dit…

Salut!

Je l'ai fais ce matin et ça fonctionnait depuis j'ai changé de theme pour mon blog et ça ne fonctionne plus du tout. Est-ce qu'avec certain theme ça peut poser un problème? J'y comprends plus rien !

Ivy

☐☐☐☐☐☐☐ a dit…

Encore + simple !!

Il suffit de recopier ce code suivant juste en-dessous : <"base target='_blank'/"> juste apres cette balise : <"div class='post-header' ">, enregistrer les modifs. Desormais, tous les liens du message s'ouvrent dans un nouvel onglet

PS : n'oubliez pas de retirer les guillemets ( " ) des balises et codes

Franck a dit…

sur mon site, l'ajout automatique de l'attribut target n'a pas marché. Par contre juste apres cette balise div class='post-header', ça ouvre tous les liens, même ceux provenant de mon blog.
A t-on une autre solution?

exemple avec mon site :
http://psyfacile.blogspot.com/2010/09/7-conseils-quand-le-malheur-frappe.html

avec l'hyperlien ReaderDigest

Prac a dit…

@psyfacile

Lorsque vous ecrivez un message ajoutez, par l onglet html, l attribut target="_blank"

Cdt

--

Franck a dit…

Merci pour votre réponse vraiment rapide viti-vino. Bonne continuité à vous.

.... a dit…

Bonjour,

Mais pourquoi alors que j'ai créé mon blog avec un modèle blogger je n'ai aucune des balises citées dans l'article ou dans les commentaires.
Je ne sais donc pas où mettre target blank car si je le mets après la balise head cela ne fonctionne pas.

En vous remerciant par avance pour votre aide.
http://chien-calme.blogspot.com

Prac a dit…

Bonsoir

@N.A

Vous ne trouvez pas les balises car vous n avez pas de listes de blogs ou d images en gadgets

Pour un lien dans un message, utilisez l onglet html, cherchez le tag a (ancre) et mettez comme attribut de ce tag target="_blank"

Cdt

TDSvoyage a dit…

Bonjour,

C'est peut-être un peu rébarbatif mais, après avoir lu l'ensemble des messages et avoir rentré tous les target="_blank" où il fallait dans le code HTML, aucun de mes liens (vers d'autres sites, ou document PDF) ne s'ouvrent dans un nouvel onglet...

La seule chose qui ai marché jusqu'à présent c'est la proposition de "HARDCORE SPIRIT" mais qui pour le coup ouvre un onglet sur chaque liens (too much).

Que faire...
Et comment désactiver un lien sur une photo mise dans le blog, qui mène lorsque que je clic dessus sur une page vierge où elle est affiché en plus gros.
(J'espère être claire :S)

Merci à vous

Notre site internet: http://voyages-solidaires.blogspot.com/

PH a dit…

Bonjour,
Dans ma barre de navigation (pages), j'ai un onglet qui est lié à une url extérieure au blog. Est-il possible de faire en sorte que ce genre de lien s'ouvre dans un autre onglet (en gros je voudrais que ce soit uniquement les liens extérieurs au blog qui s'ouvrent dans un nouvel onglet...)

Merci pour votre aide!
Pierre