Íconos con la fecha y la cantidad de comentarios de tu blog

A medida que nuestro blog crece, se hace cada vez mas difícil poder mostrar toda la información que deseamos en el espacio que disponemos. Css-tricks nos trae una opción interesante para solucionar esto: agregar en cada posteo un ícono con la fecha y una burbuja sobre este que indique la cantidad de comentarios que posee el artículo.

Es un efecto que queda verdaderamente original y hará que nuestro sitio se vea mucho más elegante y organizado. Realizarlo es muy sencillo, así que si tienen un blog o sitio web, no duden en implementarlo.

Nuestro CSS se debería ver de esta forma:

1.    p.date {
2.        width: 42px;
3.        height: 10px;
4.        padding: 18px 0 14px 0;
5.        text-align: center;
6.    }
7.
8.    p.date span { display: none; }
9.
10.
11.    /************************************************
12.
13.    *   iconos para cada mes                           *
14.
15.    ************************************************/
16.
17.    .month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
18.    .month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
19.    .month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
20.    .month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
21.    .month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
22.    .month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
23.    .month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
24.    .month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
25.    .month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
26.    .month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
27.    .month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
28.    .month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
29.
30.
31.
32.    /************************************************
33.
34.    *   Burbuja con numero de comentarios*
35.
36.    ************************************************/
37.    .shield {
38.        position: relative;
39.    }
40.    .commentscloud {
41.        position: absolute;
42.        text-align: center;
43.        top: -4px;
44.        left: 22px;
45.        width: 30px;
46.        height: 24px;
47.        padding: 3px 0;
48.        background: url(images/bubble.png) no-repeat 0 0;
49.    }

Y para aplicarlo en WordPress debemos utilizar este código (PHP):

1.    <div class="shield">
2.        <p class=”date month<?php the_time(’n'); ?>”>
3.            <span><?php the_time(’F'); ?></span>
4.            <?php the_time(’j'); ?>
5.            <span><?php the_time(’S'); ?></span>
6.        </p>
7.        <div class=”commentscloud”>
8.            <?php comments_number(’0′, ‘1′, ‘%’); ?>
9.        </div>
10.    </div>

Espero que lo pongan en práctica.

Hagan clic aquí para ver una demostración.

Fuente: Xyberneticos