Como Crear Plantilla HTML para Tumblr

Creating a custom HTML theme | Tumblr
Buscar
en Tumblr
Cmo crear un tema

HTML personalizado
Mensajes
Contenidos
Introduccin
Consejos avanzados
Empezar
Quieres
crear un diseo personalizado para tu blog? Si se te da bien
programar en HTML, ests en el lugar adecuado. De lo contrario,
puedes elegir entre cientos de temas a cual ms espectaculares en
el
Jardn de temas.
Variables bsicas
Apariencia general
Navegacin
Publicaciones
Introduccin
Tumblr
funciona en torno a siete tipos de publicacin: textos, fotos,
enlaces, citas, chats, audios y vdeos. No olvides personalizar tu tema
tenindolas todas en cuenta. De esa forma, se mostrarn
perfectamente en el blog, en los Escritorios de tus seguidores y en los
espacios de todas las personas que las reblogueen.
Ms informacin
Consejos avanzados
Reblogueos
Textos
Fotos
Panormicas
Sets de fotos
Citas
Enlaces
Chats
Audios
Vdeos
Respuestas
Fechas
Notas
Etiquetas
Fuentes del contenido
Colaboraciones
Blog en grupo
Pginas de das
Intenta
evitar las imgenes externas y los elementos insertados en las
publicaciones de texto. No se integran del todo bien en el Escritorio y
pueden generar conflictos con los temas personalizados. Es mejor que
crees publicaciones de vdeo si quieres subir uno, por ejemplo. Cada
tipo de publicacin tiene su propsito.
Pginas de etiquetas
Localizacin
Buscar
Siguiendo
Me gusta
Botones Me gusta y
Empezar
1. Haz clic sobre el nombre de tu blog en la parte superior del
Escritorio o en el icono de la lista.
Reblogueo
Publicaciones relacionadas
Opciones del tema
Twitter
Temas para iPhone
2. Selecciona Personalizar en la columna derecha.

3. Haz clic en Editar HTML debajo de la miniatura del tema, a la
izquierda.
Tumblr utiliza dos tipos de operadores especiales para mostrar el
contenido de tu HTML.
Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]
Transformacin de variables
Las variables se utilizan para insertar datos dinmicos, como el ttulo o

la descripcin de tu blog:
Ejemplo
<html>
<head>
<title>{Title}</title>
</head>
<body>
...
</body>
</html>
Las etiquetas block se utilizan para mostrar un bloque de cdigo HTML

para un conjunto de datos determinado, como tus publicaciones, o bien
para que un bloque de cdigo HTML aparezca de manera condicional,
como el enlace Pgina anterior:
<html>
<body>
<ol id="posts">{block:Posts}
<li> ... </li>{/block:Posts}
</ol>
</body>
</html>
Aqu tienes un ejemplo del marcado completo de un tema:

<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml"
href="{RSS}">
{block:Description}
<meta name="description"
content="{MetaDescription}" />
{/block:Description}
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
<ol id="posts">
{block:Posts}{block:Text}
<li class="post text">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}{Body}
</li>
{/block:Text}{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}"
alt="{PhotoAlt}"/>

{block:Caption}
<div
class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}{block:Panorama}
<li class="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}"
alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}
<div
{/block:Caption}
</li>
{/block:Panorama}{block:Photoset}
<li class="post photoset">
{Photoset-500}{block:Caption}
<div
{/block:Caption}
</li>
{/block:Photoset}{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}{block:Link}
<li class="post link">
<a href="{URL}" class="link"
{Target}>{Name}</a>
{block:Description}
<div
class="description">{Description}</div>
</li>
{/block:Link}{block:Chat}
<li class="post chat">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}
user_{UserNumber}">
{block:Label}
<span
class="label">{Label}</span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}{block:Video}
<li class="post video">
{Video-500}{block:Caption}
<div
{/block:Caption}

</li>
{/block:Video}{block:Audio}
<li class="post audio">
{AudioEmbed}{block:Caption}
<div
{/block:Caption}
</li>
{/block:Audio}{/block:Posts}
</ol>
<p id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</p>
</body>
</html>
Variables bsicas
Variable
Descripcin
{Title}
El ttulo sin cdigo HTML de tu blog.
{Description}
La descripcin de tu blog. Puede contener cdigo

HTML.
{MetaDescription}
La descripcin sin cdigo HTML de tu blog.

e.g., <meta name="description" content="{MetaDescription}" />
{BlogURL}
URL de tu blog.
{RSS}
URL del feed RSS de tu blog.
{Favicon}
URL del icono de favoritos de tu blog.
{CustomCSS}
Cualquier cdigo CSS personalizado que aadas a tu

pgina Personalizar.
{block:PermalinkPage}
{/block:PermalinkPage}
Aparece en la pgina del enlace permanente de una

publicacin.
Muy til para insertar widgets de comentarios.
{block:IndexPage}
{/block:IndexPage}
Aparece en pginas (de publicacin) de ndice.
{block:PostTitle}
{PostTitle}
{/block:PostTitle}
Aparece en pginas de los enlaces permanentes. Es

til para mostrar el ttulo actual de una publicacin en la
pgina del ttulo.
Ejemplo: <title>{Title}{block:PostTitle} - {PostTitle}
{/block:PostTitle}</title>
{block:PostSummary}
{PostSummary}
{/block:PostSummary}
Idntica a {PostTitle}, pero genera un resumen

automticamente si no hay ttulo.
{PortraitURL-16}
URL del avatar de tu blog. 16-pxeles por 16-pxeles.

{PortraitURL-24}
{PortraitURL-30}
{PortraitURL-40}
{PortraitURL-48}
{PortraitURL-64}
{PortraitURL-96}
{PortraitURL-128}
{CopyrightYears}
Muestra los aos de antigedad de tu blog.
Apariencia general
Estas
etiquetas de la plantilla definen los colores, las fuentes y otras
opciones personalizadas que tengan relacin con la apariencia de tu
blog en los dispositivos mviles y el tema predeterminado.
Variable
Descripcin
{TitleFont}
La fuente utilizada en el ttulo de tu blog.
{TitleFontWeight}
El grosor de la fuente del ttulo ("normal" o

"negrita").
{BackgroundColor}
El color de fondo de tu blog.
{TitleColor}
El color del ttulo de tu blog.
{AccentColor}
El color de los elementos de contraste de tu blog.
{HeaderImage}
La URL de tu imagen de cabecera en todo su

esplendor. Siempre tendr un valor, aunque sea la
imagen de cabecera predeterminada.
{AvatarShape}
La forma en la que se muestra tu avatar (circular o

cuadrada)..
{block:ShowTitle}
{/block:ShowTitle}
Aparece si tienes activada la opcin "Mostrar ttulo".
{block:HideTitle}
{/block:HideTitle}
Aparece si tienes desactivada la opcin "Mostrar

ttulo".
{block:ShowDescription}
{/block:ShowDescription}
Aparece si tienes activada la opcin "Mostrar

