Para cerrar esta serie de entradas quiero profundizar en un par de detalles para que no tengáis problemas a la hora de implantar este sistema. Básicamente con lo visto hasta ahora los post resumidos los tendréis implementados pero vamos a ver algunos puntos referentes al diseño.

Como os indicaba en la entrada anterior, en este parte del código podríamos sustituir el color de fondo por una imagen

#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;
}

Para ello haríamos los siguientes cambios

#recent-posts .home-post {
float:left;
width:228px;
height:257px;
overflow:hidden;
background: url(URL ALOJAMIENTO IMAGEN FONDO) no-repeat;
font-size:11px;
line-height:15px;
color:#c6c6b9;
margin:0 12px 12px 0;
}


La imagen que yo uso de fondo es esta, para que os hagáis una idea



Como podéis comprobar ya tiene los bordes, el icono de comentarios y el degradado inferior implementados.

Otro aspecto a tener en cuenta es el del botón de leer mas, la imagen que usamos para el efecto hover realmente es una única imagen y jugamos con los margin para hacer el efecto. Puede doleros la cabeza buscando el problema si subís dos imágenes distintas. Esta es la imagen que yo uso



Como veis es una única imagen con los dos botones y en esta parte del código ajusto el margen para hacer que aparezca una u otra.

#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;
}


Estos dos aspectos son fundamentales para dejar el diseño a nuestro gusto. Mañana acabaremos esta serie viendo una última parte importante que nos sirve para definir lo que mostramos en esos post resumidos.

Te interesa

► Post Resumidos
► Post Resumidos 2
► Post Resumidos 3
► 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