Personaliza tu Tumblr. Tutorial 2: Secciones


Hola! Segundo post de ayuda para modificar vuestro Tumblr. En este trataré de explicar como hacer secciones (menú, webs amigas, etc)

Nota: Voy a explicar todo tomando como referencia el theme redux (que es el que uso). Si alguien usa otro theme, lógicamente la estructura no será igual, pero puede servirle de base.

ayuda
tutorial
tumblr
tumbler
delasazores


Empecemos. Lo primero es conocer un poco la estructura del menú lateral. En mi caso concreto (repito, theme Redux) es el siguiente:

<div id="sidebar">
<div id="top">
CONTENIDO
</div>
</div>

<div id="sidebar">



Es todo el contenido que hay en el lateral. Para explicarlo de un modo sencillo, es un armario y contiene los cajones (secciones).

<div id="top">



Se usa para dividir cada una de las secciones (por defecto viene todo junto en una misma sección). De un modo sencillo, es cada uno de los cajones del armario.

Teniendo esto claro, pongámoslo en práctica. ¿Cómo haría para separar mi foto de perfil y descripción del resto?

Inicialmente nuestra página sería así:

de las azores

El código original sería:

<div id="sidebar">
<div id="top">
<div id="avatar"><a href="/"><img src="{PortraitURL-128}" /></a></div>
<div id="description">{Description}</div>



…. etc. (entiéndase como etc el resto del código)

Añadiríamos lo que está en negrita:

<div id="sidebar">
<div id="top">
<div id="avatar"><a href="/"><img src="{PortraitURL-128}" /></a></div>
<div id="description">{Description}</div>
</div>
<br />
<div id="top">
<br />



…. etc.

Y el resultado sería:

tambler

Nota: los <br /> son saltos de línea, para evitar que las secciones estén pegadas.

Ahora un breve inciso para explicar los tags (etiquetas).

¿Qué son y para que se usan?: Es una forma que tiene Tumblr (como muchas otras páginas) para organizar los post que publicas y facilitar su posterior búsqueda. Por ejemplo, si publicas un post con un gif de una sandía los tags podrían ser fruta, sandía, gif. De esta forma, si alguien busca en tu página fruta podrá ver sandía en la lista.

¿Cómo se usan? Cuando creas o reblogueas un post, a la derecha hay un recuadro que pone etiquetas. Ahí es donde debes escribirlas.

Esta explicación de los tags es porque tumblr tiene una forma de buscar los tags de una página, con la siguiente estructura: TUPAGINA/tagged/LOQUEBUSCAS Un ejemplo: http://delasazores.com/tagged/ayuda

Y esto sirve también para hacer un menú para tu página.

Supongamos que queremos un menú (botonera) con gifs, memes, humor y animalicos. Lo primero será conocer que tags usamos en nuestra página. En este ejemplo, supongamos que uso los tags gifs, memes, humor, animalicos. Entonces, la ruta de búsqueda quedaría así para cado uno de los casos:

TUPAGINA/tagged/gifs Ejemplo: http://delasazores.com/tagged/gifs
TUPAGINA/tagged/memes Ejemplo: http://delasazores.com/tagged/memes
TUPAGINA/tagged/humor Ejemplo: http://delasazores.com/tagged/humor
TUPAGINA/tagged/animalicos Ejemplo: http://delasazores.com/tagged/animalicos

Ahora sólo nos queda poner una imagen en vez de un enlace escrito que nos lleve a nuestro tag. Es fácil:

<a href="TUPAGINA/tagged/TUTAG"><img src="RUTA_DE_LA_IMAGEN"/></a>



Ejemplo:

<a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a>



NOTA: En el primer post de ayuda podéis ver como añadir botones que cambien al pasar el ratón por encima.

Ahora que ya sabemos como hacer la botonera, vamos a colocarla en nuestra página.

Supongamos que queremos ponerla después de la descripción. Tenemos el siguiente código:

<div id="description">{Description}</div>
</div>
<br />
<div id="top">
<br />



….etc.

Tenemos que añadir un nuevo <div id="top"></div> para nuestro menú. La cosa quedaría así:

<div id="description">{Description}</div>
</div>
<br />
<div id="top">
<br />
CONTENIDO DEL MENÚ
<br /><br />
</div>
<br />
<div id="top">
<br />



El resultado sería:

Personaliza tu Tumblr. Tutorial 2: Secciones

Y ahora, sólo tenemos que cambiar “CONTENIDO DEL MENÚ” por los códigos de las imágenes que nos llevan a los tags. Un ejemplo:

<div id="top">
<br />
<a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a>
<br /><br />
</div>



En nuestra página se vería así:

ayuda

Por último, vamos a crear una sección para webs amigas, debajo de nuestro menú. Ahora mismo tenemos este código:

<div id="top">
<br />
<a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a>
<br /><br />
</div>
<div id="pages" class="ask_and_submit">



…. etc.

Tenemos que añadir una nueva sección, tal que así:

<div id="top">
<br />
<a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a>
<a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a>
<br /><br />
</div>
<br />
<div id="top">
<br />
WEBS AMIGAS
<br /><br />
</div>
<br />
<div id="top">
<br />
<div id="pages" class="ask_and_submit">



El resultado sería:

tutorial

Ahora sólo nos falta cambiar “WEBS AMIGAS” por el código con la imagen que nos llevará a esas webs. El código sería:

<a href="URL_DE_WEB_AMIGA"><img src="URL_BANNER_WEB_AMIGA"/></a>



Un ejemplo:

<a href="http://delasazores.com/"><img src="http://24.media.tumblr.com/tumblr_ltf5i4IHk21r1m0jso1_250.jpg"/></a>



El resultado sería:

tumblr

Con esto ya tenéis unas nociones básicas para crear todas las secciones que queráis. En el siguiente tutorial trataré de explicar como redondear las secciones y ponerles un borde de color. También hablaré un poco de los botones de redes sociales.

tumbler


delasazores


de las azores

tambler
Personaliza tu Tumblr. Tutorial 2: Seccionesayudatutorial