Titulo de entradas con imagen flotante

Me consulta Walter sobre la forma de modificar los títulos de sus entradas tal como ha visto en otro blog.
Me ha parecido una forma muy original de mostrarlos, así que voy a explicar la manera de conseguir algo similar a lo que Walter me apuntaba:



[1] En primer lugar aplicaremos una imagen de fondo a nuestros titulos.
Nos situamos en la pestaña "Edición" de nuestro panel de Blogger y pinchamos en "Edición Html".
A continuación marcamos "Expandir la plantillas de artilugios" y localizamos este código:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Tendréis en cuenta que cuando pongo los códigos de ejemplo, estoy refiriendome siempre a las plantillas originales de Blogger, ya que en otras plantillas podría ser distinto (PostHead, post-title, etc.)

[2] Aplicamos la imagen de fondo al título, un borde que resalte dicha imagen y le damos una separación al título del borde de la imagen en su parte izquierda (para evitar que la imagen flote sobre el texto), de tal manera que el código anterior pasaría a quedar así:

.post h3 {background: url(URL_DE_LA_IMAGEN_DE_FONDO) repeat-x bottom;
border: 2px solid #224797;
margin:.25em 0 0;
padding:0 0 4px 50px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


En padding: 0 0 4px 50px; y más concretamente en donde dice 50px, es donde aplicamos el valor que marcará la separación del título, lo más adecuado sería ponerle el mismo valor que el ancho de la imagen.

En font-size:140%; controlamos el tamaños de la fuente del título.

En border: 2px solid #224797; modificamos el ancho (2px), el tipo (solid) y el color (#224797) del borde.

Por supuesto que en "URL_DE_LA_IMAGEN_DE_FONDO" hemos de colocar la url de la imagen.

[3] Guardamos los cambios.

[4] Ahora colocaremos sobre la imagen de fondo de nuestro título, la imagen flotante como en el ejemplo (la chica).
Lo más adecuado en este caso es usar una imagen con fondo transparente, aunque una imagen "normal" tampoco quedará mal siempre que su tamaño sea el adecuado, en el ejemplo la imagen que le he tomado prestada a Walter mide 50 x 50 pixeles.

Esto vamos a hacerlo directamente en el html de la plantilla, así que nos situamos en "Edición HTML" y expandimos las plantillas de artilugios para localizar esta línea:

<b:includable id='post' var='post'>

Justo debajo de esa línea añadimos el código necesario para mostrar la imagen:

<img alt='Tema ' border='0' src='URL_DE_LA_IMAGEN' style=' margin: 0px 4px 0px 10px; float: left; '/>

Ahí mismo podremos modificar el margin para situar nuestra imagen en el lugar exacto que queramos respecto al título.

Nota:
Tened en cuenta que el resultado dependerá de algunos factores como el ancho de las entradas, el tamaño del título, etc... con esto solo intento orientaros para que os hagáis una idea de lo que podríais lograr con un poco de paciencia.

0 comentarios:

Publicar un comentario