Gadget de entradas populares con foto miniatura

Vamos a explicar como podemos poner un gadget para mostrar debajo de nuestras entradas unas miniaturas de nuestras entradas más populares.
Primero tenemos que agregar a CSS este código.

Nos vamos a Plantilla> Personalizar> Avanzado y pones código y guardamos.  

#PopularPosts2
{margin: 10px;
}
#PopularPosts2 h2{display: none;
}
#PopularPosts2 ul {width: 100%;margin: 0;
}
#PopularPosts2 .item-title{display: none;
}
#PopularPosts2 ul li {float:left;list-style-type: none;padding: 0 5px 0 4px;
}
#PopularPosts2 li img {background: #fff;padding: 4px;transition: all .5s linear; /*Transiciones*/
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.tip { /*Tooltip
*/
color: #fff;background:#120b01;display:none;padding:10px;position:absolute;
z-index:99;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;border-radius: 3px;
}
#PopularPosts2 li img:hover, .tip {opacity:.6;filter:alpha(opacity=60);
}
/*Para evitar el subrayado del texto del tooltip si se
tuviera declarado en todos los enlaces*/a.tip_trigger:hover { text-decoration: none;
}

Después nos tenemos que ir a Plantilla> Editar HTML y antes de </head> añadimos este código.

<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() {
//Tooltips $(".tip_trigger").hover(function(){ tip = $(this).find('.tip'); tip.show(); },
function() { tip.hide(); }).mousemove(function(e) { var mousex = e.pageX + 20;
var mousey = e.pageY + 20; var tipWidth = tip.width(); var tipHeight = tip.height(); var tipVisX = $(window).width() - (mousex + tipWidth); var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX <
20 ) { mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { mousey = e.pageY - tipHeight - 20;
} tip.css({ top: mousey, left: mousex }); }); }); //]]> </script>

Después, buscas la parte que controla el gadget de entradas populares, cuando este sólo muestra imágenes, y que se ve de este modo:

<!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>

...y lo cambias por esto:

<!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail' style='width: 72px; height: 72px;'> <a class='tip_trigger' expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><span class='tip'><data:post.title/></span> </a>
</div>

</div>Eso debería quedar antes del cierre de la condición: </b:if>,