Modelo de sidebar #2

 ¡Hola! como les va? 

Este tutorial de modelo de gadget/sidebar es un poco largo así que empecemos!~

Antes de empezar quiero darle créditos por los códigos a -Amary Miau's Blog- gracias a ella pude elaborar este sidebar para nuestros blogs.

 P R E V I A:

Para tener el modelo de sidebar en vuestros blogs

1 ) -Para poner el fondo-

Plantilla | editar HTML | CTRL + F

Y buscas:

]]></b:skin>

Y arriba pones este código:

.sidebar .widget {margin: 4px 2px 30px;background:#f;padding: 6px 6px;background:#fff;border-bottom: 5px solid #FED4E9

Para editar:

Lo rojo: El color del fondo.

Lo azul: Es la barra de abajo del fondo.

2) -Para el titulo-

Plantilla | Editar HTML | CRTL + F

Y buscas:

/* Headings

Después de encontrarlo hacemos lo siguiente:

 Lo que se muestra subrayado en la imagen lo borramos y lo reemplazamos por este codigo:

.sidebar .widget h2 {
color:#F7BDE2;
font-family: Georgia;
letter-spacing: 3px;
font-style: italic;
text-transform: lowercase;
background: #f1f1f1;
text-shadow: 1px 1px 0px #fff;
font-size:12px;
margin-top: -4px;
margin-bottom: 5px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 0px;
padding-right: 5px;
text-align:center;
box-shadow: 1px 1px 0px #FED4E9;
}

Para editar:

Rojo: Color de las letras

Verde: Color del fondo de la cajita

Rosa: Color de la sombra de las letras

Azul: Color de la sombra de la cajita

¡Y listo! se guarda y ya lo tenemos en nuestro blog.

Sí ves que no funciona el fondo blanco, es por que quitaste esto ese fondo transparente, lo mejor es no quitarlo.

Adiós.
¡Espero les sirva!