Mostrar tus likes de tumblr

Si tenes una cuenta en tumblr.com habrás notado que algunos sitios te muestran no solo sus posts, y reblogueos, sino tambien las cosas que dichos usuarios "gustan"... es decir los "Likes". 

Para aquellos que aun no esten familiarizados con el servicio de tumblr.com, os explico que un usuario que tiene una cuenta, mientras "sigue" a otros usuarios, va mirando las cosas que otros postean. Con un post puede "reblogg" o "like" ... si los rebloggea es como que lo postea en su espacio para sus amigos... lo que en Twitter seria un RT. Mientras que si le coloca un "Like" ... le queda marcado en sus favoritos, en una seccion que puede ser oculta para él, o visible para todos.

En fin, vi algunos sitios de tumblr.com que mostraban en el sidebar cuales eran sus ultimos favoritos... me llamó la atención. Yo quiero tambien hacer eso, como lo hicieron?

Bueno, en este post... el codigo necesario. =)


Primero entras a tu sitio de tumblr.com.
Habrá que editar el HTML de tu theme, por lo tanto ves a http://www.tumblr.com/customize

Despues de  <style type="text/css">  pegas esto:

/*_____________________________________ 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; } /*___________________________________________

Y dentro del sidebar (columna lateral), donde mas te guste pegas ésto:

?

<div style="clear:both;"></div> {block:Likes}             <div id="likes_container">                 <h2>Stuff I like</h2>                       {Likes limit="5" summarize="100" width="150"}             </div>         {/block:Likes} <!--<div class="space"></div>--> <div style="clear:both;"></div>

Fuente:  http://recreando.blogspot.com.es/2010/04/mostrar-los-likes-en-tumblr.html

Fecha y hora actualizada

Este código lo puedes poner donde quieras. Aunque recomiendo situarlo en alguna columna lateral para que sea más visible.

<head> 
<title>Pagina nueva 1</title> 
<script> 
function mueveReloj(){  
var LaFecha=new Date(); 
var Mes=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
var diasem=new Array('Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'); 
var diasemana=LaFecha.getDay(); 
var FechaCompleta=""; 
var NumeroDeMes="12"; 
var hora = LaFecha.getHours(); 
if(hora<10){hora="0"+hora;}; 
var minuto = LaFecha.getMinutes();  
if(minuto<10){minuto="0"+minuto;}; 
var segundo = LaFecha.getSeconds(); 
if(segundo<10){segundo="0"+segundo;}; 
NumeroDeMes=LaFecha.getMonth(); 
FechaCompleta=diasem[diasemana]+" "+LaFecha.getDate()+" de "+Mes[NumeroDeMes]+" de "+LaFecha.getFullYear()+" "+hora+":"+minuto+":"+segundo; 
document.getElementById('pepe').innerHTML=FechaCompleta; 
setTimeout('mueveReloj()',1000) 
}  
</script>  

<body onload="mueveReloj()"> 
<div id="pepe"></div> 
</body> 
</html> 

Añadir sidebar (columna lateral) a un tema que no lo tiene.

• Paso 1: Ves a http://www.tumblr.com/customize para editar tu tumblr.
  
  
  Paso 2: Haz clic en “Editar HTML” para poder editar tu tumblr mediante códigos HTML.
  
  
  Paso 3: Busca (ctrl+f)  <style type="text/css">  y añade algunas líneas en blanco pulsando la tecla "Enter".
  Paso 4: Agrega el siguiente código en tu tema, debajo de la etiqueta <style type="text/css"> :

  #sidebar {
  float:left;
  width:250px;
  height:100%;
  }

  Paso 5: Cambia el "float: left" a "float: right" si deseas tener la barra lateral a la derecha de tu Tumblr. Ajusta el valor de "width" para cambiar el ancho a tu gusto.
  Paso 6: Busca la etiqueta <div id="wrapper"> debajo de la sección <body> y añade algunas líneas en blanco pulsando la tecla "Enter".
  Paso 7: Escribe lo siguiente en el área en blanco que acabas de crear:

  <div id="lateral">

  Paso 8: AQUÍ IRÁN TODOS LOS CÓDIGOS HTML QUE QUIERAS AÑADIR. Pulsa la tecla "Enter" para ir a la línea siguiente. Añade cualquier tipo de código HTML o el contenido que deseas mostrar en la barra lateral inmediatamente después de la etiqueta.
  
  

  <div id="lateral">

  Paso 9: Cierra el sidebar escribiendo </div>  después de la última parte del contenido sidebar.
  Paso 10: Guarda el tema. Cada vez que hagas un cambio en tu tema recomiendo que lo guardes en un documente de texto en tu ordenador, así en caso de cagarla puedes volver a como lo tenias antes.
  
  
  Si no te ha funcionado o no sabes hacerlo, copia y pega CODE de esta web:

  http://forums.htmlhelp.com/index.php?showtopic=12660