descripcin".
{block:HideDescription}
{/block:HideDescription}

descripcin".
{block:ShowAvatar}
{/block:ShowAvatar}

avatar".
{block:HideAvatar}
{/block:HideAvatar}

avatar".
{block:ShowHeaderImage}
{/block:ShowHeaderImage}

imagen de cabecera".
{block:HideHeaderImage}

{/block:HideHeaderImage}
imagen de cabecera".
Navegacin
Variable
Descripcin
{block:Pagination}
{/block:Pagination}
Aparece si hay una pgina "anterior" o

"siguiente".
{block:PreviousPage}
{/block:PreviousPage}
Aparece si hay una pgina "anterior"

(publicaciones ms recientes) a la que
acceder.
{block:NextPage}
{/block:NextPage}
Aparece si hay una pgina "siguiente"

(publicaciones ms antiguas) a la que acceder.
{PreviousPage}
URL para la pgina "anterior" (publicaciones

ms recientes).
{NextPage}
URL para la pgina "siguiente" (publicaciones

ms antiguas).
{CurrentPage}
Nmero de pgina actual.
{TotalPages}
Nmero total de pginas.
{block:SubmissionsEnabled}
{/block:SubmissionsEnabled}
Aparece si la funcin para enviar

colaboraciones est activada.
{SubmitLabel}
La etiqueta personalizada para el enlace de

envo de colaboraciones.
Ejemplo: "Enviar"
{block:AskEnabled}
{/block:AskEnabled}
Aparece si tienes activada la funcin para

enviar preguntas.
{AskLabel}
Etiqueta personalizada del enlace para enviar

preguntas.
Ejemplo: "Hazme una pregunta"
Paginacin
Variable
Descripcin
{block:JumpPaginationlength="5"}
{/block:JumpPagination}
Muestra cada nmero de pgina anterior y

posterior a la pgina actual, que los divide
entre la mitad hacia abajo y la mitad hacia
arriba.
{block:CurrentPage}
{/block:CurrentPage}
Aparece cuando la marca de paginacin

corresponde a la pgina actual.
{block:JumpPage}
{/block:JumpPage}
Aparece cuando la marca de paginacin

no corresponde a la pgina actual.
{PageNumber}
Nmero de pgina del men de

paginacin.
{URL}
URL del nmero de pgina.
Ejemplo
<html>
<body>
...
{block:Pagination}{block:PreviousPage}
<a href="{PreviousPage}">Previous</a>
{/block:PreviousPage}{block:JumpPagination
length="5"}{block:CurrentPage}
<span
class="current_page">{PageNumber}</span>
{/block:CurrentPage}{block:JumpPage}
<a class="jump_page"
href="{URL}">{PageNumber}</a>
{/block:JumpPage}{/block:JumpPagination}{block:NextPage}
<a href="{NextPage}">Next</a>
{/block:NextPage}{/block:Pagination}
</body>
</html>
Pginas
Variable
Descripcin
{block:HasPages}
{/block:HasPages}
Aparece si has definido alguna pgina

personalizada.
{block:Pages} {/block:Pages}
Aparece en cada pgina personalizada.
{URL}
La URL de esta pgina.
{Label}
La etiqueta de esta pgina.
Navegacin mediante enlaces permanentes

Variable
Descripcin
{block:PermalinkPagination}
Aparece si hay una publicacin "anterior" o

"siguiente".
{block:PreviousPost}
{/block:PreviousPost}
Aparece si hay una publicacin "anterior" a la

que acceder.
{block:NextPost}
{/block:NextPost}
Aparece si hay una publicacin "siguiente" a

la que acceder.
{PreviousPost}
URL de la publicacin "anterior" (ms

reciente).
{NextPost}
URL de la publicacin "siguiente" (ms

antigua).
Ejemplo
{block:PermalinkPagination}
{block:PreviousPost}
<a href="{PreviousPost}">Previous Post</a>
{/block:PreviousPost}
{block:NextPost}
<a href="{NextPost}">Next Post</a>
{/block:NextPost}
{/block:PermalinkPagination}
Publicaciones
Variable
Descripcin
{block:Posts} {/block:Posts}
Este bloque aparece en cada publicacin en

orden cronolgico inverso. Se puede
configurar el nmero de publicaciones por
pgina en la seccin "Personalizar" de cada
blog, dentro de la pestaa "Opciones
avanzadas".
{block:Posts
inlineMediaWidth="500"}
{/block:Posts}
Ancho de los contenidos insertados en el

cuerpo de la publicacin.
{block:Posts
inlineNestedMediaWidth="250"}
{/block:Posts}
Ancho de los contenidos insertados en la

cadena de reblogueos.
{block:Text} {/block:Text}
Aparece en los textos.
{block:Photo} {/block:Photo}
Aparece en las fotos.
{block:Panorama}
{/block:Panorama}
Aparece en las panormicas.
{block:Photoset}
{/block:Photoset}
Aparece en los sets de fotos.
{block:Quote} {/block:Quote}
Aparece en las citas.
{block:Link} {/block:Link}
Aparece en los enlaces.
{block:Chat} {/block:Chat}
Aparece en las conversaciones.
{block:Audio} {/block:Audio}
Aparece en los audios.
{block:Video} {/block:Video}
Aparece en los vdeos.
{block:Answer}
{/block:Answer}
Aparece en las respuestas.
{PostType}
El nombre del tipo de publicacin.
{Permalink}
El enlace permanente de una publicacin.
Mnimo: 250 px
Mnimo: 250 px (debe ser menor o igual que

inlineMediaWidth)
Ejemplo: "http://sample.tumblr.com/post/123"
{ShortURL}
Una direccin URL ms corta que redirige a

esta publicacin.
Ejemplo: "http://tumblr.com/xpv5qtavm"
{EmbedUrl}
URL de la pgina en la que los usuarios

pueden copiar el cdigo de insercin de la
publicacin.
Ejemplo: "http://sample.tumblr.com/post/123/embed"

{PostID}
El identificador numrico de una publicacin.

Ejemplo: 1234567
{TagsAsClasses}
Una lista de las etiquetas de la publicacin

compatible con atributos de clase de cdigo
HTML.
Ejemplo: "humor office new_york_city"
Por "compatible con atributos de clase de

cdigo HTML" nos referimos a que se adapta
a los requisitos del cdigo HTML para los
atributos de clase. Generalmente, debe
empezar por una letra, seguido de letras,
dgitos, guiones o guiones bajos. Las letras
deben pertenecer al alfabeto ingls, puesto
que los caracteres propios de otros alfabetos
podran dar resultados inesperados.
Para las publicaciones importadas de otros

sitios web, se incluir una versin del
dominio de origen compatible con HTML
que sustituir las barras bajas por puntos.
Ejemplo: "twitter_com", "digg_com", etc.
El atributo de clase "reblogueo" se aadir

automticamente si la publicacin ha sido
reblogueada desde otra publicacin.
{block:Post[1-15]}
{/block:Post[1-15]}
Aparece en la publicacin especificada en la

