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 CSS, Diseño Web, WordPress Leido 3,286 Veces

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:
p.date {
    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; }

/************************************************

*   Burbuja con numero de comentarios*

************************************************/
.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:
<div class="shield">
    <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>

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1098 posts en Xyberneticos - Leer todos mis articulos Nikko

  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: