12 de febrero de 2013

Colocarle imágenes a los títulos de los gadgets

A pedido de uno de nuestros lectores es que decidí compartir esta entrada con ustedes.
El primer paso es identificar el ID del gadget al que se le quiere colocar la imágen, para ello entramos en  Plantilla | Edición de HTML y SIN marcar la casilla de expandir artilugios buscamos el gadget al que vamos a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.


<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.

Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:

#Label1 h2 {
background: url(URL de la imagen) left top;
color: #fff000;
}


Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.

Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:

#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}


De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imágen.
Ahora vamos a Diseño y damos click en Editar en el gadget al que le cambiamos el fondo y borramos el título del gadget, en su lugar escribe esto:
&nbsp;

De esta forma el título del gadget no se encimará con la imagen de fondo.

Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.


¡Saludos!

4 comentarios:

  1. Muchas Gracias me Sirvio Perfecto pero tengo una pregunta ¿como puedo mover la imagen hacia la derecha?

    mi pagina : http://dbeslaley.blogspot.com/

    ResponderEliminar
    Respuestas
    1. A qué te referís? Acabo de entrar a tu blog y las imágenes de los títulos de los gadgets están perfectamente centradas, se ven en el lugar justo. Si lo que querés es ensanchar el ancho de tu blog entonces debería cambiar los px en el width de tu blog :)

      Eliminar
  2. Tengo problemas para poner las imágenes y es que no sé donde ponerlo, porque yo no encuentro lo que dices el ]]>

    ResponderEliminar
    Respuestas
    1. Hola Meilin! No entendí. No encuentrasel "]]>"? Eso es algo que traen por defecto TODAS las plantillas. Si no es eso, qué es lo que no encuentras?

      Eliminar