variable. Esto permite aadir un elemento
publicitario o de diseo entre tus
publicaciones.
Ejemplo: {block:Post5}Hola, soy la quinta
publicacin!{/block:Post5} aparecer nicamente
cuando se muestre la publicacin nmero cinco.
{block:Odd} {/block:Odd}
Aparece en cada una de las publicaciones con

nmero impar de la pgina actual.
{block:Even} {/block:Even}
Aparece en cada una de las publicaciones con

nmero par de la pgina actual.
{block:More} {/block:More}
Aparece en pginas de ndice para

publicaciones divididas por el apartado "Leer
ms".
{PostNotesURL}
URL que enlace a un HTML parcial de las

notas de la publicacin. til a la hora de cargar
notas a travs de AJAX.
Reblogueos
Variable
Descripcin
{block:RebloggedFrom}
{/block:RebloggedFrom}
Aparece si una publicacin se ha reblogueado de

otra.
{ReblogParentName}
El nombre de usuario del blog desde el que se ha

reblogueado esta publicacin.

{ReblogParentTitle}
El ttulo del blog desde el que se ha reblogueado

esta publicacin.
{ReblogParentURL}
La URL del blog desde el que se ha reblogueado

esta publicacin.
{ReblogParentPortraitURL16}
URL del avatar del blog desde el que se reblogue

esta publicacin. 16 pxeles por 16 pxeles.







{ReblogRootName}
El nombre de usuario del blog desde el que se ha

creado esta publicacin.
{ReblogRootTitle}
El ttulo del blog desde el que se ha creado esta

publicacin.
{ReblogRootURL}
La URL del blog desde el que se cre la

publicacin.
{ReblogRootPortraitURL16}
URL del avatar del blog que ha creado esta

publicacin. 16 pxeles por 16 pxeles.







{block:NotReblog}
{/block:NotReblog}
Aparece si una publicacin no se ha reblogueado

de otra.
Textos
Variable
Descripcin
{block:Title} {/block:Title}
Aparece si hay un ttulo para la publicacin.
{Title}
El ttulo de la publicacin.
{Body}
El contenido de la publicacin.
Fotos
Variable
Descripcin
{PhotoAlt}
La versin sin HTML de la descripcin (si existe) de la

publicacin.
{block:Caption}
{/block:Caption}
Aparece si hay una descripcin para la publicacin.
{Caption}
La descripcin de esta publicacin.
{block:LinkURL}
Aparece si la imagen abre un set de fotos al hacer clic.
{LinkURL}
URL del enlace de redireccin de esta foto.

Si no se asigna ninguna, se establecer un enlace permanente
predeterminado.
{LinkOpenTag}
Un ancla de apertura que incluye la URL de redireccin si

est establecida.
Ejemplo: <a href="http://...">
{LinkCloseTag}
Un ancla de cierre que se genera solo si hay una URL de

redireccin establecida.
Ejemplo: </a>
{PhotoURL-500}
URL de la foto de esta publicacin. No puede medir ms

de 500 pxeles de ancho.
{PhotoWidth-500}
Ancho para la imagen de 500 pxeles.
{PhotoHeight-500}
Alto de la imagen de 500 pxeles.
{PhotoURL-400}

{PhotoWidth-400}
{PhotoHeight-400}
{PhotoURL-250}

{PhotoWidth-250}
{PhotoHeight-250}
{PhotoURL-100}

{PhotoWidth-100}
{PhotoHeight-100}

{PhotoURL-75sq}
URL de la versin cuadrada de la foto de esta publicacin.

75 pxeles por 75 pxeles.
{block:HighRes}
{/block:HighRes}
Aparece si hay una imagen de alta resolucin o una

panormica para una publicacin.
{PhotoURLHighRes}
URL de la foto en alta resolucin o panormica de esta

publicacin. No puede medir ms de 1280 o 2560 pxeles
de ancho respectivamente.
Para hacer referencia directa a imgenes de 1280, utiliza
{PhotoURL-1280}, {PhotoWidth-1280} y {PhotoHeight-1280}.
{PhotoWidthHighRes}
Ancho para la imagen de alta resolucin.
{PhotoHeightHighRes}
Alto de la imagen de alta resolucin.
{block:Exif}
{/block:Exif}
Aparece si la imagen contiene datos EXIF.
{block:Camera}
{Camera}
{/block:Camera}
Aparece si los datos Exif de esta foto contienen

informacin de la cmara.
{block:Aperture}
{Aperture}
{/block:Aperture}

informacin sobre la apertura.
{block:Exposure}
{Exposure}
{/block:Exposure}

informacin sobre la exposicin.
{block:FocalLength}
{FocalLength}
{/block:FocalLength}

informacin sobre la distancia focal.
Ejemplo
{Block:Photo}{LinkOpenTag}
alt="{PhotoAlt}"/>{LinkCloseTag}{block:HighRes}
<a href="{PhotoURL-HighRes}">Ver en alta
resolucin</a>{/block:HighRes}{block:Exif}
<ul>{block:Camera}
<li>Cmara:
{Camera}</li>{/block:Camera}{block:Aperture}
<li>Apertura:
{Aperture}</li>{/block:Aperture}{block:Exposure}
<li>Exposicin:
{Exposure}</li>{/block:Exposure}{block:FocalLength}
<li>Distancia focal:
{FocalLength}</li>{/block:FocalLength}
</ul>{/block:Exif}{block:Caption}{Caption}{/block:Caption}{/Block
Panormicas
Las etiquetas de la plantilla definidas para {block:Photo} tambin estn
disponibles para {block:Panorama} , adems de las siguientes:

Variable
Descripcin
{LinkOpenTag}
Un ancla de apertura que contiene Javascript para activar la

visualizacin de las panormicas mediante un cuadro
emergente.
{LinkCloseTag}
Un ancla de cierre.
{PhotoURLPanorama}
URL de la foto panormica de la publicacin.
{PhotoWidthPanorama}
Ancho de la foto panormica.
{PhotoHeightPanorama}
Alto de la imagen panormica.
El tamao de estas imgenes puede ser muy grande (ms de 2560

pxeles de ancho).
Ejemplo
{block:Panorama}
{LinkOpenTag}<img src="{PhotoURL-Panorama}"
alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Panorama}
Sets de fotos
Variable
Descripcin
{block:Caption}
{/block:Caption}
{Caption}
{Photoset}
Cdigo de insercin de un set de fotos inteligente que se

adapta al espacio disponible (mximo 700 pxeles de
ancho).
{Photoset-700}
Cdigo de insercin de un set de fotos de 700 pxeles de

ancho.
{Photoset-500}

ancho.
{Photoset-400}

ancho.
{Photoset-250}

ancho.
{PhotoCount}
El nmero de imgenes del set de fotos.
{PhotosetLayout}
Una representacin integral de la disposicin del set de

