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.
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

5 comentarios:

  1. OOHH!! bravo, bravísimo, muy bueno el truco.

    Como nos tienes acostumbrados...

    Saludos!!

    Por cierto...mañana (por hoy) es Jueves ¿no? ejem...

    ★Iván.

    ResponderEliminar
  2. Por cierto... bribonazo... acabo de verlo, con nocturnidad y alevosía...el qué? ya lo sabes, el post está de escándalo, pero sabes que no es de eso de lo que hablo ;)

    Muchas Gracias

    ★Iván (otra vez, sí)

    ResponderEliminar
  3. Esta idea me ha gustado mucho. No sabía qué hacer con las cabeceras de los posts para mi nuevo diseño, y me has dado un excelente punto de partida.

    La aplicaré a mi nuevo diseño, añadiéndole un poco mi propio estilo... Eso sí, eso obliga a quebrarse un poco la cabeza para cada post, ¿verdad? Y sólo va a servir a partir del primer post que escriba con el nuevo diseño o desde que aplique esta solución... O preparar las más de 100 imágenes que necesito para todos mis posts antiguos....

    ...Me parece una locura, creo que para mi caso lo mejor sería hacer las cinco o seis imágenes que necesitaría para cada sección del blog, y para algún post en especial, hacer una nueva y ya está.

    ResponderEliminar
  4. explica mas descritiva esque soy nuevo y no se donde pegar lo que dices

    ResponderEliminar
  5. T0010, etiqueto mis entradas por principiantes, intermedio y avanzado..te recomiendo que enpieces por principiantes, no tengas prisas por colocar cosas en tu blog ☺☺☺

    ResponderEliminar