Tutorial: Colocar gadgets separados ♥

Hola a todas ,estoy algo cansada ayer me amanecí  haciendo un plano de una casa  termine como las 7 am y luego me dormí al toque ,me quede seca ,se sentía rico la camita ,me dolía mi cuellito y mis huesitos y la cama me calmaba. Ahorita estoy con los ojos un poco rojos por no dormir tanto jaja me levante alas 3 pm y no había nadies en la casa me dejaron nota donde estaba mi comida , me dejaron solitajeje . Bueno hoy me pidieron un tutorial de como colocar gadget separados , aqui les dejo una imagen a lo que refiero 

Para Plantilla Basica o Blogger: Ir a Plantilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te apareció .sidebar .widget {

luego abajito algunos codigos ,depende de su plantilla ,por ejemplo a mi me sale asi : 

lo que esta seleccionado con azul lo borrare y lo remplazare por el siguiente codigo :

background: #fff !important;/*Color de fondo*/
 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/
font-size: 14px !important;/*Tamaño de la letra del gadget*/
text-align: center !important;
font-weight: normal !important;
padding: 1px !important;

Si no les gusta los bordes ,pueden quitarlo ,borrando el siguiente codigo

 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/

Si no quieres borde redondeados quita el siguiente codigo :

-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/

Pero para que noten que los gadget tan separados añádele :

borde:2px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/

Notita:

Para los que no encontraron .sidebar .widget {

Ir a Plantilla/Editar HTML / Presionas CTRL+F y colocas en la cajita que te apareció ]]></b:skin>

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

.sidebar .widget {
background: #fff !important;/*Color de fondo*/
 border-bottom: 5px solid #fcc7c7 !important;/*Tamaño del borde,Tipo de borde,Color del borde parte inferior*/
 border-top: 5px solid #afeeee !important;/*Tamaño del borde,Tipo de borde,Color del borde parte superior*/
-webkit-border-radius: 10px !important;/*Tamaño del borde redondeado*/
font-size: 14px !important;/*Tamaño de la letra del gadget*/
text-align: center !important;
font-weight: normal !important;
padding: 1px !important;
}

Y bueno eso es todo  para los que les aparece una caja blanca o otro color atrás de los gadgets y quieren eliminarlo clic aqui para el tutorial : Tutorial :Eliminando fondos transparentes

-----------------------------------------------

Algunas capas tengan problemas ,capas no les funcione pero es por su plantilla que tienen  dejarme el nombre de la plantilla que usan por que el codigo .sidebar .widget { en otras plantillas tienen otro nombre . 

Bueno ya que estoy cansadita un poco , mas rato empezare a hacer los pedidos de plantillas y el lunes no tengo clases ,ni el jueves ,asi que tendré mas días para avanzar con los pedidos,aun que el martes tengo examen 

!important: en la siguiente entrada les dire que significa este codigo