Tumblr Tutorials - Enjoy!

Gadgets Twitter (Botón de Seguir, Botón de Twittear, Caja de Twits..) para tu Tumblr.

  1. Caja de Tweets para tu Tumblr - AQUI
  2. Botón de “Twitear” - AQUI
  3. Botón de “Seguir” - AQUI.

Para los tres botones se siguen las mistas instrucciones:

Ve a la página, customiza tu botón, copia el código y pégalo en tu Descripción.

Listo!

Necesitas ayuda? Preguntas aquí.

Añadir botón de “Me gusta” de Facebook en tu Descripción.

  1. Ve a ESTÁ PÁGINA.
  2. Customiza tu botón
  3. Pega el código en tu Descripción.

Así de simple!

Contador de seguidores en tu descripción.

  1. Ve a esta página y click sobre “LOGIN WITH YOUR TUMBLR”
  2. Clicka sobre “Permitir” o “Allow” (depende del idioma)
  3. Elige el widget que quieras.
  4. Copia el código y pégalo en tu Descripción.

has tenido problemas con este tutorial? envía tus dudas aquí.

Ask box en el sidebar.

Copia este código:

<iframe frameborder=”0” border=”0” scrolling=”no” width=”400” height=”190” allowtransparency=”true” src=”http://www.tumblr.com/ask_form/USERNAME.tumblr.com” style=”background-color:transparent; overflow:hidden;”></iframe>

Pégalo en tu Descripción, y recuerda cambiar USERNAME por tu nombre de usuario.

No olvides ajustar la altura “height” y el ancho “width” del box, porque sinó no se adaptará a tu sidebar.

problemas con este tutorial? envía tus dudas

Reproductor de música con muchas canciones.

Ejemplo: Mi blog personal, el reproductor de musica del sidebar.

1. Ve a esta página, regístrate y confecciona tu lista de reproducción.

2. Cuando hayas terminado, entra aquí y customiza el reproductor.

3. Puedes elegir la opción “Autoplay”, para que la música se reproduzca al entrar automáticamente a tu Tumblr. Si no seleccionas la casilla, los lectores de tu Tumblr deberán pulsar el botón de Play para que la música se escuche.

4. Click sobre Player Color Scheme y elige “Customize..”. Ahora cambia los colores del reproductor. (ten en cuenta que sólo se verá la parte superior izquierda).

image

5. Copia el código y pégalo en tu descripción. Ahora cambia el “Width” a 50 y el “Height” a 15. Ejemplo:

image

6. Ahora elimina esta parte para que no hayan anuncios molestos:

image

Si has tenido algún problema con este tutorial, envía tus dudas aquí.

Menú desplegable para Links + Botón de “Ir”

Este tutorial es exactamente igual al anterior sobre el menú desplegable, pero en cambio, en este menú se incluye un botón de “Ir”, ejemplo:

image

Lo que debes hacer es copiar este código y pegarlo en tu descripción:

<form action=”http://www.myspacegens.com/handler.php?gen=redirect” method=”post”> 
<select name=”url” style=”width: 100px; height: 20px; font-size: 11px; font-family: arial;”> 
<option>Links</option> 
<option value=”LINK URL AQUI”>TITULO LINK AQUI</option> 
<option value=”LINK URL AQUI”>TITULO LINK AQUI</option> 
<option value=”LINK URL AQUI”>TITULO LINK AQUI</option> 
<option value=”LINK URL AQUI”>TITULO LINK AQUI</option> 
</select> <input type=”submit” style=”font-family: arial;” value=”go”> 
</form> 

Para cambiar el botón de “go” por cualquier otro mensaje, debes reemplazar “go” por lo que quieras.

Si tienes problemas para aplicar este tutorial, envíame tus preguntas aqui.

Menú desplegable para Links.

Para crear un menú desplegable en tu blog como este:

image

debes copiar este código y colocarlo en tu Descripción (Customize > Info > Description).

