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).
¿Problemas al comentar? Utiliza 
Jaime.
Yo tengo una plantilla Rounders 2 y no queda bien en los dos sidebar. Si en uno, y no tan bien,mas o menos, se me deforman las letras de los títulos.
Y la unica forma de lograr que la imagen quede es eliminando lo que está debajo de la plantilla, es decir reemplazando ese pedacito por lo que vos explicas.
Es decir, debajo de .sidebar h2 { reemplazar lo que sigue, no dejarlo, sino quitarlo. Porque si lo dejo sigue quedando el sidebar como viene en la plantilla por defecto.
.sidebar h2 {
(cortar aqui)margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;(hasta aqui)
}
y colocar esto:
padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;
Yo subi una imagen que transformé con el link que nos dejaste en tu post (RoundPic) dándole una dimensión de 220x26 pixeles. Pero igual no salió. Cuando coloqué todo el código no me quedó bien.
Lo corté, como te expliqué, lo reemplazé, y nada.
Otra pregunta ¿Como haces para que tus seguidores siempre se vean? En un montón de blogs es un problema, incluyendo el mio.
Igualmente no figuran todos tus seguidores alli, porque yo te sigo y no estoy :)
Muchos abrazos !!
Lindo muy lindo jeje, sin duda alguna mi buen Amigo Jaime, oye por cierto ya te enlace en mi Blog, es que con eso de que cambie el Diseño pues desaparecienron cosas temporalement
Maria Rosa, he estado investigando la forma de hacerlo y pienso que funcionará bien:
Diseño>edición de HTML>expandir artilugios
Busca este bloque de CSS:
#sidebartop h2 {
-x-system-font:none;
border-bottom:1px dotted #FFFFFF;
color:#FFFFFF;
font-family:Verdana,sans-serif;
font-size:110%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin-bottom:0.5em;
}
Y cámbialo por este otro:
#sidebartop h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:transparent url(URL DE TU IMAGEN) no-repeat scroll center center;
color:#FFFFFF;
font-family:Verdana,sans-serif;
font-size:110%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin-bottom:0.5em;
padding:5px;
width:210px;
}
Ahora busca este otro bloque (para los títulos de la sidebar blanca):
.sidebar h2 {
-x-system-font:none;
font-family:Verdana,sans-serif;
font-size:110%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:0 0 0.2em;
}
Y cámbialo por este otro:
.sidebar h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:transparent url(URL DE TU IMAGEN) no-repeat scroll center center;
font-family:Verdana,sans-serif;
font-size:110%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:5px;
width:210px;
}
El único problema es que los títulos con una longitud mayor a dos líneas se "saldrán un poco" de la imagen, al no ser que éste sólo tenga los bordes de arriba redondeados y los de abajo normales, de manera que pueda repetirse.
Una imagen con los bordes de arriba redondeados sería así:
http://i37.tinypic.com/241qon8.png
Como ves, es más larga que una imagen con todas las esquinas redondeadas, los que permite que el título no se deforme ;).
En cuanto a los seguidores, debes saber que no es el gadget verdadero, son imágenes posicionadas de la misma forma que el elemento y con enlaces a la página individual de seguidores.
Sé que tú me sigues, por eso, cuando gente nueva sigue El Balcón, hago nuevas capturas de las imágenes y nuevas caras aparecen :D.
Puedo ayudarte a crear un gadget de seguidores personal si lo deseas, de manera que se visualize correctamente en todos los navegadores.
Me alegra que te guste GuillermoVM, y muchas gracias por volverme a incluir en tu lista.
¡Pensé que te habías olvidado de mí! ;).
Hola Jaime: Soy bastante borriquita, hice todo lo que indicas, pero en algo fallo. Yo quisiera que me quedara como el modelo verde que has dejado en los tres a elegir. Hice los siguientes pasos: abrí EDICION html, sin abrir artilugios, bajé, bajé, bajé hasta que encontre .sidebar H2{
ahí agregué
padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;
y reemplacé URL... por el código que obtuve en Propiedades de tu modelo. Guardé cambios en la plantilla (tengo un blog para experimentos)y cuando voy a ver que bonito me quedó...pues nada, sin cambio alguno. ¿Porfi, me dirías que he hecho mal?
Hola Anawin de Jesús. ¡Para nada! lo importante es que lo intentaste.
Verás, en tu blog de pruebas (supuse que es http://dichosoelcorazonenamoradoad.blogspot.com/) cambié algunas propiedades del siguiente bloque:
.sidebar h2 {
-x-system-font:none;
font-family:'Trebuchet MS',Verdana,Arial,Sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:0 0 0.2em;
}
Por las siguientes:
.sidebar h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:transparent url(http://1.bp.blogspot.com/_blABMJBbYJs/SuLC2aTH8vI/AAAAAAAAHM8/Lqe7PpYYPU0/S1600-R/titulosidebar2.png) no-repeat scroll center center;
font-family:'Trebuchet MS',Verdana,Arial,Sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0;
padding:1em;
}
Después, en este bloque:
#sidebartop-wrap2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www2.blogblog.com/rounders/corners_prof_top.gif) no-repeat scroll left top;
border-width:0;
margin:0;
padding:10px 0 0;
width:20em;
}
Añadí la línea que está en negrita, así como en este otro:
#sidebarbottom-wrap1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF url(http://www.blogblog.com/rounders/corners_side_top.gif) no-repeat scroll left top;
color:#333333;
margin:0 0 15px;
padding:10px 0 0;
width:20em;
}
Con eso el problema queda solucionado y los bordes se ven redondeados gracias a la imagen de fondo :D.
Muchisimas Grasias me sirvio de mucho...
saludos...
Zero, gracias a tí por comentar.
¡Saludos!
Jaime, me gustaría poner la barra para los títulos, pero no puedo.
Localizo el código, pego con la URL, pero no pasa nada y todo sigue igual.
Creo que me rindo.
Un saludo y muchísimas gracias por tu ayuda.
¡No te rindas, varech! El problema tiene una solución facilísima.
Busca esta línea en tu plantilla:
background:transparent url(http://www.blogblog.com/thisaway/icon_sidebar_heading_left.gif) no-repeat scroll left 45%;
Y cámbiala por la de la entrada:
background: transparent url(URL DE TU IMAGEN) no-repeat center;
Después, un poco más abajo (en el mismo bloque -que comienza por .sidebar h2 {-) verás esta línea:
padding:1px 0 0 36px;
Reemplaza el 1 por un 8.
Jaime, pónme un libro arriba de la cabeza y otro en las manos con los brazos en cruz, que me voy a pasear por toda la clase por borrica:$
Yo no tengo la línea que dices con la palabra "transparente". Casi me sé la plantilla de memoria,pero te juro por mis nietos que no la tengo.¡Palabrita!:D
De verdad, que gracias por tu paciencia, pero voy a pasar de poner esta decoración, que me está llevando muchas horas.
Titulo del enlace
Como prefieras varech ;).
Debes saber que no hace falta encontrar el atributo "transparent", bastará con localizar la dirección de la imagen de fondo (http://www.blogblog.com/thisaway/icon_sidebar_heading_left.gif) y cambiarla por la URL de la imagen redondeada.
Si necesitas alguna otra cosa avísame.