Tras lo publicado en la entrada anterior tenemos la plantilla lista para añadirle las propiedades a nuestro CSS y que se vea de la forma prevista.

Para ello editamos nuestra plantilla y antes de ]]></b:skin> pegamos

/* recent posts */

#recent-posts {
padding:0 0 20px;
}
#recent-posts .home-post {
float:left;
width:228px;
height:257px;
overflow:hidden;
background:#000;
border: 1px solid #fff;
font-size:11px;
line-height:15px;
color:#c6c6b9;
margin:0 12px 12px 0;
}
#recent-posts .upper {
height:205px;
overflow:hidden;
padding:14px 18px 0;
position:relative;
}
#recent-posts .fade {
position:absolute;
top:200px;
left:5px;
width:218px;
height:20px;
background:url(URL IMAGEN TRANSPARENCIA) no-repeat bottom;
}
#recent-posts .home-post .upper .intro-post {
margin:8px 0;
text-align: justify;
}
#recent-posts .home-post .upper .intro-post p,
#recent-posts .home-post .upper .intro-post span,
#recent-posts .home-post .upper .intro-post div
{
font-size:11px;
font-weight:normal;
text-decoration:none;
font-style:normal;
padding:0;
margin:0;
display:inline;
}
#recent-posts .home-post .upper .intro-post sub,
#recent-posts .home-post .upper .intro-post sup,
#recent-posts .home-post .upper .intro-post b,
#recent-posts .home-post .upper .intro-post strong,
#recent-posts .home-post .upper .intro-post em,
#recent-posts .home-post .upper .intro-post u
{
font-size:11px;
font-weight:normal;
text-decoration:none;
font-style:normal;
}
#recent-posts .home-post .upper .intro-post h1,
#recent-posts .home-post .upper .intro-post h2,
#recent-posts .home-post .upper .intro-post h3,
#recent-posts .home-post .upper .intro-post h4,
#recent-posts .home-post .upper .intro-post h5,
#recent-posts .home-post .upper .intro-post h6,
#recent-posts .home-post .upper .intro-post hr,
#recent-posts .home-post .upper .intro-post blockquote,
#recent-posts .home-post .upper .intro-post pre,
#recent-posts .home-post .upper .intro-post code,
#recent-posts .home-post .upper .intro-post br,
#recent-posts .home-post .upper .intro-post img,
#recent-posts .home-post .upper .intro-post object,
#recent-posts .home-post .upper .intro-post embed,
#recent-posts .home-post .upper .intro-post param,
#recent-posts .home-post .upper .intro-post iframe,
#recent-posts .home-post .upper .intro-post .codeview
{
display:none;
}
#recent-posts .home-post .upper .intro-post a{
color:#ac1f1f;
}
#recent-posts .home-post h3 {
background: #000;
border: 1px solid #fff;
padding:0 0 2px 52px;
height: 45px;
margin:0;
color:#efeee8;
font-size:12px;
font-weight:normal;
}
#recent-posts .home-post h3 a {
color:#efeee8;
text-decoration:none;
}
#recent-posts .home-post h3 a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #979579;
}
#recent-posts .home-post .meta {
font-size:10px;
color:#939072;
line-height:12px;
display:block;
padding:3px 0 0;
}
#recent-posts .home-post .meta a {
color:#939072;
text-decoration:none;
border-bottom:1px solid #49483c;
}
#recent-posts .home-post .meta a:hover, #recent-posts .lower-meta a:hover {
color:#efeee8;
text-decoration:none;
border-bottom:1px solid #efeee8;
}
#recent-posts .btn-readon a {
display:block;
float:right;
width:110px;
height:25px;
background:url(URL BOTON LEER MAS) no-repeat 5px 5px;
font-size:10px;
overflow:hidden;
text-indent:-400px;
margin:10px 0 0 0;
}
#recent-posts .btn-readon a:hover {
background:url(URL BOTON LEER MAS AL PASAR EL MOUSE) no-repeat 5px -19px;
}
#recent-posts .lower-meta a {
font-size:10px;
display:block;
float:left;
padding:18px 0 0 34px;
color:#fff;
line-height:12px;
border-style:none;
}
#recent-posts .lower-meta a:hover {
color:#ac1f1f;
border-style:none;
}

Veamos algunas partes importantes para darle el aspecto que queramos, vamos a resaltar, por el momento, las partes que considero que mas interesan.

/* recent posts */