<form action=”../”> 
<select onchange=”window.open
(this.options[this.selectedIndex].value,’_top’)” style=”font-size: 11px; text-align:left; font-family: arial;”> 
<option value=”“>Links</option> 
<option value=”URL AQUÍ”>título del link aquí</option>

<option value=”URL AQUI”>título del link aquí</option> 

<option value=”URL AQUI”>título del link aquí</option> 

<option value=”URL AQUI”>título del link aquí</option> 
<option value=”URL AQUI”>título del link aquí</option> 
</select></form> 

Una vez copiado este código, puedes modificar el título del menú (cambiando la palabra “links” por la que tu quieras), y poner todos los links que quieras.

has tenido problemas para aplicar este tutorial? alguna duda? dímelo aquí.

Cuadrito de búsqueda en tu Tumblr.

Copia este código: <form action=”/search” method=”get”>

<input type=”text” name=”q” value=”” style=”width:130px; height:13px; background-color:#ffffff; color: #000000; font-size: 11px; border: 1px solid #000000;”/>
<input type=”button” value=”search” style=”font-size: 10px; background-color:#ffffff; color: #000000; border: 1px solid #000000;”/></form> 

y colócalo en tu descripción (Customizar > Info > Descripción)

Cambia los colores (#000000) por el código de color que quieras (En links de interés encontrarás páginas con colores y su HTML), y cambia también el ancho (width) y el alto (height)

EXTRA: Si quieres que el cuadrito de búsqueda salga con puntitos, como el de este blog, replaza “solid” por “dotted” y si lo quieres a rayitas, pon “dashed”

si tienes alguna duda para aplicar este tutorial, sólo envíame tu pregunta.

Colocar un contador de usuarios online en tu descripción.

  1. Ve a ESTA página.
  2. Donde pone “Siteurl: http://” debes pegar tu url. Debería quedar más o menos así con el url de tu tumblr “http://imbreakbrokebroken.tumblr.com/” 
  3. Copia el código.
  4. Pégalo en tu descripción.
  5. Si no quieres publicidad en tu blor, borra este código del código del contador. Borra ESTE código: “ <!— Please Leave the Below Sponsor Link To Help Support Us —>

<br><a href=”http://www.take-iqtest.com”>Take IQ Test</a> hasta aquí.

Esto: <!— End FreeUsersOnline Code —>” lo dejamos como estaba, o el contador no funcionará.

Y LISTO!

Si tienes algún problema con la aplicación de este tutorial, ENVÍA TU PREGUNTA.

Codificación básica para tu descripción. (HTML)

Estos códigos se deben colocar en la parte HTML de tu descipción o plantilla. Si tienes alguna duda de como hacerlo, envíame una pregunta.

Negrita <b>texto</b>
Cursiva: <i>texto</i>
Subrayada: <u>texto</u>
Tachada: <s>texto</s>

Centrar texto: <center>texto</center>
Texto a la derecha: <div style=”text-align: right;”>texto</div>
Texto a la izquierda: <div style=”text-align: left;”>texto</div>

Cambiar color de las palabras: <font color=”htmlcolor”>texto</font>
Elige tu color aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm (Copia el código HTML del color, ejemplo: black - #000000, red - #FF0000 y pégalo donde pone “htmlcolor”)

Cambiar el tamaño de las palabras: <font size=”2”>texto</font>
El número 2 es un ejemplo, pon el núm que tu quieras. 

Cambiar color y tamaño de las palabras a la vez: <font size=”2” color=”htmlcolor”>texto</font> 

Hacer un link: usa esta plantilla: <a href=”http://link”>nombre del link</a>
*** Si quieres que se abra en una nueva pestaña:
<a href=”http://link” target=”_blank”>nombre del link</a> 


Poner una imágen en tu descripción: Sube la imágen que desees a ImageShack, TinyPic o Photobucket. Copia el “Direct link” que debería quedar algo así (ejemplo) “http://blablablablablacodigodelaimagen.jpg” (o .png) y usa este código: <img src=”eselinkqueconseguisteantes”>