Imagenes diferentes en cada titulo de entrada

Tweet

Hacia tiempo que me apetecía realizar esta idea, darle un look diferente a las entradas saliéndome del típico background igual para cada una de ellas sino que este fuese diferente para cada una. Tenia que ser una cosa simple de usar y la idea era muy sencilla, añadir esa imagen a cada post de forma normal y posicionarla debajo del titulo con CSS.

Añado la imagen a la entrada



y la posiciono con CSS



Para ello creo una clase en mi CSS que será la que añadiré a la imagen y añado algunas propiedades en la clase .post h3

.post h3 {
background: #000;
width: 500px;
filter:alpha(opacity=70);
opacity:.70;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
padding:10px 0 10px 10px;
position: relative;
z-index: 2;
margin:50px 0 0 0;
}

.post .foto {
position: absolute !important;
border: none !important;
background: none !important;
margin: -210px 0 0 -28px !important;
max-width: 530px !important;
max-height: 100px !important;
z-index: 1; !important }

Algunas consideraciones muy importantes, este código esta ajustado para mi plantilla, mi ancho del main-wrapper, etc por lo que cada uno deberá ajustar las propiedades margin, width y height a su plantilla.

Para que no resulte tan difícil veamos las propiedades que os interesan, las demás deberán permanecer igual.

.post h3 {
background: #000; ► fondo negro transparente que veis en la imagen
width: 500px; ► ancho total del titulo (letras)
filter:alpha(opacity=70); ► transparencia del fondo
opacity:.70;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
padding:10px 0 10px 10px; ► margenes interiores
position: relative;
z-index: 2;
margin:50px 0 0 0; ► margenes exteriores
}

.post .foto {
position: absolute !important;
border: none !important;
background: none !important;
margin: -210px 0 0 -28px !important; ► márgenes para subir o bajar la imagen
max-width: 530px !important; ► ancho que tendrá la imagen
max-height: 100px !important; ► alto que tendrá la imagen
z-index: 1; !important }

Seguramente deberéis ajustar el margen superior de vuestro main-wrapper

main-wrapper { margin: Xpx Xpx Xpx Xpx;}

Para usarlo solo debéis añadir una imagen al principio del todo de vuestra entrada y añadirle la clase .foto

<img class="foto" src="http://www.blogger.com/URL" />

Realmente podéis usar el código tal cual lo inserta Blogger en las entradas pero os recomiendo quitar la parte de href y todo el estilo (style) que pone Blogger por defecto.

Por ultimo procurad que el tamaño de las imágenes sea adecuado, sino se distorsionaran y el efecto de desluce.

Te recomendamos también

+ Artículos relacionados de Tutorial