fotos.
{JSPhotosetLayout}
Matriz JavaScript del nmero de columnas del set de fotos.

{block:Photos}
{/block:Photos}
Aparece en cada una de las fotos del set, que contienen

las mismas variables que {block:Photo}.
Ejemplo
{block:Photoset}
{block:Photos}
width="{PhotoWidth-500}"height="{PhotoHeight-500}"
/>
{block:Caption}
{Caption}
{/block:Caption}
{block:Exif}
<ul>...</ul>
{/block:Exif}
{/block:Photos}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
Citas
Variable
Descripcin
{Quote}
El contenido de la publicacin.
{block:Source}
{/block:Source}
Aparece si hay una fuente para esta publicacin.
{Source}
La fuente de esta publicacin.

Puede contener HTML
{Length}
"corta", "media" o "larga", dependiendo de la longitud

de la cita.
Enlaces
Variable
Descripcin
{URL}
La URL de esta publicacin.
{Name}
El nombre de esta publicacin. Si no se asigna ninguno, se

aadir por defecto la URL.
{Target}
Debe incluirse en las anclas de las publicaciones de

enlace.Aade target="_blank" si has activado la opcin "Abrir
los enlaces en otra ventana".
{block:Host}
{/block:Host}
Aparece si esta publicacin tiene alojamiento (adems de

URL y nombre).
{Host}
El nombre del alojamiento de la URL, sin "www". Por

ejemplo, tumblr.com.
{block:Thumbnail}
Aparece si hay una imagen de miniatura para la

{/block:Thumbnail}
publicacin.
{Thumbnail}
URL de la imagen en miniatura del enlace.
{ThumbnailHighRes}
URL de enlace a la imagen en miniatura en alta resolucin.
{block:Description}
Aparece si hay una descripcin para esta publicacin.
{Description}
La descripcin de la publicacin.
{block:Author}
{/block:Author}
Aparece si la publicacin incluye un autor.
{Author}
El nombre del autor al que enlaza.
{block:Excerpt}
{/block:Excerpt}
Aparece si la publicacin incluye una cita.
{Excerpt}
La cita de la publicacin.
Chats
Variable
Descripcin
{block:Title}
{/block:Title}
Aparece si hay un ttulo para la publicacin.
{Title}
El ttulo de la publicacin.
{block:Lines}
{/block:Lines}
Aparece para cada lnea de esta publicacin.
{block:Label}
{/block:Label}
Aparece si se ha extrado una etiqueta de la lnea actual de

esta publicacin.
{Label}
La etiqueta (en caso de haber extrado una) de la lnea actual

de la publicacin.
{Name}
El nombre de usuario (en caso de haber extrado uno) de la

lnea actual de la publicacin.
{Line}
La lnea actual de la publicacin.
{UserNumber}
Un nmero entero nico que represente al usuario de la lnea

actual de esta publicacin.
{Alt}
"par" o "impar" para cada lnea de esta publicacin.
Audios
Variable
Descripcin
{block:Caption}
{/block:Caption}
{Caption}
{block:AudioEmbed}
{/block:AudioEmbed}
Aparece si hay un reproductor de audio integrado

disponible.
{AudioEmbed}
Cdigo de insercin del contenido de esta publicacin.

Establece 500 pxeles de ancho de forma
predeterminada.
{AudioEmbed-250}

250 pxeles de ancho.
{AudioEmbed-400}

{AudioEmbed-500}

{AudioEmbed-640}

{block:AudioPlayer}
{/block:AudioPlayer}
Aparece si hay un reproductor de audio nativo

disponible.
{AudioPlayer}
Reproductor de audio predeterminado.
{RawAudioURL}
URL del archivo de esta publicacin de audio.

Solo en temas para iPhone.
{block:PlayCount}
{/block:PlayCount}
Aparece si hay un contador de reproducciones para el

audio.
{PlayCount}
Nmero de veces que se ha reproducido esta

publicacin.
{FormattedPlayCount}

publicacin, incluyendo formato con comillas.
p. ej. "12309"
{PlayCountWithLabel}

publicacin, incluyendo formato con comillas y etiqueta
de plural.
p. ej. "12309 reproducciones"
{block:ExternalAudio}
{/block:ExternalAudio}
Aparece si la publicacin incluye un MP3 alojado en un

enlace externo.
til a la hora de aadir un enlace de descarga.
{ExternalAudioURL}
La URL del MP3, en caso de que la publicacin incluya

un archivo de este tipo alojado de forma externa.
{block:AlbumArt}
{AlbumArtURL}
{/block:AlbumArt}
Aparece si la especificacin de ID3 de este archivo de

audio contiene una portada de lbum.
{block:Artist}
{Artist}
{/block:Artist}

audio contiene el nombre del artista.
{block:Album}
{Album}
{/block:Album}

audio contiene el ttulo del lbum.
{block:TrackName}
{TrackName}
{/block:TrackName}

audio contiene el nombre de la pista.
Vdeos

Variable
Descripcin
{block:Caption}
{/block:Caption}
{Caption}
{Video-700}
Cdigo de insercin del contenido de esta

publicacin. 700 pxeles de ancho.
{Video-500}

{Video-400}

{Video-250}

{VideoEmbed-700}
Cumple la misma funcin que {Video-700}, pero

elimina el efecto de cuadro emergente de un vdeo
subido directamente a la plataforma. 700 pxeles de
ancho.
{VideoEmbed-500}

ancho.
{VideoEmbed-400}

ancho.
{VideoEmbed-250}

ancho.
{PlayCount}

publicacin.
{FormattedPlayCount}

publicacin, incluyendo formato con comillas.
p. ej. "12309"
{PlayCountWithLabel}

publicacin, incluyendo formato con comillas y
etiqueta de plural.
p. ej. "12309 reproducciones"
{block:VideoThumbnail}
{VideoThumbnailURL}
{/block:VideoThumbnail}
Aparece si hay una imagen en miniatura del vdeo

disponible.
{block:VideoThumbnails}
{VideoThumbnailURL}
Aparece para cada imagen en miniatura de un vdeo

cuando hay varias.
{/block:VideoThumbnails}
Respuestas
Variable
Descripcin

{Question}
La pregunta de esta publicacin.

Puede contener HTML filtrado
{Answer}
La respuesta de esta publicacin.

Puede contener HTML
{Asker}
Enlace de texto HTML simple con el nombre del usuario

que enva la pregunta y su URL, o la cadena de texto
plano "Annimo".
{AskerPortraitURL-16}
URL del avatar del usuario que enva la pregunta. 16

pxeles por 16 pxeles.






{AskerPortraitURL128}

{block:Answerer}
{/block:Answerer}
Aparece cuando la publicacin contiene una respuesta

reblogueada.
{Answerer}
Enlace de texto HTML simple con el nombre del usuario

reblogueado que ha contestado a la pregunta y su URL.
Solo aparece en {block:Answerer}{/block:Answerer} o si una
publicacin ha sido reblogueada.
{AnswererPortraitURL16}
URL del avatar del usuario reblogueado que ha

