Iconos de fechas con links
Date Badges and Comment Bubbles for Your Blog, una atractiva forma para resaltar nuestros últimos artículos, añadiendo icono de fechas y, a continuación, burbujas en el numero de nuestros comentarios. La idea es muy original, y sin duda, ayudara a resaltar aun más el contenido de este tipo de secciones destinadas para este fin.
Ver demo en Yoast – Mas info css-tricks
Nuestro estilo:
CSS:
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}
p.date span { display: none; }
/************************************************
* iconos para cada mes *
************************************************/
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
/************************************************
.shield {
position: relative;
}
.commentscloud {
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;
}
Implementarlo en wordpress:
PHP:
<p class=“date month<?php the_time(‘n’); ?>”>
<span><?php the_time(‘F’); ?></span>
<?php the_time(‘j’); ?>
<span><?php the_time(‘S’); ?></span>
</p>
<div class=“commentscloud”>
<?php comments_number(‘0′, ‘1′, ‘%’); ?>
</div>
</div>