Recent posts with date

<div id="recent-posts" class="widget">
<div class="widget-inner">
<div class="widgettitle">
<h3><a href="<?php bloginfo('url'); ?>/blog">News From Our Blog</a></h3>
</div>
<?php query_posts('&showposts=3'); ?>
<?php if (have_posts()) : ?>
<ul>
<?php while (have_posts()) : the_post(); $preview = get_post_meta($post->ID, 'preview', true); ?>
<li class="clearfix">
<div class="date">
<div class="month"><?php the_time('M'); ?></div>
<div class="day"><?php the_time('jS'); ?></div>
<div class="year"><?php the_time('Y'); ?></div>
</div>
<div class="info">
<h4><a href="<?php the_permalink() ?>" class="title"><?php the_title(); ?></a></h4>
<?php the_excerpt_reloaded(7, '<a>', 'excerpt', true, '&hellip;read more', false, 1, true, false, 'span', '', false); ?>
</div>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_query() ?>
</div>
</div>

//The CSS Part
#recent-posts p { padding-bottom: 0; }
#recent-posts li { padding-bottom: 1.1em; overflow: hidden; clear: both; }
#recent-posts .date { border: 1px solid #bbb; width: 45px; text-align: center; background: #fff; float: left; }
#recent-posts .date .month { padding: 2px; background: #990E01; color: #fff; text-transform: uppercase; font-size: .8em; }
#recent-posts .date .day { padding: 0 0 2px 0; font-size: 1.3em; }
#recent-posts .date .year { padding: 0 0 2px 0; background: #eee; border-top: 1px solid #bbb; font-size: .85em; }
#recent-posts .info { float: right; width: 205px; }
#recent-posts .info h4 { padding: 0 0 .15em 0; }

0 Comments

You must be logged in to post a comment.