contestado a la pregunta. 16 pxeles por 16 pxeles.
publicacin ha sido reblogueada.')







{Replies}
Cadena de reblogueos. Si no se trata de un reblogueo,

{Replies} sirve para sustituir a {Answer}.
Ejemplo
{block:Answer}
<div class="question"><div class="asker">{Asker}</div><div
class="asker-question">{Question}</div><img class="askeravatar" src="{AskerPortraitURL-96}" alt=""></div>
{block:Answerer}
<div class="answer"><div
class="answerer">{Answerer}</div><div class="answereranswer">{Answer}</div><img class="answerer-avatar"
src="{AnswererPortraitURL-96}" alt=""></div>
{/block:Answerer}
<div class="replies">
{Replies}
</div>
{/block:Answer}
Fechas
Variable
Descripcin
{block:Date}
{/block:Date}
Aparece en todas las publicaciones.
{block:NewDayDate}
{/block:NewDayDate}
Aparece en las primeras publicaciones de un da

concreto.
{block:SameDayDate}
{/block:SameDayDate}
Aparece en las siguientes publicaciones de un da

concreto.
{DayOfMonth}
Del "1" al "31"
{DayOfMonthWithZero}
Del "01" al "31"
{DayOfWeek}
De "Lunes" a "Domingo"
{ShortDayOfWeek}
De "Lun" a "Dom"
{DayOfWeekNumber}
Del "1" al "7"
Incluye las fechas entre estas etiquetas de bloque para

que no aparezcan en las pginas que no pertenecen a
publicaciones.

{DayOfMonthSuffix}
"st", "nd", "rd", "th"
{DayOfYear}
Del "1" al "365"
{WeekOfYear}
Del "1" al "52"
{Month}
De "Enero" a "Diciembre"
{ShortMonth}
De "Ene" a "Dic"
{MonthNumber}
Del "1" al "12"
{MonthNumberWithZero}
Del "01" al "12"
{Year}
"2007"
{ShortYear}
"07"
{AmPm}
"am" o "pm"
{CapitalAmPm}
"AM" o "PM"
{12Hour}
Del "1" al "12"
{24Hour}
Del "0" al "23"
{12HourWithZero}
Del "01" al "12"
{24HourWithZero}
Del "00" al "23"
{Minutes}
Del "0" al "59"
{Seconds}
Del "0" al "59"
{Beats}
Del "0" al "999"
{Timestamp}
"1172705619"
{TimeAgo}
Fecha contextual.
p. ej. "hace 1 minuto", "hace 2 horas", "hace 3 semanas",
etc.
Notas
Variable
Descripcin
{block:PostNotes}
{/block:PostNotes}
Aparece en las pginas de los enlaces permanentes si la

publicacin tiene notas.
{PostNotes}
Resultado en HTML estndar de las notas de la

publicacin. Solo aparece en las pginas de los enlaces
permanentes.
{PostNotes-16}

publicacin con avatares de 16 x 16 pxeles. Solo
aparece en las pginas de los enlaces permanentes.
{PostNotes-64}

publicacin con avatares de 64 x 64 pxeles. Solo
aparece en las pginas de los enlaces permanentes.
{block:NoteCount}
{/block:NoteCount}
Aparece si una publicacin tiene notas.

Incluye el contador de notas entre estas etiquetas de bloque
para que no aparezca en las pginas que no pertenecen a
publicaciones.

{NoteCount}
El nmero de notas de la publicacin.
{NoteCountWithLabel}
El nmero de notas de la publicacin con la

correspondiente etiqueta de plural.
p. ej. "24 notas"
Ejemplo
<html>
<head>
<style type="text/css">
ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}
ol.notes li.note {
border-top: solid 1px #ccc;
padding: 10px;
}
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}
ol.notes li.note span.action {
font-weight: bold;
}
ol.notes li.note .answer_content {
font-weight: normal;
}
ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}
ol.notes li.note blockquote a {
text-decoration: none;
}
</style>
</head>
<body>
{block:Posts}
...
{PostNotes}{/block:Posts}
</body>
</html>
Las notas estn paginadas mediante AJAX. Si

tu tema necesita
manipular el marcado de las notas o los nodos del Modelo de Objetos
del Documento, puedes aadir una funcin
de devolucin de llamada
que se active al cargar o insertar una pgina de notas nueva:

Variable
Descripcin
tumblrNotesLoaded(notes_html)
Si esta funcin de Javascript est definida, se

activar despus de que se cargue una
pgina de notas nueva, lista para ser
insertada. Si la funcin devuelve el cdigo
false, no permitir que las notas aparezcan
insertadas.
tumblrNotesInserted()
Si esta funcin de Javascript est definida, se

activar tras insertar una pgina de notas
nueva en el Modelo de Objetos del
Documento.
Etiquetas
Variable
Descripcin
{block:HasTags}
{/block:HasTags}
Aparece dentro de {block:Posts} en las publicaciones con

etiquetas.
{block:Tags}
{/block:Tags}
Aparece por cada una de las etiquetas de un blog.
{Tag}
El nombre de esta etiqueta.
{URLSafeTag}
Una versin de la etiqueta compatible con el formato de las

URLs.
{TagURL}
La URL de la pgina de una etiqueta con otras publicaciones

que la incluyen.
{TagURLChrono}

que la incluyen mostradas en orden cronolgico.
Ejemplo
<html>
<body>
{block:Posts}
<div class="post">
{block:Text}...{/block:Text}{block:Photo}...{/block:Photo}
...
{block:HasTags}
<ul class="tags">
{block:Tags}
<li>
<a href="{TagURL}">{Tag}</a>
</li>
{/block:Tags}
</ul>
{/block:HasTags}
</div>
{/block:Posts}
</body>
</html>
Fuentes del contenido

Variable
Descripcin
{block:ContentSource}
{/block:ContentSource}
Aparece si se ha especificado la fuente del

