Tutoriales Blogger: personalizando los títulos de los gadgets

Hola!!

hoy os traigo un dos tutoriales muy facilitos y que hacen que nuestro blog esté más bonito y más como queremos. Estos tres tutoriales en concreto, sirven para personalizar los títulos de los gadgets. Vamos a ello :)

Mini Tutorial 1: Centrar los títulos de los gadgets

Esté está chupado :) Es tan tan tan fácil como ir a Plantilla → Pichar en el botón Personalizar → Seleccionar en el menú de arriba a la izquierda Avanzado → y Seleccionar Añadir CSS

Y en el cuadro de añadir código pegamos lo siguiente:

.widget .title { text-align:center; } /**Título de gadget centrado**/

Y ya está, primera cosa hecha :) 

Y como este es tan cortito, aprovecho para comentaros como funciona el "Añadir CSS". Lo único que hace, es facilitarnos la edición de nuestra plantilla HTML, es decir, lo que nosotros escribimos aquí, se pega directamente en nuestra plantilla. Por tanto, si queréis borrar alguno de estos cambios y el código que habéis añadido no aparece en el cuadro de añadir código CSS por cualquier motivo, vais a vuestra plantilla (edición HTML) y buscáis lo que habéis puesto. Pero claro, ¿y si no me acuerdo cómo era? Pues para eso pongo yo los comentarios (lo que aparece entre /** y **/). Que ya no queréis vuestros títulos centrados, pues buscáis en vuestra plantilla "título de gadget centrado", y voilà, listo!

Mini tutorial 2: Adornar el título de gadget

Y este más de lo mismo, volvemos a realizar los pasos anteriores y ahora el código que debemos pegar es:

.sidebar h2{ /**Adornar el título del gadget*/

background: #cccccc; /*Color de fondo*/

border-top: 1px solid #000000; /**Borde Superior**/

border-bottom: 1px solid #000000; /**Borde Inferior**/

border-left: 1px solid #000000; /**Borde Izquierdo**/

border-right: 1px solid #000000; /**Borde Derecho**/

}

Y cómo lo customizo?? Bien, al pegar el código tal cual, nuestros títulos de gadgets aparecerán así:

Aquí es donde entra en juego lo que viene detras de cada nombre, lo que en el código que os he puesto está en diferentes colores. Empezamos:

Background, es el fondo del título, y podéis cambiar su color, detrás de # debéis poner el código HTML del color que queréis. En este caso está en color gris. Si no queréis que tenga color de fondo, borráis esta línea y listo!

Los bordes, llamados border-xxxxx (en la figura tenéis cuál es cuál). Aquí podéis cambiar varias cosas:

• La anchura, que viene dado por el número que pongáis antes de px (son los píxeles). En este caso están a 1, si los queréis más gorditos pues vais aumentado este valor.

• El estilo de línea, que en el código viene dado por la palabra solid, pero que podéis cambiar según queráis. Los estilos que podéis encontrar son:

Por ejemplo, si queréis que las líneas sean punteadas, sustituis solid por dotted, y ya está así de fácil!

• Por último, el color, pues igual que para el fondo, es el que viene después de #, lo cambiáis y listo :D

Igual que en el fondo, si queréis que un borde no aparezca, borráis esa línea y listo (pero si la queréis conservar por si luego os arrepentís, cambiad la anchura y ponedla a 0px).

Habéis visto qué fácil??!! :D:D Por poneros un ejemplo, los títulos de mis gadgets tienen este código:

.sidebar h2{  /**Adornar el título del gadget*/

border-top: 3px dotted #ff9c8f; 

border-bottom: 3px dotted #ff9c8f;

}

¿Y puedo tener estas dos modificaciones juntas?

La respuesta correcta es sí! Tan fácil como pegar este código:

.sidebar h2{ /**Adornar el título del gadget*/

background: #cccccc; /*Color de fondo*/

border-top: 1px solid #000000; /**Borde Superior**/

border-bottom: 1px solid #000000; /**Borde Inferior**/

border-left: 1px solid #000000; /**Borde Izquierdo**/

border-left: 1px solid #000000; /**Borde Derecho**/

text-align: center; /**Texto centrado**/

}

Como veis es tan sencillo como incluir en el código del mini-tutorial anterior la última línea.

Que lo queréis a la derecha, pues sustituis center por right, que lo queréis a la izquierda, pues por left.

Mini tutorial 3: Poner una imagen de fondo en el título del gadget

Bueno y qué pasa si yo prefiero tener una imagen de fondo en el título? Pues también se puedo!

Que quieres por ejemplo poner una imagen de fondo que te gusta o una imagen en mosaico (que quedan chulísimas) Pues hecho, aunque debes tener cuidado y tener la imagen en un tamaño adecuado (en torno a 100px)  pues sino queda muy grande y no se ve.

Debéis añadir la última línea de código y pegar el enlace a la imagen:

.sidebar h2{

border-top: 1px solid #000000; /**Borde Superior**/

border-bottom: 1px solid #000000; /**Borde Inferior**/

border-left: 1px solid #000000; /**Borde Izquierdo**/

border-left: 1px solid #000000; /**Borde Derecho**/

text-align: center; /**Texto centrado**/

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

}

y listo !!