1 sept. 2015

[Tutorial] Personalizar gadget #1

Hiiii! Como están? Hoy os traigo un tutorial para personalizar los gadgets de tu blog! Es el que he usado para la nueva plantilla de mi blog Sweet Love ^^ Así quedará una vez hagas el tutorial~ 
Os gusta? Pues empecemos!
Primero, vamos a Plantilla > Editar HTML > y buscamos [Ctrl + F]
/* Widgets
----------------------------------------------- */
Al encontrarlo ponemos el siguiente código debajo, que es para personalizar el titulo del gadget:
.sidebar .widget h2 {
padding-bottom: 9px;
padding-top: 9px;
background:  #ee3d3d;  */Color de fondo/*
box-shadow: inset 0 0 10px #FFf, 0 0 5px #FFf;
border-radius:2px; */Redondeado/*
padding-left: 15px;
padding-right: 15px;
border: 1px solid #ee3d3d; */Color del borde/*
line-height: 8px;
margin-bottom: 5px;
font-size: 15px; */Tamaño de la letra/*
color: #fff; */Color de la letra del titulo/*
text-align: center;
}
A continuación, guardamos, y nos vamos a Plantilla > Personalizar > Avanzado > CSS. Y entonces ponemos este código para editar el cuerpo del gadget: 
.sidebar .widget {
background: #f3f3f3 !important; */Color del fondo/*
border-bottom: 5px solid #d07979!important; *Tamaño/Color del borde inferior*
font-family: Delius!important;
border: 1px dashed #aeaeae; */Tamaño/Forma/Color del contorno/*
border-top: 0px solid #fff;
font-size: 14px!important;
font-weight: norma!importantl;
}
Al guardar, nos aparecera el gadget justo como en mi ejemplo! :D Sencillo verdad?
Espero que os guste! Bye bye!

4 comentarios: