Hazle cambios a tu sidebar

Esta vez explicaré como modificar los gadgets de la barra lateral sin afectar los demás, como la cabecera o los post. Esto es relativamente sencillo solo tienes que entrar a Edicion HTML, de tu blog, sin expandir las plantillas de artilugios.En esta entrada se asume que tienes conocimientos de como editar la plantilla de lo contrarios te recomiendo no tocar nada de tu blog.

Antes que nada ya en Edicion HTML guardamos nuestra plantilla original por si las moscas.

Hecho eso pongamonos manos a la obra

Ahora, antes de la eqiqueta ]]></b:skin>, debes agregar estas lineas de estilo:

.sidebar .widget {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background:black; 
}

Estas lineas de estilo le darán un fondo negro a tus widgets de la derecha, y les redondeará los bordes.

Estas otras lineas de estilo son para editar el titulo y el contenido los widgets de la sidebar:

/*Modificar los titulos de todos los widgets*/

.sidebar .widget .title {
  font-family:georgia;
}

/*modificar los links del titulo de todos los widgets*/

.sidebar .widget h2 a{
  color:green;
  background:(url_imagen) repeat-y top right #ff0000;
}


/*Modificar el contenido de los widgets de seguidores*/

.sidebar .Followers{
  color:green;
  background:black;
}

/*Modificar el titulo de los widgets listas de link en la sidebar*/

.sidebar .LinkList .title {
  background:black;
  text-transform:lowercase;
}

/*Modificar el titulo de los widgets de seguidores en la sidebar*/

.sidebar .Followers .title {
  background:black;
  text-transform:lowercase;
}


/*modificar los links del titulo los widgets HTML en la sidebar*/

.sidebar .html h2 a{
  color:green;
  background:(url_imagen) repeat-y top right #ff0000;
}

/*modificar el contenido de los widgets HTML en la sidebar*/

.sidebar .html .widget-content{
  color:green;
  text-transform:uppercase;
}

/*modificar el contenido de todos los widgets*/

.sidebar .widget .widget-content {
  color:green;
  text-transform:uppercase;
}

/*modificar los links del contenido de todos los widgets*/

.sidebar .widget .widget-content a{
  color:green;
}

Los efectos mas comunes o mas faciles y atractivos en CSS, son los siguientes:

background:(url de la imagen) repetir alineacion alineacion_2 color;

Las propiedades del background:

Si tienes un background con imagen

url de la imagen: Aqui va la url de tu imagen, esto es opcional
alineacion: Aqui esta la alineacion vertical de la imagen de fondo top,bottom,center.
alineacion_2: Aqui esta la alineacion horizontal de la imagen de fondo left,right,center.
repetir: repeat-x(repetir verticalmente),repeat-y(repetir horizontalmente),no-repeat(no repetir).
pero tambien puedes agregar solamente un color, o agregar un color a donde la imagen no alcanza
color:white, black, blue. o un color hexadecimal: #FF0000,#FFFF00.

color:color del texto;

text-transform:uppercase o lowercase;

Propiedades del text-transform:

uppercase: convierte a mayusculas el texto
lowercase: convierte a minusculas el texto

overflow:yes,no o auto;

Propiedades de overflow:

yes: Agrega barras de dezplasamiento al gadget
no: si tiene, quita las barras de dezplasamiento al gadget
auto: Si rebasa el ancho o el largo del widget agrega las barras si no, entonces no hace nada.