#recent-posts {
padding:0 0 20px;
}
#recent-posts .home-post {
float:left;
width:228px; ◄ Ancho que tendran nuestra entradas
height:257px; ◄ Alto de las entradas
overflow:hidden;
background:#000; ◄ Fondo que podríamos sustituir por una imagen
border: 1px solid #fff; ◄ Asignamos bordes a las entradas
font-size:11px;
line-height:15px;
color:#c6c6b9;
margin:0 12px 12px 0;
}
#recent-posts .upper {
height:205px;
overflow:hidden;
padding:14px 18px 0;
position:relative;
}
#recent-posts .fade { ◄ Esta parte nos permite darle un efecto traslucido al final de la entrada
position:absolute;
top:200px;
left:5px;
width:218px;
height:20px;
background:url(URL IMAGEN TRANSPARENCIA) no-repeat bottom; ◄ Imagen para el efecto traslúcido
}
#recent-posts .home-post .upper .intro-post {
margin:8px 0;
text-align: justify;
}
#recent-posts .home-post .upper .intro-post p,
#recent-posts .home-post .upper .intro-post span,
#recent-posts .home-post .upper .intro-post div
{
font-size:11px;
font-weight:normal;
text-decoration:none;
font-style:normal;
padding:0;
margin:0;
display:inline;
}
#recent-posts .home-post .upper .intro-post sub,
#recent-posts .home-post .upper .intro-post sup,
#recent-posts .home-post .upper .intro-post b,
#recent-posts .home-post .upper .intro-post strong,
#recent-posts .home-post .upper .intro-post em,
#recent-posts .home-post .upper .intro-post u
{
font-size:11px;
font-weight:normal;
text-decoration:none;
font-style:normal;
}
#recent-posts .home-post .upper .intro-post h1,
#recent-posts .home-post .upper .intro-post h2,
#recent-posts .home-post .upper .intro-post h3,
#recent-posts .home-post .upper .intro-post h4,
#recent-posts .home-post .upper .intro-post h5,
#recent-posts .home-post .upper .intro-post h6,
#recent-posts .home-post .upper .intro-post hr,
#recent-posts .home-post .upper .intro-post blockquote,
#recent-posts .home-post .upper .intro-post pre,
#recent-posts .home-post .upper .intro-post code,
#recent-posts .home-post .upper .intro-post br,
#recent-posts .home-post .upper .intro-post img,
#recent-posts .home-post .upper .intro-post object,
#recent-posts .home-post .upper .intro-post embed,
#recent-posts .home-post .upper .intro-post param,
#recent-posts .home-post .upper .intro-post iframe,
#recent-posts .home-post .upper .intro-post .codeview
{
display:none;
}
#recent-posts .home-post .upper .intro-post a{
color:#ac1f1f;
}
#recent-posts .home-post h3 { ◄ Parte correspondiente al titulo de la entrada
background: #000;
border: 1px solid #fff;
padding:0 0 2px 52px;
height: 45px;
margin:0;
color:#efeee8;
font-size:12px;
font-weight:normal;
}
#recent-posts .home-post h3 a {
color:#efeee8;
text-decoration:none;
}
#recent-posts .home-post h3 a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #979579;
}
#recent-posts .home-post .meta {
font-size:10px;
color:#939072;
line-height:12px;
display:block;
padding:3px 0 0;
}
#recent-posts .home-post .meta a {
color:#939072;
text-decoration:none;
border-bottom:1px solid #49483c;
}
#recent-posts .home-post .meta a:hover, #recent-posts .lower-meta a:hover {
color:#efeee8;
text-decoration:none;
border-bottom:1px solid #efeee8;
}
#recent-posts .btn-readon a {
display:block;
float:right;
width:110px;
height:25px;
background:url(URL BOTON LEER MAS) no-repeat 5px 5px;
font-size:10px;
overflow:hidden;
text-indent:-400px;
margin:10px 0 0 0;
}
#recent-posts .btn-readon a:hover {
background:url(URL BOTON LEER MAS AL PASAR EL MOUSE) no-repeat 5px -19px;
}
#recent-posts .lower-meta a {
font-size:10px;
display:block;
float:left;
padding:18px 0 0 34px;
color:#fff;
line-height:12px;
border-style:none;
}
#recent-posts .lower-meta a:hover {
color:#ac1f1f;
border-style:none;
}


Mañana explicare algún otro detalle en profundidad para que podéis entender otras partes del código.

Te interesa

► Post Resumidos
► Post Resumidos 2
► Post Resumidos 4
► Post Resumidos 5
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también