25

Añadir iconos de fechas y burbujas con números de comentarios en los link hacia tus post

Publicado por Nikko el dia 25 Aug 2008 - Guardado en 662 Views CSS, WordPress, Diseño Web 662 Views

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

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

Implementarlo en wordpress

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>

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!
comentarios
  1. Nebel - Gravatar

    Nebel

    25 - 08 - 2008

    Permalink

    Creo que implementare esto en mi blog ;)... Se veria muy elegante jejeje...

    Saludos, Nikko!....

  2. [...] Xyberneticos Rediseño de [...]

  3. [...] Fuente: Xyberneticos [...]

  4. Asuncion - Gravatar

    Asuncion

    25 - 08 - 2008

    Permalink

    Soluciones Globales de Internet
    Hosting, Dominios, Tiendas Virtuales, Alojamientos, Relojes, Regalos de Empresa, Minimotos, Motos, Cascos.

  5. [...] - Añadir iconos de fechas y burbujas con números de comentarios en... saved by theurbanpiratex32008-09-15 - Rock Band: fechas y precios del lanzamiento en Europa saved [...]

  6. [...] public links >> tipo Añadir iconos de fechas y burbujas con números de comentarios en First saved by ninp | 1 days ago Espectaculares simulaciones de la explosión de una supernova [...]

  7. [...] demo en Yoast - Mas info css-tricks Nuestro estilo PLAIN TEXT [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: