tipscomen.jpg

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

  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. }

Implementarlo en wordpress

  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>

well cut trench that looks and fits better
hollister uk boreal canada goose parka Europe style wholesale

scottsdale the us hotels
burberry scarfShop And Feel Great Sporting Most Up