» [Tutorial blogger] Personalizar títulos gadgets

Buenas mis soñadores

Vengo con otro tutorial para blogger, que me han pedido via whatssap, que es, como dice el título de la entrada, personalizar los títulos de los gadgets de tu blog de blogger.

Para personalizar los títulos de los gadgets vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código

.sidebar h2{ /**Adornar el título del gadget*/
background: #d8e7dc; /*Color de fondo*/
border-top: 2px solid #b79a8f; /**Borde Superior**/
border-bottom: 2px solid #b79a8f; /**Borde Inferior**/
border-left: 2px solid #b79a8f; /**Borde Izquierdo**/
border-right: 2px solid #b79a8f; /**Borde Derecho**/
text-align: center; /**Texto centrado**/
}

Una vez pegas el código, los títulos de los gadgets aparecerán así:

Para Cambiar:

♥ Lo que está en Rojo: Son los colores (Fondo y Líneas) en hexadecimal.
♥ Lo que está en Verde: Es el ancho de la línea (si la quieres más ancha, aumenta el valor)
♥ Lo que está en Azul: Es el tipo de Línea
♥ Lo que está en morado: es para centrar los títulos, si no los quieres centrados solo tienes que borrar esta línea del código. 

Tipos de Líneas

Mini Tutorial 2: Colocar una imagen de fondo en los títulos de Gadgets

Si lo que quieres es colocar una imagen de fondo también lo puedes hacer, pero tienes que tener cuidado que la imagen no sea muy grande porque no se verá bien (en torno a los 100 px estaría bien). Para ello el código que debes pegar es el siguiente:

.sidebar h2{ /**Adornar el título del gadget*/
background: #d8e7dc; /*Color de fondo*/
border-top: 2px solid #b79a8f; /**Borde Superior**/
border-bottom: 2px solid #b79a8f; /**Borde Inferior**/
border-left: 2px solid #b79a8f; /**Borde Izquierdo**/
border-right: 2px solid #b79a8f; /**Borde Derecho**/
text-align: center; /**Texto centrado**/

background-image: url('URL de la imagen' ) ; /** Dirección de la Imagen **/

}

Este código tiene las mismas modificaciones que el código anterior, con el añadido que

♥ Lo que está en naranja: es la URL de la imagen.

Así es como quedaría, evidentemente usando una imagen que te guste a ti

Mini Tutorial 3: Colocar una imagen al lado del título de los gadgets

Para este paso también se debe tener un especial cuidado con el tamaño de las imagenes si quieres que te queden bien, en el siguiente ejemplo yo utilice una imagen de 40 px y el resultado es el siguiente:

Si quieres aprender a hacerlo sólo tienes que utilizar el siguiente código:

.sidebar h2{ /**Adornar el título del gadget*/
background: #ffffff url(URL de la imagen) no-repeat right;

background: #d8e7dc; /*Color de fondo*/
border-bottom: 2px solid #b79a8f; /**Borde Inferior**/
text-align: center; /**Texto centrado**/

}

Cambios:

Para este código sólo debes cambiar lo que esta en color:

♥ Lo que está en naranja: es la URL de la imagen

♥ Lo que está en azul: es el lugar donde quieres la imagen, Si quieres que este a la izquierda cámbialo pos Left.

♥ Lo que está en rojo: es el ancho de la Línea de abajo

♥ Lo que está es verde: es el color de la línea.

Y quedaría así, cuando eligas la imagen