Newsletter

Tutoriales Blogger: Personalizar Títulos de Gadgets

25 de septiembre de 2015

Hola hermosos Lectores, en estos momentos me encuentro bastante ocupada con las clases por lo que me está costando sentarme a leer y escribir reseñas :( pero no quiero dejarlos abandonados por aqui, así que les traigo 3 mini tutoriales para que continúen embelleciendo su blog. Recuerden que ya hemos aprendido a:

 Instalar un Botón de Subir arriba
 Eliminar Barra de Navegación o Nabvar
 Centrar cabecera y páginas/menú
 Personalizar títulos de entradas



Mini Tutorial 1: Personalizar Títulos de Gadgets  

Para personalizar los títulos de los gadgets vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código (recuerda que si tienes otro código allí sólo tienes que dar un par de intros antes de pegar el siguiente 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-right1px solid #000000; /**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{
border-top: 1px solid #000000; /**Borde Superior**/
border-bottom: 1px solid #000000; /**Borde Inferior**/
border-left: 1px solid #000000; /**Borde Izquierdo**/
border-right1px solid #000000; /**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.


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:


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

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 así tienes tres formas distintas para personalizar tus gadgets, espero te sirvan estos pequeños trucos, si te gustó el post compártelo. 


Ross

4 comentarios:

  1. Muchas gracias por el tumoral.
    Yo no tengo ni idea de hacer estas cosas.... la verdad es que llevo ya algún tiempo en esto del blog y aun así no consigo hacer nada jajaja
    Menos mal que hay gente como tu que pone sus conocimientos a la vista de todos.
    Graacias !

    Un besoo
    Nos leemos

    ResponderEliminar
  2. Hola :3 ¿Cómo estás? Soy nueva en tu blog, y me he sumado ya mismito a tus seguidores. Tienes un blog muy interesante, así que estoy encantada de quedarme en él. Te espero en el mío, también me gustaría mucho tenerte por allí ❤

    Qué crack con este tutorial... yo para el html del blog soy un poco pato, así que agradezco mucho estas ayuditas guapa.

    Un fuerte abrazo,
    Eva.

    ResponderEliminar
  3. Hola!
    Genial el tutorial! Yo soy malísima con todo lo que suponga tocar el html asi que de momento dejo el blog como esta y no me arriesgo a cagarla :33
    Un beso :))

    ResponderEliminar