contenido de una publicacin.
{SourceURL}
URL de la fuente atribuida.
{block:SourceLogo}
{/block:SourceLogo}
Aparece si la fuente del contenido tiene un logo.
{BlackLogoURL}
URL del logo de la fuente del contenido.
{LogoWidth}
Anchura del logo de la fuente del contenido.
{LogoHeight}
Altura del logo de la fuente.
{SourceTitle}
Ttulo de la fuente del contenido.
{block:NoSourceLogo}
{/block:NoSourceLogo}
Aparece si la fuente del contenido no tiene logo.
Ejemplo
{block:ContentSource}
<a href="{SourceURL}">{lang:Source}:
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}"
height="{LogoHeight}" alt="{SourceTitle}"
/>{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSo
</a>{/block:ContentSource}
Colaboraciones
Variable
Descripcin
{block:Submission}
{/block:Submission}
Aparece si la publicacin es una colaboracin.
{Submitter}
El nombre del blog desde el que se ha enviado.
{SubmitterURL}
URL del blog de la persona que envi la publicacin.
{SubmitterPortraitURL16}
URL de la foto de perfil del usuario que ha enviado la

colaboracin. 16 pxeles por 16 pxeles.




{SubmitterPortraitURL-

64}


Blogs en grupo
Miembros del grupo
Variable
Descripcin
{block:GroupMembers}
{/block:GroupMembers}
Aparece en los blogs en grupo pblicos

adicionales.
{block:GroupMember}
{/block:GroupMember}
Aparece por cada miembro adicional de un

blog en grupo pblico.
{GroupMemberName}
El nombre de usuario del miembro en

cuestin.
{GroupMemberTitle}
El ttulo del blog del miembro en cuestin.
{GroupMemberURL}
La URL del blog del miembro en cuestin.
{GroupMemberPortraitURL-16}
URL de la foto de perfil del miembro. 16








Autores de la publicacin
Variable
Descripcin
{PostAuthorName}
El nombre de usuario del autor de una publicacin

enviada a un blog en grupo adicional.
{PostAuthorTitle}
El ttulo del blog del autor de una publicacin enviada

a un blog en grupo adicional.
{PostAuthorURL}
La URL del blog del autor de una publicacin enviada

a un blog en grupo adicional.
{PostAuthorPortraitURL16}
La URL de la foto de perfil del autor de una

publicacin enviada a un blog en grupo adicional. 16







Pginas de das
Los blogs de Tumblr pueden mostrar todas las publicaciones de un da
concreto si utilizas una URL como esta
http://david.tumblr.com/day/2007/04/29/ .
Al aadir este cdigo de marcado,
es posible incluir una paginacin para los das previos y siguientes que
dispongan de publicaciones.
Variable
Descripcin
{block:DayPage} {/block:DayPage}
Aparece en las pginas de das.
{block:DayPagination}
{/block:DayPagination}
Aparece si hay una pgina de das

"anterior" o "siguiente".
{block:PreviousDayPage}
{/block:PreviousDayPage}

"anterior" a la que acceder.
{block:NextDayPage}
{/block:NextDayPage}

"siguiente" a la que acceder.
{PreviousDayPage}
URL de la pgina de da "anterior".
{NextDayPage}
URL de la pgina de da "siguiente".
Ejemplo
<html>
<body>
<h1>{Title}</h1>
{block:DayPage}
<h2>{Month} {DayOfMonth}, {Year}</h2>
{/block:DayPage}
<ol id="posts">
{block:Posts}
...
{/block:Posts}
</ol>
<div id="footer">
{block:Pagination}{block:PreviousPage}
<a href="{PreviousPage}">«
Previous</a>
{/block:PreviousPage}{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}{/block:Pagination}{block:DayPagination}{block:P
<a href="{PreviousDayPage}">
« {ShortMonth} {DayOfMonth}
</a>
{/block:PreviousDayPage}{block:NextDayPage}
<a href="{NextDayPage}">
{ShortMonth} {DayOfMonth} »
</a>
{/block:NextDayPage}{/block:DayPagination}
</div>
</body>
</html>
Pginas de etiquetas
Variable
Descripcin
{block:TagPage}
{/block:TagPage}
Aparece en las pginas de etiquetas.
{Tag}
El nombre de esta etiqueta.
{URLSafeTag}
Una versin de la etiqueta compatible con el formato de las

URLs.
{TagURL}

que la incluyen.
{TagURLChrono}

que la incluyen mostradas en orden cronolgico.
Ejemplo
<html>

<body>
{block:TagPage}
<h2>Posts tagged "{Tag}"</h2>
{/block:TagPage}{block:Posts}
...
{/block:Posts}
</body>
</html>
Localizacin
Las
cadenas de texto localizadas de los temas permiten que se
muestren en cualquiera de los idiomas disponibles en Tumblr. Solo
tienes que sustituir las frases o palabras de tu tema por las variables
adecuadas. El texto completo se mostrar en el idioma seleccionado en
la configuracin del blog. Puedes consultar las cadenas de texto en
nuestro documento de ayuda sobre la localizacin de los temas
Bsquedas
Variable
Descripcin
{SearchQuery}
La bsqueda actual.
{URLSafeSearchQuery}
Una versin compatible con el formato de las URLs

de la bsqueda actual para utilizarla en enlaces y
Javascript.
{block:SearchPage}
Aparece en las pginas de bsqueda.
{SearchResultCount}
El nmero de resultados que ha devuelto la bsqueda

actual.
{block:NoSearchResults}
Aparece si la bsqueda actual no ha devuelto ningn

resultado.
Ejemplo
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
Siguiendo
Variable
Descripcin
{block:Following}
{/block:Following}
Aparece si ests siguiendo otros blogs.
{block:Followed}
{/block:Followed}
Aparece en cada blog que ests siguiendo.
{FollowedName}
El nombre de usuario del blog que ests siguiendo.

{FollowedTitle}
El ttulo del blog que ests siguiendo.
{FollowedURL}
La direccin del blog que ests siguiendo.
{FollowedPortraitURL16}
URL de la foto de perfil del blog que ests siguiendo.








Ejemplo
{block:Following}
Blogs I follow:
<ul>{block:Followed}
<li>
<img src="{FollowedPortraitURL-48}"/>
<a href="{FollowedURL}">{FollowedName}</a>
</li>{/block:Followed}
</ul>{/block:Following}
Me gusta
Variable
Descripcin
{block:Likes}
{/block:Likes}
Aparece si tienes activada la opcin para compartir tus "Me

gusta".
{Likes}
Resultado en HTML estndar de tus "Me gusta".
{Likes limit="5"}
Resultado en HTML estndar de tus ltimos 5 "Me gusta".

Mximo: 10
{Likes
width="200"}
Resultado en HTML estndar de tus "Me gusta" con

reproductores de audio y vdeo cuya anchura se haya
modificado a 200 pxeles.
Adapta el tamao de las imgenes a la anchura establecida o a la
mxima permitida por el CSS.
{Likes
summarize="100"}
Resultado en HTML estndar de tus "Me gusta" con el texto

resumido en 100 caracteres.
Mximo: 250
Ejemplo
<html>
<head>
ul#likes {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
li.like_post {
/* Should match the width specified in the
Likes tag */
width: 150px;
padding: 0 40px 0 0;
float: left;
}
li.like_post img {
max-width: 100%;
}
li.like_post blockquote {
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #eee;
}
li.like_post ol,
li.like_post ul {
margin: 0 0 0 15px;
padding: 0;
}
li.like_post .like_link a {
font-weight: bold;
}
li.like_post .like_title {
font-weight: bold;
}
li.like_post .post_info_bottom {
margin: 10px 0 0 0;
display: block !important;
}
</style>
</head>
<body>
...
{block:Likes}
<div id="likes_container">
<h2>Stuff I like</h2>
{Likes limit="5" summarize="100" width="150"}
<a
href="http://www.tumblr.com/liked/by/{Name}">
See more stuff I like
</a>
</div>
{/block:Likes}

</body>
</html>
Botones "Me gusta" y "Reblogueo"

Botn "Me gusta"
Variable
Descripcin
{LikeButton}
Botn "Me gusta" predeterminado.
{LikeButton
color="grey"}
Color del botn "Me gusta".
{LikeButton
size="20"}
Tamao del botn "Me gusta".
Gris, blanco o negro. El botn "Me gusta" siempre ser rojo si el

visitante ha marcado esa publicacin usando dicha funcin.
Mximo: 100
Botn de reblogueo
Variable
Descripcin
{ReblogButton}
Botn de reblogueo predeterminado.
{ReblogButton color="grey"}
Color del botn de reblogueo.

Gris, blanco o negro.
{ReblogButton size="20"}
Tamao del botn de reblogueo.

Mximo: 100
Ejemplo
<html>
<head>
.like_and_reblog_buttons {
border: 1px solid #e8e8e8;
border-radius: 3px;
list-style: none;
}
.like_and_reblog_buttons li {
float: left;
margin: 0;
padding: 7px 15px;
height: 20px;
}
.like_and_reblog_buttons li:first-child {
border-right: 1px solid #e8e8e8;
}
</style>
</head>
<body>
...
{block:Posts}
...

<ul class="like_and_reblog_buttons">
<li>{ReblogButton}</li>
<li>{LikeButton}</li>
</ul>
{/block:Posts}
...
</body>
</html>
Si tu tema permite el desplazamiento por pantalla ilimitado u otro tipo

de paginacin AJAX, debes solicitar el estado de los "Me gusta" de las
publicaciones nuevas cada vez que la pgina se cargue o inserte:
Funcin
Descripcin
Tumblr.LikeButton.get_status_by_page(n)
Llama a esta funcin tras

solicitar una pgina de
publicaciones nueva.
Extrae el nmero de
pgina que se acaba de
cargar como una cifra
entera.
Tumblr.LikeButton.get_status_by_post_ids([n,n,n])
Solicita el estado de los

"Me gusta" de cada
publicacin. Recopila
varios identificadores de
publicaciones.
Publicaciones relacionadas
Variable
Descripcin
{block:RelatedPosts}
{/block:RelatedPosts}
Aparece en las pginas de los enlaces permanentes.

Muestra publicaciones relacionadas a partir del tipo de
publicacin, el contenido y las etiquetas de la actual.
Sigue el mismo formato que el bloque de las
publicaciones.
Ejemplo
<html>
<body>
{block:IfRelatedPosts}{block:RelatedPosts}
<h2>Related Posts</h2>
{block:Posts}
...
{/block:Posts}{/block:RelatedPosts}{/block:IfRelatedPosts}
</body>
</html>
Opciones del tema

Activar los colores personalizados

Al incluir etiquetas meta de color especiales en tu tema, los usuarios
podrn cambiarlos fcilmente utilizando la pgina de personalizacin.
Tambin puedes especificar {BackgroundColor} , {TitleColor} o
{AccentColor} como predeterminados para heredar los valores
establecidos en los parmetros de la apariencia global, a menos que el
usuario seleccione otro color manualmente.
Ejemplo
<html>
<head>

<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Heading text" content="
{TitleColor}"/>
<meta name="color:Text" content="#000"/>
#title {
color: {color:Heading text};
}
#content {
background-color: {color:Content Background};
color: {color:Text};
}
</style>
</head>
<body bgcolor="{color:Background}">
<h1 id="title">Title</h1>
<div id="content">
...
</div>
</body>
</html>
Activar las fuentes personalizadas

