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>
www.elserver.com
Hosting Web 2.0 - La Empresa que sobrepasa todas las expectativas...
www.zidalgo.com
Premium wordpress themes for your blog! - Brad Mahaffey
www.Tilidom.com
Almacenar toda tu informacion, incluyendo fotos, videos y musica.
Nebel
25 - 08 - 2008
Permalink
Creo que implementare esto en mi blog ;)... Se veria muy elegante jejeje...
Saludos, Nikko!....
Resaltar la fecha y comentaro en post de Wordpress | Blogs Bazaar
25 - 08 - 2008
Permalink
[...] Xyberneticos Rediseño de [...]
Íconos con la fecha y la cantidad de comentarios de tu blog - elWebmaster.com
25 - 08 - 2008
Permalink
[...] Fuente: Xyberneticos [...]
Asuncion
25 - 08 - 2008
Permalink
Soluciones Globales de Internet
Hosting, Dominios, Tiendas Virtuales, Alojamientos, Relojes, Regalos de Empresa, Minimotos, Motos, Cascos.
Websites tagged "fechas" on Postsaver
25 - 08 - 2008
Permalink
[...] - 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 [...]
Recent Faves Tagged With "tipo" : MyNetFaves
25 - 08 - 2008
Permalink
[...] 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 [...]
Añadir iconos de fechas y burbujas con números de comentarios en los link hacia tus post « aprendiendo a aprender
25 - 08 - 2008
Permalink
[...] demo en Yoast - Mas info css-tricks Nuestro estilo PLAIN TEXT [...]