jueves, 20 de julio de 2017

Tutorial - Personalizar el título de los gadgets/ Parte II



Hola, el día de hoy les traigo un nuevo tutorial, es la parte II de personalización de los títulos de los gadgets, en estos últimos meses he estado probando nuevos diseños , así que por eso el día de hoy les traigo algunos diseños que espero que les gusten.

Personalizar los títulos de los gadgets / parte II


Lo primero que tenemos que hacer es muy fácil, antes de hacer cualquier cambio a nuestro blog tenemos que descargar nuestra plantilla en caso de que ocurra algo. Para ello seguimos los siguientes pasos:









Ahora que ya hemos guardado una copia de seguridad de nuestro blog ahora ya podemos empezar a modificando. La primera idea que quiero mostrarles es el efecto degradado.

Para ello seguiremos los siguientes pasos :










Este es el código que se debe colocar para poder tener un efecto degradado

.sidebar h2{ /*Adornar el título del gadget*/
background: linear-gradient(#CC6699,#FF9999 ); /*Color de fondo degradado*/
text-align: center; /* Para que el título quede en el centro */
color: #000000 !important;/*Color de fuente*/
border-top: 0px inset #000000; /**Color del borde Superior**/
border-bottom: 0px inset #0000000; /**Color del borde Inferior**/
border-left: 0px double #000000; /**Color del borde Izquierdo**/
border-right: 0px double #000000; /**Color del borde Derecho**/
padding: 6px 0 6px 2px; /* distancia arriba, distancia derecha, distancia abajo, distancia izquierda */
text-transform: uppercase; /*Para que el texto quede en mayúsculas*/
}

Ahora sólo debemos dar en la opción aplicar al blog y finalmente vamos a ver blog. Y el resultado sería el siguiente: 


El siguiente código es para poner una imagen de fondo, el procedimiento es similar , pero el código es diferente .

.sidebar h2{ /*Adornar el título del gadget*/
background-image: url('url de la imagen'); /*dirección de la imagen */
text-align: center; /* Título en el centro */
border-top: 0px inset #000000; /**Borde Superior**/
border-bottom: 0px inset #0000000; /**Borde Inferior**/
border-left: 0px double #000000; /**Borde Izquierdo**/
border-right: 0px double #000000; /**Borde Derecho**/
text-transform: uppercase; /*Para que quede el texto en mayúsculas*/
}

El resultado es este:
Bueno, espero que esto pueda servirles y que les gusten. Por ahora me despido ,pero seguiré estando actualizando esta sección.

3 comentarios:

  1. Hola!!! Cuando llegue a mi casa tratare de hacerlo, gracias por él tutorías. Besos

    ResponderEliminar
  2. Holaaaa❤❤❤❤...
    Creo que estaba esperando la siguiente parte para poder cambiarlo🙊🙊jajaja
    Muchas gracias❤
    Más tarde cuando en la compu, lo pruebo...

    Pd: puedes subir una donde explique cómo personalizar el título de la entrada, por fa xc...
    Eso De ponerlo centrado y así...

    ❤🖑😻

    ResponderEliminar
  3. ¡Hola!
    Muchísimas gracias por este tutorial, llevaba meses viendo blogs con estos diseños en sus títulos y simplemente no entendía como lo hacían.

    ¡Saludos!

    ResponderEliminar

El blog se alimenta de los comentarios,estaré muy agradecida de leer tu opinión, pero recuerda:"Siempre hay que ser respetuoso con los demás".