ouvrir dans nouvel onglet Tumblr

09 déc. 2015, 02:27

Bonjour,

Je cherche à modifier le HTML de mon blog tumblr afin d'ouvrir les images dans un nouvel onglet lorsque l'on clique dessus, je sais que je dois placer target="_blank" comme ceci : <a href="page2.htm" target="_blank">Votre lien</a> mais je ne sais pas quelle ligne est la bonne et si je fais bien... Si une âme charitable pouvait aider un novice comme moi cela serait fort apprécié!

Voici le code de mon blog :

<p><a href="http://www.copyrightfrance.com/phtml/p_ ... .php"><img src="https://33.media.tumblr.com/b76a8659c3a ... n9_500.gif" /></a></p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta charset="UTF-8">

<meta name="description" content="{block:Description}{MetaDescription}{/block:Description}">

<link rel="shortcut icon" href="https://31.media.tumblr.com/avatar_102a76932b73_128.png">
<link rel="apple-touch-icon" href="{PortraitURL-128}">
<meta name="viewport" content="width=device-width, initial-scale=0.5">

<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link href='http://fonts.googleapis.com/css?family= ... at:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family= ... ,400italic' rel='stylesheet' type='text/css'>

<meta name="color:Background" content="#FFFFFF">
<meta name="color:Body Text" content="#888888">
<meta name="color:Links" content="#666666">
<meta name="color:Title" content="#333333">
<meta name="color:Meta" content="#CCCCCC">
<meta name="color:Dividers" content="#EEEEEE">

<meta name="image:Logo" content="">

<style type="text/css">

html{
background-color: {color:Background};
-webkit-font-smoothing: antialiased;
}

body{
color: {color:Body Text};
font-family: 'malgun gothic','Helvetica Neue', "Arial", sans-serif;
font-size: 13px;
line-height: 1.6em;
}

h1, h2{
font-family: 'Montserrat', 'malgun gothic', 'Helvetica Neue', "Arial", sans-serif;

}

h1{
font-size: 22px;
line-height: 24px;
}

h2{
font-size: 18px;
line-height: 20px;
text-transform: lowercase;
}

a:link, a:visited{
color: {color:Links};
text-decoration: none;
font-weight: 700;
}

a:hover{
text-decoration: underline;
}

hr{
border:0 #aaa solid;
border-top-width: 1px;
clear: both;
height: 0;
}

ol{
list-style:decimal
}

ul{
list-style:disc;
margin-left: 0;
}

li{
margin-left: 0
}

p,dl,hr,h1,h2,ol,ul,pre,table,address,fieldset{ margin: 0 0 10px 0;}

.wrapper{
width: 500px;
margin: auto;
padding: 20px 0;
}

.header{
margin: auto;
}

.logotitle{
margin: 20px 0;
}

.logo{
text-align: center;
}

.title{
text-align: center;
font-size: 27px;
letter-spacing: 5px;
font-family: 'Montserrat', 'malgun gothic', 'Helvetica Neue', "Arial", sans-serif;
margin-top: 30px;
margin-bottom: 20px;
}

.title a{
color: {color:Title};
}

.description{
text-align: center;
padding: 20px 0 20px 0;
}

.nav{
text-align: center;
font-size: 11px;
text-transform: uppercase;
font-family: 'Montserrat', 'malgun gothic', 'Helvetica Neue', "Arial", sans-serif;
}

.nav li{
margin: 15px;
display: inline;
}

.posts{
padding-top: 110px;
}

.meta{
display: block;
height:14px;
line-height:1em;
font-family: 'Montserrat', 'malgun gothic', 'Helvetica Neue', "Arial", sans-serif;
padding-bottom:2px;
margin-top: 25px;
margin-bottom: 15px;
font-size:11px;
color: {color:Meta};
text-transform: uppercase;
border-bottom: 2px solid {color:Dividers};
}

.meta a{
color: {color:Meta};
}

.date{
margin-right: 20px;
}

.quote{
font-size: 18px;
font-family: 'Merriweather', serif;
letter-spacing: -1px;
line-height: 1.2em;
padding-bottom: 10px;
font-weight: 700;
}

blockquote{
margin-left: 20px;
padding-left: 15px;
border-left: 2px {color:Body Text} solid;
}

.chat{
list-style: none;
padding: 0;
}

.notes{
list-style: none;
padding: 10px 0 50px 0;
margin: 0;
line-height: 1.9em;
}

.notes .avatar{
margin: 0 5px 0 0;
position: relative;
top: 4px;
}

.notes blockquote{
margin: 10px 0 0 35px;
padding-left: 10px;
border-left: 2px solid {color:Body Text};
}

.asker-avatar{
margin: 0 0 -3px;
}

.media{
margin-bottom: 10px;
}

.media img{
width: 80%;
}

.pagination{
text-align: center;
font-family: 'Montserrat', 'Helvetica Neue', "Arial", sans-serif;
margin-top: 40px;
}

.pagination ul{
list-style: none;
padding: 0 15px;
}

.pagination li{
margin: 0 25px 0 25px;
display: inline;
}

.header a:hover{
text-decoration: none;
}

.datenotes {
float: left;
}

.like-button {
display: inline-block;
float: right;
margin: -3px 2px 0 10px;
}

.reblog-button {
display: inline-block;
float: right;
margin: -3px 0 0 0;
}

{CustomCSS}
</style>

</head>

<body>

<div class="wrapper">

<div class="header">

<div class="logotitle">
{block:IfLogoImage}
<div class="logo">
<a href=">
<img src="{image:Logo}" alt="{Title}">
</a>
</div>
{/block:IfLogoImage}

{block:IfnotLogoImage}
<div class="title">
<a href="/">{Title}</a>
</div>
{/block:IfnotLogoImage}
</div>

{block:Description}<div class="description">{Description}</div>{/block:Description}

<div class="nav">
<li><a href="/archive"><span style="color:#dc6e53">archive</span></a></li>
{block:AskEnabled}<li><a href="/ask"><span style="color:#f3a343">ask</span></a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">submit</a></li>{/block:SubmissionsEnabled}
{block:HasPages}
{block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
{/block:HasPages}

</div>

</div>

{block:Posts}

<div class="posts">
{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Audio}
{block:AlbumArt}
<img src="{AlbumArtURL}" height="207" width="207" />
{/block:AlbumArt}
<div>{AudioPlayerGrey}</div>
<div>{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Video}

{block:Answer}
<h2><img class="asker-avatar" src="{AskerPortraitURL-96}" width="18" height="18"><span style="color:{color:Links}"> {Asker}</span> said:</h2><h2>{Question}</h2></br>
<div>{Answer}</div>
{/block:Answer}

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<h2><a href="{URL}" {target}>{Name}</a></h2>
{block:Description}<div>{Description}</div>{/block:Description}
{/block:Link}

{block:Quote}
<div class="quote">{Quote}</div>
{block:Source}<p>- {Source}</p>{/block:Source}
{/block:Quote}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
<ul class="chat">
{block:Lines}
<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
</div>

<div class="meta">
<div class="datenotes">
{block:Date}<span class="date"><a href="{Permalink}">{DayOfMOnth} {ShortMonth} {Year}</a></span>{/block:Date}
{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>

<div class="like-button">{LikeButton color="grey" size="15"}</div>
<div class="reblog-button">{ReblogButton color="grey" size="15"}</div>
</div>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{/block:Posts}

{block:Pagination}
<div class="pagination">
<ul class="clearfix">
{block:JumpPagination length="5"}
{block:CurrentPage}<li><a href="{URL}" hidden="true" class="active">{PageNumber}</a></li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
</ul>
</div>
{/block:Pagination}

</div>

</body>
</html>

09 déc. 2015, 10:39

Bonjour,

A ma connaissance, la seule façon de faire cela ce n'est pas en modifiant le code HTML mais d'aller dans les options de ton thème, section Avancé et tu devrais trouver une option "Ouvrir les liens dans une nouvelle fenêtre"

09 déc. 2015, 17:25

Oui j'ai déjà coché cette case mais cela ne fonctionne pas... En fait j'aimerai avoir cette option car certaines de mes images ne s'affiche pas en plein écran lorsque l'on clique dessus, la seule façon est de faire clic droit et ouvrir dans un nouvel onglet, d'où ma question pour modifier le code html...

09 déc. 2015, 21:01

Salut,
Tout d'abord, lorsque tu postes un message avec du code, n'oublie pas les balises faites pour, ça nous fera moins mal aux yeux !
Ensuite, je ne connais pas tumblr (désolé :/) mais après une rapide lecture du code que tu nous a donné, je repère une petite erreur :

Code : Tout sélectionner

<a href=">
<img src="{image:Logo}" alt="{Title}">
</a>

Lorsque l'on ouvre des guillemets, on les ferme !

Après, pour l'ouverture dans une nouvelle fenêtre, oui il faut bien utiliser l'attribut target="_blank", et ce dans ta balise <a>. Maintenant suffit juste de savoir laquelle

Lorsque tu parles de "certaines images", de quelles images parles-tu ? (message, rubrique, ...)

09 déc. 2015, 23:57

Salut je ne savais pas pour les balises j'ai copié/collé le code tel qu'il est, je n'en suis pas l'auteur malheureusement je ne sais pas programmer mais je commence à apprendre les bases, plus par curiosité que par réelle nécessité pour le moment.

Je souhaite que toutes les images s'ouvrent dans un nouvel onglet lorsque l'on clique dessus, donc je suppose qu'il doit y avoir une ligne dans le code pour toutes les images du blog, je te donne le lien de mon blog pour mieux comprendre :

http://frederic-henry.tumblr.com/

10 déc. 2015, 00:56

c'est dans {block:Photo} que cela se passe, et donc ce n'est pas dans ce fichier que la modification doit être faite, si elle est possible.

ouvrir dans nouvel onglet Tumblr

Qui est en ligne