Sidebar y su mundo

Colocar una imagen de fondo, (la misma para todos los widget), en cada uno de los elementos de la sidebar:

Control+F y buscamos:

.sidebar .widget{
margin:0 0 0.7em;
padding:4px;
}

Y aplicarle el background:

.sidebar .widget{
background: url(URL_DE_LA_IMAGEN);
margin:0 0 0.7em;
padding:4px;
}

¿Cómo colocar diferentes imágenes en cada una de las cajitas (widgets) del blog?

1. Una vez situados en nuestro panel de Blogger, vamos a la pestaña de "Diseño" y pinchamos en "Edición de HTML".

Sin expandir la plantilla de artilugios localizamos el código que pertenece a los widget y que, estará representado cada uno, por una línea parecida a esta:

<b:widget id='HTML12' locked='false' title='Mis lecturas' type='HTML'/>


2. Nos fijamos en la línea del widget concreto al que vamos a ponerle la imagen de fondo, si tiene título añadido nos será mucho más sencillo de localizar.

Una vez localizada la línea, nos fijamos en su id que es siempre distinta para cada widget.

En el caso de mi ejemplo, el id es HTML12

3. Nos situamos ahora más arriba, en el código CSS de la plantilla y siempre antes de ]]></b:skin> colocamos el código necesario para mostrar la imagen en ese widget concreto:

#HTML12{
background: url(DIRECCION_DE_LA_IMAGEN);
}

4. Por último tendremos que repetir estos mismos pasos para cada widget al que vayamos a ponerle imagen de fondo.

Entradas y widget enmarcados por separado

Hacer que un borde enmarque las entradas y los gadgets del blog por separado.

(Referencia la plantilla Mínima de Blogger)


* Enmarcar cada post por separado:

1. Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código:

.post {

2. Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:

border:1px solid #000;

El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.

3. Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:

padding-left: 10px;

El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:

border-bottom:0px dotted $bordercolor;

4. Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:

background: #ddd;


*Enmarcar los widgets en la sidebar:

1. Buscamos ahora esta parte del código:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

2. Tendremos que separar antes de nada el código de los widget de entradas y de la sidebar, de tal manera que esa parte nos quede así:

.sidebar .widget{

}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

3. Añadimos justo debajo de .sidebar .widget{ las mismas líneas de código que añadimos en las entradas, más una nueva que controlará la separación entre cada widget:

.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}

4. Igual que antes, para los post, si queremos darle color al fondo de cada widget, hemos de añadir una nueva línea al código anterior (siempre antes de la llave de cierre }:

background: #ddd;

Nota:

En ambos ejemplos el color de fondo es gris (#ddd;) pero podemos cambiarlo por el que nos guste.

Actualización:
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código en cada sección, es decir, en .post { y en .sidebar .widget{

-moz-border-radius: 15px;
-webkit-border-radius: 15px;

Fuente: El Escaparate