GADGETS

sta 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. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

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.

/!\ Puedes agregar un toque de originalidad agregandole a tus widgets transparencia.