Tutorial Blogger: Personalizar los títulos de los gadgets



Hola!!!
Hoy os traigo unos cuantos tutoriales de como editar y decorar los títulos de los Gadgets. Suerte!!!


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

Es tan fácil como ir a Plantilla Personalizar 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á! La primera cosa más fácil, echa! Si no queréis centrar los títulos, este apartado no hace falta que lo hagáis. 


Mini tutorial 2: Adornar/Decorar el título del gadget


Volvemos a realizar los pasos anteriores, pero esta vez pegamos 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-right: 1px solid #000000; /**Borde Derecho**/
}

Como siempre, podéis cambiar la anchura de los bordes, y el color. Yo el color lo hago con este programa; es muy fácil y sencillo; colorhexa

Y por si no lo sabéis, Solid se puede cambiar por lo siguiente: 


Solid                                                            
Dotted.........................................................
Dashed-------------------------------------
Double_____________________________

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



.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 **/
}

En realidad, es bastante sencillo solo hace falta tiempo y paciencia!

Mini tutorial 4: Poner una imagen al lado del título del gadget

Por último, este mini tutorial de como poner una magen al lado del título!!!


/**Imagen al lado del título de los gadgets**/
.sidebar h2{  
background: #ffffff url(URL de la imagen) no-repeat right;
border-top: 0px solid #000000; /**Borde Superior**/
border-bottom: 2px solid #000000; /**Borde Inferior**/
border-left: 0px solid #000000; /**Borde Izquierdo**/
border-right: 0px solid #000000; /**Borde Derecho**/
padding:5px; 
}

Right (derecha), es el lado donde se situará la imagen, lo podéis cambiar por left (izquierda).
Yo he Echo éste último, y así es como me ha quedado!


Hermosooo!! Jajajaja!
Comentad!
Mucha suerteee!!

11 comentarios:

  1. Hola!! Que bien me viene este post :)
    Te he nominado al LIEBSTER AWARD, pásate!!
    http://aliiinthewonderland.blogspot.com.es/2015/04/liebster-award.html
    Un beso!

    ResponderEliminar
  2. Gracias por el tutorial<3
    Me ha servido de mucho, de verdad así que desde ahora tienes un seguidor más.

    Saludos♥

    ResponderEliminar
  3. ¡¡me ha encantado el tutorial!! Voy a seguir husmeando por los otros tutoriales porque son muy utiles y estan muy bien explicados ¡¡gracias!!
    Ya te estoy siguiendo
    ¡nos leemos!

    ResponderEliminar
  4. Está DEMASIADO bueno el tutorial! Lo guardé en mis favoritos, permiso, te sigo! Llegué por la iniciativa Granitos de Arena y quedé encantada con tu blog, feliz de haberlo descubierto =)

    Saludos!

    ResponderEliminar
  5. Gracias por el tuto me fue genial, Saludos!!!

    ResponderEliminar
  6. Estupendo el tuto y fácil, así que me quedo por aquí como seguidora.
    Gracias por tu ayuda.
    Besotes.^^

    ResponderEliminar
  7. ¡Me encanta! Mil gracias por el tutorial. Venía buscando otra cosa, pero me resulta super interesante esto también.

    Un abrazo.

    ResponderEliminar
  8. Muchas graciasme ha servido!! :D
    hace falta mas blogs como este que si espliquen todo correctamente.

    Saludos!

    ResponderEliminar
  9. Me ayudo mucho el tutorial para darle una vista diferente a los títulos de los gadgets.

    ResponderEliminar
  10. you can use also Hex color codes for color codes

    ResponderEliminar

¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥ :$

Post nuevo Post antiguo Home