Al incluir etiquetas meta de fuentes de letra en tu tema, los usuarios
podrn cambiarlas fcilmente utilizando la pgina de personalizacin.
Tambin puedes especificar {TitleFont} como predeterminado para
heredar el valor "Fuente del ttulo" establecido en los parmetros de la
apariencia global, a menos que el usuario seleccione otra fuente
manualmente.
Ejemplo
<html>
<head>

<meta name="font:Title" content="Helvetica Neue"/>
<meta name="font:Body" content="Arial, Helvetica, sansserif"/>

h1 {
font: 30px {font:Title};
}
#content {
font: 12px {font:Body};
}
</style>
</head>
...
</html>
Activar booleanos
Al incluir etiquetas "meta-if" en tu tema, los usuarios podrn cambiar las
opciones que definas fcilmente. Resulta til a la hora de mostrar u
ocultar widgets o elementos de diseo.
Ejemplo
<html>
<head>

<meta name="if:Show people I follow" content="0"/>
<meta name="if:Reverse pagination" content="1"/>
</head>
<body>
{block:IfNotReversePagination}
<a href="...">Previous</a> <a href="...">Next</a>
{/block:IfNotReversePagination}{block:IfReversePagination}
<a href="...">Next</a> <a href="...">Previous</a>
{/block:IfReversePagination}{block:IfShowPeopleIFollow}
<div id="following">...</div>
{/block:IfShowPeopleIFollow}
</body>
</html>
Activar listas desplegables

Al incluir etiquetas "meta-select" en tu tema, los usuarios dispondrn de
varias opciones para un elemento de diseo concreto.
Ejemplo
<html>
<head>

<meta name="select:Layout" content="regular"
title="Regular">
<meta name="select:Layout" content="narrow"
title="Narrow">
<meta name="select:Layout" content="grid" title="Grid">
</head>
<body>
<div class="content {select:Layout}">
...

</div>
</body>
</html>
Activar el texto personalizado

Al incluir etiquetas "meta-text" en tu tema, los usuarios podrn
configurar fcilmente las variables de texto que definas. Resulta til a la
hora de ajustar textos o de configurar widgets que requieren
informacin del usuario.
Ejemplo
<html>
<head>

<meta name="text:Flickr Username" content=""/>
</head>
<body>
{block:IfFlickrUsername}
<div id="flickr_widget">
<script type="text/javascript"
src="http://flickr.com/widget?user={text:Flickr
Username}">
</script>
</div>
{/block:IfFlickrUsername}
</body>
</html>
Activar las imgenes personalizadas

Al
incluir etiquetas meta-image en tu tema, los usuarios podrn utilizar
imgenes personalizadas fcilmente sin tener que editarlo. Las
variables correspondientes a las imgenes (p. ej. {image:Logo} )
devolvern un cuadrado transparente de un pxel si no se establece
ninguna imagen.
Tambin puedes especificar {HeaderImage} como predeterminado para
heredar el valor "Imagen de cabecera" establecido en los parmetros
de la apariencia global hasta que el usuario suba una imagen diferente.
Ejemplo
<html>
<head>

<meta name="image:Background"
content="http://static.tumblr.com/..."/>
<meta name="image:Header" content="{HeaderImage}"/>
body {
background: #2D567C url('{image:Background}');
}
</style>

</head>
<body>
{block:IfHeaderImage}<img
src="{image:Header}"/>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
</body>
</html>
Activar el CSS personalizado

