Como añadir los comentarios en una burbuja en WordPress BlueGrace

Calendario Burbuja Comentarios 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.

Calendario

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: bubble, 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>

Calendario Burbuja Comentarios 2 El resultado es una bonita burbuja que se situará sobre nuestro calendario.

Acceso

¿Olvidaste la contraseña?

¿No tienes cuenta? Registro

¿Olvidaste la contraseña?

Introduce los datos de tu cuenta y te enviaremos un enlace para restablecer la contraseña.

El link para restablecer tu contraseña parece inválido o caducado.

Acceder

Privacy Policy

Añadir a Colección

No tienes Colecciones

Aquí encontrarás todas las colecciones que has creado con anterioridad.