Tutorial:Personalizar gadget 1 ♥

Hola ,,ya se empesaron a anotarse los participantes para el concurso wuhu si quieres participar en el concurso clic aqui ¡ .Bueno hoy les traigo un tutorial para personalizar tu gadget,yo le dare un estilo de gadget y ustedes pueden modificar los colores y otras cositas 

Aqui una imagen del primer estilo de gadgets :

Este estilo es el que uso yo mayormente como abran notado ,en mis dos ultimas plantillas y en esta plantilla masomenos ,bueno este estilo le agrege mas cosas ,como veran en la imagen tiene debajo de titulo unos puntitos ,y tambien le puse que al pasar el cursor sobre los bordes(las lineas celeste y rosada) cambian de color al pasar sobre ellas,no pude aser un gif para que lo vean por que taba apresurada 

bueno si les gusto sigan los siguientes pasos :

 Paso 1: Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>

Pegar el siguiente codigo antes de ]]></b:skin> 

En caso de que no salga bien ,despues de presionar Ctrl +F pones /* Widgets

----- y debajo borras todo asta }.Aqui un ejemplo:

Y colocas el siguiente codigo debajo de  * Widgets

-----
(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

.sidebar .widget {

background: #fff !important;

 border-bottom: 5px solid #fcc7c7!important;

 border-top: 5px solid #afeeee!important;

-webkit-border-radius: 10px!important;

font-family: Delius!important;

font-size: 14px!important;

text-align: center!important;

font-weight: norma!importantl;

padding: 1px!important;

-webkit-transition-duration: .80s;

}

.sidebar .widget:hover {

background:  #fff!important;

-webkit-border-radius: 10px!important;

 border-bottom: 5px solid #afeeee!important;

 border-top: 5px solid  #fcc7c7!important;

font-family: Delius!important;

font-size: 14px;

text-align: center;

font-weight: normal;

padding: 1px;

-webkit-transition-duration: .80s;}

.sidebar h2 {

font: normal 22px 'Emerald',Trebuchet,sans-serif;

color: #6FCFFF!important;

text-align: center!important;

margin-top: 3px!important;

margin-bottom: 2px!important;

border-bottom: 3px dotted #FFA6B2!important;

}

@font-face {

font-family: 'Emerald';

src: url('http://static.tumblr.com/z7rr9hy/SJNmixual/simplicity.ttf');

}

Paso 2:Personalizar colores y otros :

#fff:Color del fondo de los gadgets 

5:Tamaño del borde de la parte de abajo en los  gadgets

#fcc7c7::Color del borde de la parte de abajo en los gadgets(Ejemplo de la imagen:es la linea rosada que se encuentra abajo)

5:Tamaño del borde de la parte de arriba en los  gadgets

#afeeee:Color del borde de la parte de arriba en los gadgets(Ejemplo de la imagen:es la linea celeste que se encuentra arriba)

10:Si aumenta la cantidad las esquinas de los gadgets se redondaran mas y si disminuye pasa lo contrario

#fff:Color del fondo de los gadgets al pasar el cursor

5:Tamaño del borde de la parte de abajo al pasar el cursor

#afeeee:Color del borde de la parte de abajo en los gadgets al pasar el cursor

5:Tamaño del borde de la parte de arriba al pasar el cursor

#fcc7c7:Color del borde la parte de arriba en los gadgets al pasar el cursor

#6FCFFF:Color de la letra del titulo de los gadgets

3:Tamaño del borde de la linea bajo el titulo

#FFA6B2:Color de la linea bajo el titulo

NUEVO CODIGO IMPORTANTE :

!important: Cualquier código que vaya acompañada de un !important tendrá mayor importancia que cualquier otro código que tengas.

Pones primero vista previa para que veas como quedo   Y si no funciona dejame un comentario sobre cualquier duda o problema .