Al incluir la etiqueta {CustomCSS}
al final del bloque de estilo CSS de
tu tema, los usuarios con los que lo compartas podrn cambiar su
apariencia sin tener que editar el
marcado.
Ejemplo
<html>
<head>
#content {
background-color: #fff;
color: #000;
}
{CustomCSS}
</style>
</head>
<body>
<div id="content">
...
</div>
</body>
</html>
Twitter
Si has activado la integracin con Twitter en tus preferencias de
Tumblr, puedes incluir el archivo Javascript /tweets.js
en tu blog
principal para que muestre tus ltimos tweets. Este archivo ejecuta la
funcin de devolucin de llamada recent_tweets() , de forma que enva
los datos JSON del API de Twitter como parmetro nico.
Variable
Descripcin
{block:Twitter}
{/block:Twitter}
Aparece si tienes activada la integracin con

Twitter.
{TwitterUsername}
Tu nombre de usuario de Twitter.
Ejemplo
{block:Twitter}
<div id="twitter" style="display:none;">

<h3><a
href="http://twitter.com/{TwitterUsername}">Latest Tweets</a>
</h3>
<div id="tweets"></div>
</div>
<script type="text/javascript">
function recent_tweets(data) {
for (i=0; i<data.length; i++) {
document.getElementById("tweets").innerHTML =
document.getElementById("tweets").innerHTML
+
'<a
href="http://twitter.com/{TwitterUsername}/status/' +
(data[i].id_str ? data[i].id_str :
data[i].id) +
'"><div class="content">' + data[i].text +
'</div></a>';
}
document.getElementById("twitter").style.display =
'block';
}
</script>
{/block:Twitter}

{block:Twitter}
<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}
Temas para iPhone

Los
temas de Tumblr utilizan diseos optimizados para dispositivos
mviles automticamente cuando navegas desde uno de ellos.
El
diseo especfico para iPhone puede sustituirse al aadir una pgina
de Diseo personalizado a tu blog (a travs de las opciones de
personalizacin) incluyendo este cdigo en la URL: /iphone-theme .
Transformacin de variables
Al
aadir prefijos de transformacin a las variables, Tumblr
las mostrar
en formatos especiales, lo cual resulta muy til a la hora de traspasar
datos a Javascript, por ejemplo. Actualmente, disponemos de cinco
tipos de prefijos de transformacin:
Variable
Descripcin
Plaintext
Aade el prefijo Plaintext a cualquier variable del tema para obtener

una cadena de texto sin etiquetas HTML y con los caracteres
correspondientes convertidos a entidades HTML, de forma que
puedas incluirlos en atributos HTML, etc.
Javascript
Aade el prefijo JS a cualquier variable del tema para obtener una

cadena de texto de Javascript (incluida entre comillas).
Javascript
Aade el prefijo JSPlaintext a cualquier variable del tema para

Plaintext
obtener una cadena de texto de Javascript (incluida entre comillas)

sin etiquetas HTML y con los caracteres correspondientes
convertidos a entidades HTML.
URLEncoded
Aade el prefijo URLEncoded a cualquier variable del tema para

obtener una cadena de texto con una URL cifrada.
RGB
Aade el prefijo RGB a una variable de color para convertir los

valores de color hexadecimales a RGB.
Ejemplo
<a href="{URL}" title="{PlaintextName}">{Name}</a>
<script type="text/javascript">
var description
= {JSDescription};
var description_text = {JSPlaintextDescription};
</script>
<a href="http://digg.com/submit?url={URLEncodedPermalink}">Digg
this</a>
Tumblr, Inc. Ayuda Acerca de Tumblr Aplicaciones Desarrolladores Temas Empleos Informacin legal Privacidad

Como Crear Plantilla HTML para Tumblr

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Como Crear Plantilla HTML para Tumblr

Cargado por

Copyright:

Formatos disponibles

Creating a custom HTML theme | Tumblr

Cmo crear un tema

2. Selecciona Personalizar en la columna derecha.

Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]

Creating a custom HTML theme | Tumblr

Las variables se utilizan para insertar datos dinmicos, como el ttulo o

Las etiquetas block se utilizan para mostrar un bloque de cdigo HTML

Aqu tienes un ejemplo del marcado completo de un tema:

Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]

Creating a custom HTML theme | Tumblr

Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]

Creating a custom HTML theme | Tumblr

El ttulo sin cdigo HTML de tu blog.

La descripcin de tu blog. Puede contener cdigo

La descripcin sin cdigo HTML de tu blog.

URL del feed RSS de tu blog.

URL del icono de favoritos de tu blog.

Cualquier cdigo CSS personalizado que aadas a tu

Aparece en la pgina del enlace permanente de una

Aparece en pginas (de publicacin) de ndice.

Aparece en pginas de los enlaces permanentes. Es

Idntica a {PostTitle}, pero genera un resumen

URL del avatar de tu blog. 16-pxeles por 16-pxeles.

Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]

Creating a custom HTML theme | Tumblr

URL del avatar de tu blog. 24-pxeles por 24-pxeles.

URL del avatar de tu blog. 30-pxeles por 30-pxeles.

URL del avatar de tu blog. 40-pxeles por 40-pxeles.

URL del avatar de tu blog. 48-pxeles por 48-pxeles.

URL del avatar de tu blog. 64-pxeles por 64-pxeles.

URL del avatar de tu blog. 96-pxeles por 96-pxeles.

URL del avatar de tu blog. 128-pxeles por 128-pxeles.

Muestra los aos de antigedad de tu blog.

La fuente utilizada en el ttulo de tu blog.

El grosor de la fuente del ttulo ("normal" o

El color de fondo de tu blog.

El color del ttulo de tu blog.

El color de los elementos de contraste de tu blog.

La URL de tu imagen de cabecera en todo su

La forma en la que se muestra tu avatar (circular o

Aparece si tienes activada la opcin "Mostrar ttulo".

Aparece si tienes desactivada la opcin "Mostrar

Aparece si tienes activada la opcin "Mostrar

Aparece si tienes desactivada la opcin "Mostrar

Aparece si tienes activada la opcin "Mostrar

Aparece si tienes desactivada la opcin "Mostrar

Aparece si tienes activada la opcin "Mostrar

Aparece si tienes desactivada la opcin "Mostrar

Creating a custom HTML theme _ Tumblr.html[01/10/2016 01:22:04 a. m.]

Creating a custom HTML theme | Tumblr

Aparece si hay una pgina "anterior" o

Aparece si hay una pgina "anterior"

Aparece si hay una pgina "siguiente"

URL para la pgina "anterior" (publicaciones

URL para la pgina "siguiente" (publicaciones

Nmero de pgina actual.

Nmero total de pginas.

Aparece si la funcin para enviar

La etiqueta personalizada para el enlace de

Aparece si tienes activada la funcin para

Etiqueta personalizada del enlace para enviar

Muestra cada nmero de pgina anterior y

Aparece cuando la marca de paginacin

Mnimo: 250 px (debe ser menor o igual que