Para acabar con las explicaciones sobre como implementar los post resumidos vamos a ver hoy un último detalle importante. Como lo que hacemos es achicar todo el espacio de publicación, si no tomemos algunas precauciones, habrá una serie de elementos incorporados a esas entradas que se saldrán de los márgenes, provocando que el aspecto visual de estas entradas no sea el que pretendemos. Me refiero a elementos como imágenes, videos, etc, elementos que tienen unas dimensiones superiores a las que hemos indicado para los post resumidos.

La forma mas sencilla de solucionar esto, no queremos complicarnos la vida, es dejar que todo se cargue pero indicarle a los navegadores lo que queramos que se vea en este tipo de entrada.

En las entradas anteriores lo que hemos hecho ha sido crear dos tipos de entradas y usando los condicionales le hemos indicado donde queremos mostrar cada tipo de entrada. Es decir le hemos dicho que los posts resumidos irán en la página principal y le hemos configurado el aspecto con el css, no hemos tocado el resto de las páginas individuales por lo que su aspecto y contenido no variara de lo que antes teníamos.

Ahora le vamos a indicar lo que no queremos mostrar en los post resumidos y eso se refleja en esta parte del código css implementado

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

Con esto le decimos que cualquier elemento que tenga las etiquetas remarcadas en rojo, no se vera en esas entradas y tendremos solucionado el problema. No están todas las posibles incluidas pero se pueden ir añadiendo conforme os sea necesario.

Te interesa

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