Cómo poner los bordes redondeados en el títulos en el sidebar

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Bordes redondeados en los títulos de la sidebar con imágenes

Poner los títulos de la sidebar o barra lateral con una imagen de bordes redondeados es algo muy sencillo. Los bordes redondeados provocan un efecto muy agradable y parece que a muchos bloggers les encanta.

En esta imagen puedes ver el resultado (ten en cuenta que podrás cambiar el color de la imagen):

Diseño>Edición de HTML>sin expandir artilugios

1) Busca este código de CSS:

.sidebar h2{

2) Justo debajo agrega estas dos líneas:

padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;

En caso de no encontrar la línea .sidebar h2{ con su respectivo bloque, agrégalo antes de la etiqueta ]]></b:skin> de la siguiente forma:

.sidebar h2{
padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;
border: none;
}

3) Ahora solo te falta sustituir URL DE TU IMAGEN por la dirección de tu imagen con bordes redondeados ^[+].

Aquí te dejo tres imágenes por si deseas llevarte alguna (no olvides alojarla en tu propio servidor, como puede ser tinypic. No es bueno hacer hotlinking):






4) Finalmente, guarda la plantilla:




Puedes crear más imágenes con bordes redondeados haciendo uso de la web RoundPic, en la cual podrás alojar cualquier imagen y redondearla (escogiendo la altura y anchura).