En primer lugar hay que aclara que la implementación de este tipo de comentarios con burbujas están ubicados en la fecha tipo calendario y para el tema de mi blog me ha costado un poco llevarlo a cabo por la diferencia en la forma que debe ser implementada.
Por otro lado, esta entrada ha sido explicada en el blog CSS-Tricks, la cual ha sido escrita por Yoast.
Como puedes ver, la imagen que se muestra como calendario para el tema de este blog es la que se encuentra a la izquierda de este párrafo y el código para el CSS es el siguiente:
.entrydate .dateMonth {font-size : 10px; text-align : center; color : #FFF; margin : 0; padding : 3px 0 0;}
.entrydate .dateDay {font-family : Times New Roman,Helvetica,Sans-Serif; font-size : 21px; font-weight : 700; text-align : center; color : #888; margin : 0; padding : 3px 0 0;}
.entrydate .dateYear {font-size : 9px; padding : 0 0 0 1pt; }
.entrydate {background : transparent url(images/date.png) repeat scroll 0 0; float : right; height : 53px; margin-left : 5px; margin-top : 5px; width : 49px;}
La ventaja en comparación con el código presentado en CSS-Tricks radica en el empleo de una sola imagen para visualizar los meses y los días, pues estos se sitúan sobre el mismo en forma de texto mediante el siguiente código:
<?php if (!is_page()) : ?>
<div class="entrydate">
<div class="dateMonth">
<?php the_time('M');?>
</div>
<div class="dateDay">
<?php the_time('j'); ?>
</div>
</div>
<?php endif; ?>Ahora bien, para añadir la burbuja, debemos copiar el siguiente código en nuestro fichero style.css
.burbuja {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}La imagen os la dejo aquí para que puedan descargarla: 
, recuerda asignarle la ruta adecuada.
Teniendo el CSS para la burbuja y conociendo en la plantilla el la parte del código que visualiza la fecha dentro del calendario solo nos queda ubicar la burbuja de los comentarios y para ello debemos obtener el número de comentarios mediante la función comments_number();
<div class="burbuja"> <?php comments_number('0', '1', '%'); ?>
</div>Solo nos falta ubicar el código anterior en el lugar adecuado y para ello debemos colocarlo justo donde visualizamos el día (mirar código completo arriba) porque debemos sustituirlo por el siguiente:
<div class="entrydate"> <div class="dateMonth"> <?php the_time('M');?> </div> <div class="burbuja"> <?php comments_number('0', '1', '%'); ?> </div> <div class="dateDay"> <?php the_time('j'); ?> </div>
</div>El resultado es una bonita burbuja que se situará sobre nuestro calendario.
Perfecto Vera…., muchas gracias por compartirlo, había visto el efecto en CSS-Tricks como tu bien has indicado, pero me pareció imposible de aplicar a este tema. Se ve bien con Chrome y Firefox, en IE la burbuja se separa un poco más pero de todas formas, muchísimas gracias por compartirlo, lo aplicaré a mi blog.
Una vez más…, gracias.
Denada Jose, me llevó algo de tiempo crearla, estudiando la forma de hacerla encajar en el tema BlueGrace ;).
Un saludo.