144

Imagen y fondo de color en los títulos de la sidebar

Colocar una imagen a la derecha del título

img right

[1] En nuestro panel vamos a Edición HTML y localizamos este código:

.sidebar h2{

[2] Colocamos este código justo debajo de esa línea:


background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding: 5px;




En el caso de que .sidebar h2{ no estuviera en el código de nuestra plantilla (como es el caso de algunas plantillas de Blogger) lo incluimos directamente antes de ]]></b:skin> de esta manera:

.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Cambios:

Para eliminar o cambiar el color de fondo, en la línea del background borramos el código del color (#CEF7FF) o lo cambiamos por el del color que queramos.
Para cambiar el color, grosor o aspecto del borde, lo haremos en la línea del border y si no queremos mostrar ningún borde, eliminamos esa línea por completo.
Colocar una imagen a la izquierda del título

img leftEl código a usar entonces, sería algo como esto:


.sidebar h2{
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}



Cambios:

Los cambios que podemos hacer son casi los mismos que antes, si os fijáis en el código la única diferencia está en la línea del padding.

En esa línea tendríamos que poner, en lugar del 35px, el mismo valor o incluso algo más que el ancho de la imagen que vamos a usar para separarla del título.
Colocar una imagen distinta en cada título a derecha o izquierda


img left-right[1] Localizamos el código de cada gadget con los artilugios expandidos, que empezará por algo como esto (ejemplo de gadget HTML):


<b:widget id='HTML2' locked='false' title='Menú del blog' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

La línea que está destacada en negrita, es la que corresponde al título del gadget y como podéis ver he marcado en naranja la clase que tiene añadida (class='title').


[2] Cambiamos la clase del título (class='title') por otra, por ejemplo class='TitleIcon' y colocamos estas líneas de CSS antes de ]]></b:skin> en la plantilla si queremos mostrar la imagen a la derecha del título:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat right;
border: 1px solid #808080;
padding:5px;
}

Si vamos a mostrar la imagen a la izquierda del título, entonces tendría que ser algo como esto:

.TitleIcon {
background: #CEF7FF url(url_de_la_imagen) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}
Algunos gadget como el de Archivos por ejemplo, podrían no tener una clase añadida en el código del título:

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Se la añadimos:

<b:if cond='data:title'>
<h2 class='Archivo'><data:title/></h2>
</b:if>

Y seguimos el mismo método que para los demás gadget:

.Archivo {
background: #FF99CC url(url_de_la_imagen) no-repeat right;
border: 1px solid #999900;
padding:5px;
}

Entradas Relacionadas:

144 comentarios:


Kike

Buen truco, gracias rosa, tu trabajo es excelente.

Una pregunta: ¿Se puede cambiar la fuente y tamaño de cada título del sidebar?

De antemano gracias.

Saludos.

Dialoguista

Buenísimo este post!!!! Justamente estoy queriendo incursionar en esto de cambiar el aspecto de los títulos de la Sidebar. Lo que me gustaria además de poder cambiar el color, es camiar el tipo de letra y tamaño de letra, ¿eso donde sería?
Saludos!!!

Supermamá

Dicho y hecho...ya tengo los títulos con fondo e imagen :)

Gracias preciosa, es un gesto de gratitud a todo tu abnegado trabajo para darnos tanto, sin darnos cuenta del tremendo esfuerzo y dedicación que requiere por tu parte.

PD:
Un ruego a los amigos blogger:
....
Antes de preguntar a nuestra queridísima amiga Rosa, y aunque ella siempre responda amable a nuestras dudas, dedicar un poco mas de tiempo a leer con detenimiento sus indicaciones y los pasos a seguir, antes de acudir a pedir que nos lo resuelva.
Porque pasa que muchas veces las preguntas se repiten mil y una veces...y la idea es avanzar en el conocimiento y no estancarnos en lo mismo eternamente.

Mas lectura porfavor...

Muchas gracias a todos

Gracias Rosa bssssssssssss

La Trucoteca de Blogs

Hola Rosa!!!
Que chulo esta este truco, siempre da un toque mágico :).
Por cierto, ¿te has apuntado a los premio bitácoras?
Creo que es un poco rollazo el concurso, además de ser bastante dificil apuntarse... no sé...
Bueno , saludos!!!!

Sr. Taronja

Hola!

He intentado ponerlo, pero solo queda el cuadro y no se "pinta" por dentro.

Que puede pasar? Tengo la plantilla Thisaway green.

Muchas gracias!

Rosa

Sr. Taronja Normalmente, salvo que indique lo contrario, los "trucos" que explico están basados en la plantilla Mínima de Blogger, ya que es como una "base limpia" sin nada añadido...me es imposible ponerme en el caso de todas las plantillas.

En tu caso, la Thisaway ya lleva añadido en los títulos una imagen de fondo (las flechitas) que es lo que impide añadir otra o color de fondo...
Tendrías que retirar antes esa imagen del background de los títulos.

Rosa

La Trucoteca de Blogs Nunca me he inscrito a ningún concurso...lo que no quiere decir que algún día no lo haga si así me apetece en el futuro... aunque creo que va a ser difícil verme en ninguno, no me agrada la competición...

Rosa

Supermamá ¡Eres un encanto!

Rosa

Dialoguista Si en tu plantilla aparece el .sidebar h2{ ahí mismo deberán estar las instrucciones para eso...algo como font-size: 14px; por ejemplo, sería para el tamaño...si me indicas que blog es (veo tres en tu perfil) quizá pueda orientarte más concretamente...

Rosa

Kike Te digo como a Dialoguista (comentario anterior)

Asun

Hola Rosa!
Una vez mas me encantan tus sugerencias e intento aplicarlas en mi blog, pero esta vez no obtengo resultados. No me aparece ninguna imagen junto a os títulos de la sidebar.

Un saludo

Airis

¡Hola, Rosa! Descubrí hace poco tu blog y me parece maravilloso, aquí hay de todo para los que no sabemos mucho de html y ya he podido hacerle varias cosas a mi blog. Ahora, soy basante inexperta y tengo una duda imprescindible para muchas cosas:

¿Cuál es el CSS de la plantilla y dónde está
]]>< /b:skin> ?

Otra duda es que hace tiempo leí que había una forma de, en la plantilla, darle a alguna tecla, escribir la palabra que buscas y que te saliese ya en lugar de recorrerla toda entera estando media hora hasta encontrar lo que buscas (que es lo que yo hago). ¿Sabes cómo es eso?

Y nada más, espero que me puedas ayudar.

Saludos!

Dialoguista

Hola Rosa!!! Intente con Font en la parte de sidebar 2, pero en la vista previa se ve igual.
Tengo algo asi, (copio y pego): sidebar h2, .rsidebar h2, .lsidebar h2 {
background: #753d48 ;
color: #fff;
font: 14px;
font-weight: normal;
margin: 0px 0px 10px 0px;
padding: 10px;
En blog es Diálogos Cinéfilos.
Muchas gracias Rosa!!!!!!

jose_3

hola rosa veras, yo tengo esto en la plantilla:
.sidebar h2 {
font-size:21px;
font-weight:normal;
letter-spacing:0;
margin-bottom:15px;
}
lo que pasa que he añadido otra sidebar, y si modifico el font-size aqui se me modifica en las dos y yo quiero cambiarlo solamente en una, como deberia modificarlo entonces?

Fernando

Hola Rosa, ¿qué tal?, en primer lugar gracias por tu ayuda.
Me gustaría saber, si es posible, y cómo hacerlo, cambiar el color de los titulillos.
Muchas gracias Rosa

Dña. Urraca

Hola!
Te venía a hacer una pregunta y una invitación.
La pregunta es por los títulos de los post, los personalice, pero me aparece como un doble borde que yo no he dado y no se de donde sale,se hace más grande o mas pequeño dependiendo de lo grande que sea el titulo, y me gustaría quitarlo.
Y la invitación es para que cuando tengas un ratito, vengas al cuchitril y pinches donde dice blogroll, quiero que veas una cosina.
Un saludo y gracias.

Graciela

hola Rosi :D muy bueno lo de la imagen derecha o izquierda, no se me había ocurrido entre las tantas 'que me pasan por la cabeza'.

Buena semana y besos!!!

Adriana Paoletta

Excelente noticia la que nos haces llegar
Gracias
Adriana

Jorge Ángel Aussel

¿De qué se trata esto, Rosa? ¿Acaso me estabas esperando con esta entrada porque sabías que iba a preguntártelo? Jaja. ¡No lo puedo creer! Va... sí, sí lo puedo creer, aunque sea increíble.

Gracias, gracias una vez más.

Rosa

Asun Trata de aplicar los cambios en una plantilla aunque sea de pruebas y muéstrame los resultados, solo así podré ver que está incorrecto...

Rosa

Airis Tanto el CSS como el HTML son los tipos de código que forman cualquier plantilla.
Si en tu panel accedes a la pestaña "Edición HTML" ahí verás todo el código que forma la tuya, el CSS sería el código que comienza después de <b:skin><![CDATA[/* y que se extiende hasta justo antes de ]]>< /b:skin>

Lo que no puedes es tratar de "empezar la casa por el tejado"...si miras en entradas anteriores todas estás dudas podrán serte resueltas...son nociones básicas, por eso en muchas de las entradas actuales ya no hago hincapié en ellas...

En cuanto a localizar el código como dices, lo mismo, en una entrada anterior podrías haberlo visto (usando buscador o etiquetas):
http://elescaparatederosa.blogspot.com/2007/09/encontrar-una-parte-de-codigo-en-la.html

Rosa

Dialoguista Ahí sería:

sidebar h2, .rsidebar h2, .lsidebar h2 {
background: #753d48 ;
color: #fff;
font: 14px;
font-weight: normal;
margin: 0px 0px 10px 0px;
padding: 10px;

En font: 14px; controlarías el tamaño de la fuente, aunque sería más correcto cambiar eso por: font-size: 14px;
Justo debajo de esa mismalínea, por ejemplo, puedes colocar para el tipo de fuente:
font-family: Verdana, Arial;

Y recuerda, si usas un tipo de fuente que no esté instalada antes en tu PC o en de las visitas de tu blog, no será visible el cambio.

Rosa

jose_3 Supongo que tu nueva sidebar tiene otro nombre...pongamos que se llama newsidebar, tendrías que añadir algo así:

#newsidebar h2 {
font-size:21px;
}

Rosa

Fernando Tienes algo como esto:
.sidebar h2{
background: #CEF7FF url(http://farm3.static.flickr.com/2523/3967092058_10a5b70ab0_o.jpg) no-repeat left;
border: 1px solid #808080;
padding: 5px 5px 5px 35px;
}
Añade debajo de .sidebar h2{ una línea como esta:
color: #000; cambiando #000 por el color que vayas a usar por supuesto.

Rosa

Dña. Urraca Tienes aplicado este CSS para los títulos de entradas:

.post h2, .post h2 a {
padding:0px 10px 10px 10px;
font-size:24px;
text-align: center;
font-family:Showcard Gothic;
background-image: url(http://www.encuentos.com/wp-content/uploads/2008/06/bosque.jpg);
border:4px ridge #D0F5A9;
color:#D0F5A9;
}

El post h2{ controla el aspecto del título, pero el post h2 a{ controla el aspecto del título considerado como enlace, con lo que la instrucción se repite dos veces...deberias dejar la línea de comienzo solo con:
.post h2{

En cuanto a la invitación...ya mismo voy.

Dña. Urraca

Falla algo más Rosa, cuando elimino Post h2 a, no coge ninguna de las características dadas, pero si elimino post h2 coge las características pero lo alinea a la izquierda, aunque le diga que flote en el centro.

Asun

Hola Rosa, ya tenía aplicados los cambios en la plantilla cuando te escribí el comentario anterior, pero no se ve ningún cambio en los títulos de la sidebar.
Como no aparecía el código .sidebar h2{ añadí todo el código completo justo antes de donde decías.
La URL del blog donde lo he aplicado es esta:
http://reflexiones-historias.blogspot.com/

Muchas gracias

Dialoguista

Rosa sos una genia!!!! Quizas por eso no veia el cambio!!! En un rato pongo manos a la obra con todos tus consejos!!!
GRACIAS;-)

Fernando

Gracias Rosa, eres un sol ;)

*..❤- EmiiLy -❤..*

Hola Rosa:

¿Cómo puedo poner un "volver arriba" con una imágen de Demi Lovato?
Otra preguntita más: ¿Cómo pongo un "Inicio", "Entradas antiguas" y "Entradas recientes" con imágenes?
Esque tengo un blog de Demi Lovato y quisiera ponerlo con esas características, mi amiga lo tiene así pero de Miley Cyrus, aunque no me quiere decir cómo se pone :(

Gracias de todas formas.


Saludos.

Rosa

Jorge Ángel Aussel No se porqué...pero te creo, ja,ja.

Dialoguista

Rosa: vengo a contarte que ya tengo la letra más chica!!!, al agregar el tipo de fuente Verdana, ya dejando el 14, igual se achicó muchísimo!!!! Y le agregue size de todas formas al tamaño, para que después pueda variarlo si quiero!!! Muchisimas gracias otra vez. Es que queda medio feo las letras tan enormes ;-)

Jorge Ángel Aussel

Rosa: Sabés que lo he intentado una y otra vez y no he podido incluir el ícono de Twitter que era lo que quería hacer...
Yo tengo una imagen de fondo en los títulos de la Sidebar, y sólo quería que apareciera este ícono en el Gadget de Twitter. Al menos los pasos creo haberlos seguido al pie de la letra, porque el borde incluido en el CSS sí me aparecía.
No sé si sea posible tener dos imágenes, quizá no.

Seguiré intentando...

Rosa

Dña Urraca Se me ocurre que cuando cambiaste .post h2, .post h2 a { por .post h2 { te dejaste la coma , que va después del h2 y por eso no te toma los cambios, esa como se usa para separar dos instrucciones que comparten el mismo código, si solo vas a usar una, hay que reirarla, es decir, sería:
.post h2 {

Rosa

Asun Como creo que todos ya sabéis, cuando explico cualquier cosa de estas, siempre me baso en las plantillas de Blogger, más concretamente en la Mínima, cuando la plantilla no es original de Blogger o es adaptada como es tu caso, el diseño cambia y no siempre podemos interpretar al pie de la letra las instrucciones...
En tu caso si tienes el h2, pero tu diseño es distinto, así que el h2 que necesitas en tu plantilla,está aquí y por cierto que ya tiene algunas instrucciones para el fondo y demás, así que ve haciendo pruebas y no guardes por si acaso, usa vista previa antes:

#sidebar1 h2 {
margin: 0px 0px 2px 0px;
padding: 0px 0px 2px 0px;
text-align: left;
color: #cccccc;
font: normal bold 99% Verdana, sans-serif;
text-transform: uppercase;
text-decoration: underline;
/* background: #3D81EE;
border-top: 0px solid #7f7f7f;
border-bottom: 1px solid #7f7f7f; */
}
#sidebar2 h2 {
margin: -10px -10px 8px -10px;
padding: 3px 10px 3px 10px;
text-align: left;
color: #ffffff;
font: normal bold 99% Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
background: #a9501b;
border-top: 0px solid #804000;
border-bottom: 1px solid #804000;
}

Rosa

*..❤- EmiiLy -❤..* El "Ir arriba" puedes ponerlo con la imagen de quien sea o que quieras:
http://elescaparatederosa.blogspot.com/2007/11/volver-arriba-en-cada-post.html

Y los enlaces de navegación puedes también sustituirlos por la imagen que quieras:
http://elescaparatederosa.blogspot.com/2007/03/iconos-de-navegacin.html

Solo tenías que buscar un poco...

Rosa

Dialoguista Es muy agradable ver que alguien vuelve a contar como le ha ido...no todos lo hacen cuando les sale todo bien...¡Gracias!

Rosa

Jorge Ángel Aussel Si ya hay una imagen aplicada en el background de los títulos, no puedes añadir otra...lo que si podrías es usar la misma imagen de los otros modificada con el pajarito incluido y aplicarla solo en ese gadget, eso si creo que funcionaría...

Para eso necesitas conocer la id del gadget, pongamos que sea HTML3 y colocar algo así:

#HTML3 h2{
aqui las instrucciones
}

Ana Laura

Gracias, Rosa, yo había logrado poner una imagen en los títulos por medio del ensayo y error, pero se me superponía con el texto; ahora lo arreglé con tu indicación de modificar el padding y quedó precioso. Excelente, como siempre.

Muchos saludos

*..❤- EmiiLy -❤..*

Rosa por qué no me contestas?

*..❤- EmiiLy -❤..*

ah ya vi tu respuesta, gracias [ESQUE NO LA VEÍA XD]

fabian

Hola rosa, queria hacerte una preguntita haver si sabes es que no me sirven los pipes de yahoo en mi blog por ejemplo quiero poner el de los mejores post(mas comentados) y simplemente no se ve nada entonces quisiera preguntarte si sabes si hay algun script que forme conflicto o algo que impida su visualizacion
saludos!

fabian

roisa olvida lo que te dije ya me funciona de mil maravillas
saludos!

Asun

Hola Rosa!
No se si me ves, pero te estoy haciendo la ola delante del monitor. Biiiieeeeeen!

Siguiendo tus indicaciones lo he conseguido. Al principio me ha costado un poco porque no veía en el código que me has mandado donde colocar la URL de la imagen, pero mirando un poco la entrada original he intuido dónde colocarla y he acertado.

De momento he puesto una imagen de mi perita guiñando el ojo, pero al ser de tamaño tan reducido (la imagen, no la perra, aunque también) no se aprecia muy bien.
Con mas tiempo buscaré imágenes mas a propósito.
¿Sabes de alguna página donde se puedan descargar imágenes monas? He intentado buscar alguna entrada en tu blog que haga referencia a ello,pero no he encontrado nada.

Un millón de gracias

MALINA

Rosa, me han pedido hacer un blog con la plantilla minima que tenga el sidebar a la izquierda, has publicado algo sobre eso?.

En caso contrario, sabrías indicarme como hacerlo para que el sidebar esté a la izq. y no a la derecha como viene por defecto?

Un beso grandote!!

Claudia Agramonte

Hola Rosa, garcias por todo lo que me has enseñado. Este truco lo intenté guiandome de la explicación que das para los titulos de los post y me resultó muy bien, e incluso se añadí una imagen flotante a algunos de ellos.

Gracias por todo.

Aldaba

Hola Rosa, quería hacerte una pregunta aunque no está relacionada con este post. En google analytics he llegado a 200 visitas, a partir de ese numero el número baja a 198, 199, no sube de 200, sabes cual puede ser el problema?
Muchas gracias y por supuesto sobre decir que tienes un blog muy didactico para torponas como yo. Un saludo.

Rosa

MALINA Para cambiar de lado la sidebar, tan solo tienes que cambiar su flotación en #sidebar-wrapper{ de float: $endSide; a float: $startSide o de float: right; a float: left; según lo tengas en la plantilla...

Seguramente después de hacer esto, tendrás que aplicar un padding-left: 20px; aproximadamente en #main-wrapper{ ... en fin, algo así sería nada más...

Rosa

Asun Bien!!:D
La verdad es que no :( no suelo guardar ese tipo de páginas y casi siempre las encuentro de casualidad :S

Rosa

Aldaba No tengo ni idea...pero mejor no te preocupes en exceso por esos datos...
En una ocasión estuve yo con 0 visitas en Analytics por cerca de 15 días y en mi blog seguía recibiendo comentarios y demás como siempre...será quizás algún fallo de allí...

Mamots

Hola Rosa, me gustaria poner las etiquetas desplegable a tu estilo en uno de mis blogs porque ya son demasiadas, como podria?

gracia

Rosa

Mamots "A mi estilo" sería así:
http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html

Piensa que si usas JQuery en el blog para cualquier otro efecto, no puedes añadir nada, como en este caso, que use Scriptaculous para funcionar, las dos librerías son incompatibles...

Mamots

Gracias voy a ver si me sale.

besos

Mamots

Perfecto, ahora colocarlo donde sea mejor y buscar un icono a juego con la plantilla, mil gracias.

laMar

Rosa, soy tu pesadilla, pero tranquila que solo es para decirte ¡que lo he solucionado! El problema era efectivamente del feed.
1º tenia activada la opción "Link Splicer" en la pestaña Optimice y ahí aparecía el dichoso digg. He desactivado esta opción.
2º el la misma pestaña tenia activada la opción "Convert Format Burner", pero lo estaba convirtiendo a Atom 1.0 en vez de a RSS 2.0. Lo he cambiado.
Espero que me hayas entendido, que ya sabes que lo de las explicaciones técnicas no es lo mío, pero bueno, el caso es que funciona.
Esta mañana me ha dado por investigar por ese lado y he acertado ¡y ahora ya funciona todo correctamente!
Envié un mail a JMuir como me aconsejaste y el pobre ha estado intentando averiguar que pasaba, pero ahora mismo le envió otro para decirle que ya está arreglado.
Perdona lo extenso del comentario pero necesitaba contártelo después de la lata que te he dado.
Espero que la explicación te ayude por si aparece otra pesadilla como yo.
Un abrazo enorme y muchísimas gracias por todo

DENENAS

Puede que tu estes al margen de estas cositas.. de premios y demas.. pero bueno, he querido premiarte y tienes un premio que recoger en mi blog.. Si no puedes venir a recogerlo, te lo mandamos. Gracias por estar aqui.. no dejamos comentarios a veces.. pero te seguimos.. eres una gran ayuda..

Rosa

laMar Imaginaba que sería algún error en FeedBurner...pero claro, es complicado con todas las opciones que allí hay...
Me alegra mucho que esté todo ok y muchísimas gracias por volver a contarlo, claro que si, seguro le sirve a alguien más...

Aunque yo me quedé mal, ja,ja, sigue sin verse esa opción en ninguno de mis blogs :(

¡Un abrazo!

Gus

Rosa, te hago una pregunta que no tiene relacion con esta entrada en particular:
En ocasiones deseo copiar un texto o letra de una cancion para subir a mi blog y cuando lo selecciono copio pero no puedo pegar.
Intenté colocando un texto donde aparece la url del sitio pero no funciona. Tenes alguna idea de como solucionar esto?
Desde ya muchas gracias como siempre, un beso desde Arg.

Theemilio_crazy

Gracias rosa, Me fue muy util esto, tengo un pequeña duda...

Quiero mi Imagen a la Derecha, pero al Hacerlo el titulo interviene, Asi que quiero saber como centralizar el titulo y de paso como Cambiarle el Color, al Titulo de La Sidebar, Eso era todo, Gracias por Todo Rosa, Eres la mejor :D

Antonio Cardador

Hola Rosa, quizás esto no pegue mucho en este post, pero como estuve leyendo en tu blog, en otros post anteriores que estábais regalando espacios donde colocar favicons gratuitamente, quiero decirte que mi blog Poetízame, se va a unir a esa causa. Por si quieres decírselo a más gente.
El blog es http://poetizame.blogspot.com y va sobre poesía.
Espero tu favicon allí.
Un saludo y decirte que me encanta tu blog, gracias a muchos consejos tuyos retoco el blog cada día.

Rosa

Gus Pues no...ni idea.

Rosa

Theemilio_crazy Este es el código de tus títulos:

.sidebar h2{background: url(http://i42.tinypic.com/2cdxqfq.jpg) repeat-x;
background: #000000 url(http://s4.tinypic.com/n5575x_th.jpg) no-repeat right;
border: 1px solid #ffffff;
padding: 5px;
margin: 0 0 0;padding: 7px 5px 6px 15px;border: 1px solid #1E2122;color:#B7D0F0;
font-size: 90%;font-family: 'Verdana', 'Trebichet MS', Sans-Serif;font-weight:normal;
letter-spacing:0em;}

La parte que dice color:#B7D0F0; es el color del texto, ahí lo cambias.

Para centrarlo, después de .sidebar h2{ colocas esto:
text-align: center;

Rosa

Antonio Cardador Lo lógico es que tu comentario lo hubieses dejado en la entrada o entradas que comentas...

Sr. Taronja

hOLA!

He logrado quitar la imagen de las flechas y ahora ya se ve bien. Pero tengo una pregunta más, que dimensiones tiene que tener la imagen para que se vea?

Gracias!

Rosa

Sr. Taronja Pues lo lógico es que sea un icono o imagen pequeña, dado el ancho de los títulos... 30px o 35px a lo sumo de ancho y alto

EURICE

Buenos dias Rosa
queria preguntarte como añadir otra sidebar a mi plantilla, es la minima black, pero me gustaria que en vez de tener dos cuerpos tuviera 3, asi las entradas quedarian en el centro y ambos lados tener un sidebar en cada uno.¿ Es posible? o tengo que buscar otra plantilla de fondo negro que tenga esas caracteristicas que quiero?.
Gracias de antemano y un saludo

Mariflor

Rosa! es lo que estaba buscando para mi menu deplegable! gracias! te he hecho una imagen como regalo, espero que publiques, si es que te gusta, espero que si, ya que la imagen la he hecho yo y me ha dado un poco de trabajo..., la direccion de la imagen es: http://4.bp.blogspot.com/_2TSu6ORRe8A/Stn4BjHiSVI/AAAAAAAAA9g/3cLgQX_PolY/s1600-h/El+Escaparate+de+Rosa+by+Mariflor.jpg

Mariflor

Disculpas,he cometido un error, en una parte dice espero que publiques, me falto una palabra,
"espero que la publiques"...

GAMC

HOLA ROSA, quiero hacerte esta pregunta: ¿Como hago para central el titulo de la sidebar?

Rosa

EURICE En esta entrada verás como hacer eso:
http://elescaparatederosa.blogspot.com/2007/06/aadir-una-sidebar.html

Rosa

GAMC Leyendo en comentarios anteriores al tuyo...

Rosa

Mariflor Está muy linda y te agradezco...siento si te has tomado el trabajo de hacerla para verla publicada ya que no voy a poder hacerlo.
Recibo muchos regalos de este tipo y no tendría espacio para colocarlos todos...por otro lado es la primera vez que alguien me envía algo así solicitando su publicación y además recalcando el trabajo que le ha tomado...soy sincera si te digo que no me ha parecido demasiado bien eso...

Sr. Taronja

OK! Todo perfecto!

Francisco Pose

Rosa, podrías decirme como tengo que hacer para que los títulos en la sidebar aparezcan dentro de una caja pero que no sea la típica rectangular sino que tenga las esquinas redondeadas?
Saludos,
Francisco

Cari Y Yoly

Rosa! Solo queremos decirte que te queremos mucho,ya sos parte de nuestra vida.
gracias por tu mensaje.
Besos

Rosa

Francisco Pose Para eso tendrías que usar una imagen adecuada (con los bordes redondeados) para usar como background en los títulos.
Sin imágenes puede hacerse pero no se ven los bordes redondeados en IE, solo en Firefox.

@rielCastellanos

Hola Rosa, disculpa, fijate q no encontre en donde colocar esta pregunta, busque en tus entradas pero no encontre lo que andaba buscando, mira, mi duda puede q sea muy sencillo para ti, pero para mi es algo complicado, fijate que deseo resaltar mejor mis categorias en mi blog, cambiar color de letra y tamaño de letra para que sea mas grande o ponerles cosas mas llamativas, si tienes una entrada relacionana por favor dime cual es, mil gracias! mi blog es: www.XtraMundo.Blogspot.Com

Lidysan y Marcos - Los Mol

Hola Rosa, genial tu entrada. Desde luego que la mayoría de los blog lo tenemos medio visibles gracias a blog como el tuyo. Tengo un problemilla y no sé cómo solucionarlo... cuando abro mi blog desde hace 3 días me aparece en una ventana pequeña aparte un widget con una chica en plan "XX", esto hace que desde determinado ordenadores te bloqueen la entrada, además es un blog de cocina dulce y no queda muy "estético" la verdad¡¡Crees que eso puedo quitarlo de aguna forma??
Muchas gracias de antemano y enhorabuena por tu gran blog.
Saludos

Rosa

Cari Y Yoly Gracias a ustedes dos por haberme dado la oportunidad de conocerlas...

¡Besos enormes!

Cuacomekiki

Hola Rosa, tengo una pregunta, espero que me puedas leer.

Sabes como se puede poner un titulo doble en cada post para ir en dos idiomas? Como se ve aqui.

http://victorsantoscomics.blogspot.com/

He buscado en tu blog y en otros pero no he dado con ello. Me puedes ayudar?

Saludos

Carlos

Rosa

Cuacomekiki Másfácil imposible...cuando pones título al gadget, en lugar de poner por ejemplo: Mis libros pues pones Mis libros/Mis Ebook y listo, no hay más misterio.

Rosa

Lidysan y Marcos - Los Mol No puedo decirte exactamente de cual de ellos, pero esas publis no deseadas vienen de los contadores de visitas, casi todos, por no decir todos, la tienen y una vez el blog alcanza un cierto número de visitas la publi se "dispara"... dicen que son gratis, pero no avisan de eso...

Rosa

@rielCastellanos No la tengo, pero lo que debes hacer es usar la id de tu gadget de etiquetas: Label1 y colocar algo así en el CSS:

#Label1 {
color: #ddd;
font-size: 13px;
}

Cuacomekiki

Vale, creo que me he llevado el premio a la pregunta tonta del dia. :) Te iba a preguntar como se hace el html para hacer el segundo titulo en otra linea y otro color, pero ya mejor lo gogleo yo mismo. :p

Gracias!

Yanara

Hola Rosa,

se ha caído tu favicon y desestructura mi faviconera. ¿Podrías mandarme la nueva dirección? Gracias.

Un saludo,
Yanara
http://nosoloenlaces.blogspot.com

Lidysan y Marcos - Los Mol

Gracias Rosa, pues a quitar el contador a ver si encuentro otro que no lo haga...un besito y mil graciass

Rosa

Lidysan y Marcos - Los Mol Yo uso el servicio de estadísticas y contador de Google Analitycs... no puede mostrarse en el blog, eso si, pero sus resultados son increíbles para controlar todo ese tipo de datos.
http://elescaparatederosa.blogspot.com/2008/03/sistema-de-visitas-y-estadsticas-google.html

Rosa

Yanara Que raro... mi favicon sigue estando donde siempre y está online...

http://rucicg.bay.livefilestore.com/y1p37FeB7NfBEzVlIPKRoTSwkrUPs4M4gbYwl9WuhvHCZb4usCSlr2CPWCwLYCVYNf45VyaeM2p3do/favicon2.ico

Chipilofan

Hola, rosa aqui por aqui perdido jeje sin nada que hacer y entre y te visite, bueno como me habia ausentado antes, ahora de nuevo te visito, espero que estes super bien, y espero me recuerdes, y pasate a dar un paseo por mi blog tambien!!!Saludos...

Feuer Stolzes

Excelente post.. me sirvio de mucho jeje :)
--
Rosa: como le puedo agregar un borde a la fecha, osea como se muestra aqui en la siguiente imagen http://i35.tinypic.com/5of28i.jpg - :$ Saludos y Muchas gracias

PD: En mi perfil salen muchos blog el mio es
http://xdarkblood.blogspot.com/ :D

ANRAFERA

Gracias por tu trabajo. Saludos.
http://www.ramonferrera.blogspot.com (Diseño Grafico con Photoshop)

Zux

hola

gracias quedo excelente

busque por mucho esto y nunca lo pillaba, pero quiero hacer lo mismo con los títulos de las entradas (también lo estoy buscando hace tiempo), sabes como hacer esto en los títulos de las entradas???

Rosa

Zux Pues sería lo mismo pero en
.post h3 {

Zux

perfecto ;)

gracias!!!!!!!!!!!!! :):):):):):):)

Sitios Amigos

dodne puedo ver los colores para mi blog ?

Rosa

Sitios Amigos Arriba, en mi menú, en Imprescindibles tienes tablas de colores.

Elios

Y para redondear las esquinas para que no se vean cuadradas cual es el código CSS?

JULIO CÉSAR

Saludos Rosa, eres muy famosa y popular, revisando tu blog he aprendido mucho, tengo una consulta sobre los elementos de página en el diseño, salen uno sobre otro en una sola columna pero al ver el blog todo es normal.
Este cambio sucedio de repente sin darme cuenta.. no se que hice mal.
Estoy asustado mi url es http://educacionreligiosaperu.blogspot.com/

Rosa

JULIO CÉSAR No te asustes, es un fallo de Blogger en estos días... se arreglará y además no implica para nada al resto del blog.

Rosa

Elios Hay un código si, pero que no funciona en IE, solo en Firefox.

Viva La Danse

Hola Rosa!
Estoy tratando de cambiar la fuente y tamaño de los títulos de la sidebar, pero no encuentro el codigo .sidebar h2
Pongo el buscador y tampoco lo encuentra :S
Raro porque tengo plantilla Mínima, y casi no le hice cambios a la sidebar.
Me podrías ayudar!?
Gracias y saludos!

Rosa

Viva La Danse Si no lo tienes añádelo directamente antes de ]]></b:skin>

Rosa

Viva La Danse En la entrada lo digo... lo de que si no lo tienes...fíjate bien.

Ana

Muchísimas gracias Rosa, me ha quedado genial y muy facilito de hacer, gracias por todo el tiempo que pierdes para ayudar a los demás
Un besote

Rosa

Ana ¡Un beso!

Marcelo Lemos

yo tengo una duda completamente diferentes (bueno no tanto :)) quisiera saber como poner un background en el titulo el cuerpo y el pie del blog que en suma sean una imagen pero hecha de 3 partes se entiende? yo tengo la imagen y la idea pero quiero que el cuerpo se pueda "estirar" si llego a aumentar o disminuir la cantidad de post a mostrar. muchas gracias de antemano!

Rosa

Marcelo Lemos Mira si esto te ayuda:
http://vagabundia.blogspot.com/2009/09/imagenes-de-fondo-redimensionables.html

Miguel Angel

buen truco rosa!! :)

Zux

Hola

yo estuve aquí hace algún tiempo y logre hacer los cambios con éxito

ahora, quiero hacer lo mismo en otro blog, pero no resulta, si me puedes ayudar estaría muy agradecido

http://versusrock.blogspot.com/

pd: lo que deseo es modificar los títulos de las entradas, colocar el fondo de color y cambiar la tipografía

Rosa

ZuxSi es para los títulos de las entradas has de hacerlo aquí:
h3 {
font:1.3em Arial;
margin-bottom:3px;
color:#3C78A7;
font-weight:bold;
}

Zux

hola Rosa

Intente realizar el cambio, pero no resulta, :(
es raro, ya que hago los cambios mas básicos como cambiarle el color al titulo cambiándole el código del color por #000000 y no se manifiesta ningún cambio

Rosa

Zux Yo tampoco lo entiendo, son cambios básicos que funcionan en todas las plantillas. :o

Dark

Hola rosa una pregunta, quisiera hacer lo mismo pero con un gadget que esta debajo del post me funciono con las sidebar pero me gustaria hacer el cambio a unos titulos q estan abajo de los post. muchas gracias besos y abrazos.

Rosa

Dark ¿Para que blog? todas las plantillas no son iguales y tu tienes varios blog en el perfil... por favor, la próxima vez indícame el blog concreto.

Dark

los siento, este es el blog http://dynamiccollector.blogspot.com/

Dark

De ante mano gracias, besos y abrazos

Rosa

DarkPrueba incluyendo esto antes de ]]></b:skin> y pones ahí entre las llaves lo que pusiste para los otros, veremos si sirve...

.main .widget h2{
AQUI LO MISMO QUE PARA LOS OTROS
}

Dark

HOla rosa gracias por tu ayuda pero cambie el diseño del blog ya q el anterior era muy complicado y tenia muchos errores, te pido ayuda una vez mas me gustaria que las sidebar de mi blog se puedan diferenciar del body, pero ya he porbado con algunos trucos y ninguno me ha servido espero q me puedas ayudar y disculpa por siempre pedir ayuda :$ gracias.
Besos y abrazos att
Dark
este es mi blog
http://dynamiccollector.blogspot.com/

Rosa

DarkYa te contesté a esto mismo... procura no repetir la pregunta en más de una entrada o recuerda donde las dejas al menos...

Dark

si me habia olvidado por completo muchas gracias.
besos y abrazos.

Potter.weasly

Hola :), muy bueno tu post, lo hize con mi mínima black y funcionó de perlas ;), Lo que en verdad yo no buscaba esto, yo buscaba el modo de poner una imagen de modo que se vea algo parecido a esto, fíjate: http://www.hoshi-hisa.blogspot.com/

¿Lo ves? el tiene puesta una imagen en vez del título...como se podría hacer eso? He estado indagando en mi plantilla pero nada.:-|
Gracias de antemano!

Rosa

Potter.weasly En ese blog lo que hacen es no ponerle ningún título al gadget e incluir la imagen directamente dentro del gadget.

La hormiguita

Gracias Rosa.... me salió maravilloso..:)

Filigrana

Hola Rosa! Te hago una consulta. En un blog que estoy haciendo, puse los elementos de la sidebar con un borde y los títulos con fondo en color. Pero quiero que el contenido de cada caja, tenga un margen, es decir que no esté pegado al borde, pero al hacer esto se aleja tambien el título, se entiende? Y no quiero que pase eso!
El blog es este http://draftsss.blogspot.com/
Espero se entienda lo que digo, y puedas ayudarme.
Un abrazo.

Filigrana

Rosa! Después de mirar un montón de plantillas lo pude hacer, agregando sidebar widget, sidebar widget content.
Gracias igual y disculpá la molestia!
Saludos!

miztutoz

Hola Rosa

Estoy haciendo un tutorial basado en todos los cambios que le he hecho a mi blog y blogger no me deja pegar algunos códigos...creo que los detecta como spam. :O
La primera vez que me paso, intente pegar unos códigos(el de la marquesina desplazándose) y blogger no acepto los códigos y (me salio un mensaje spam) y zazz apareció la marquesina en mi entrada.(tuve que pegar los códigos como imagen)
La segunda vez (estaba tomando de referencia ESTE tutorial)me ha pasado al intentar pegar
]]> (b:skin)(en vista previa aqui tampoco sale)
he intentado pegarla en html y en redactar pero nada (]]> b: skin desaparece solo sale ]])

¿Puedes decirme que puedo hacer para que me deje pegarlo y verlo en mi blogger.?
veo que tu si puedes hacerlo...
gracias:)

http://miztutoz.blogspot.com/

miztutoz

Hola Rosa :
Un problema menos para mi, acabo de encontrar la solucion a mi problema en (http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process)traduce los codigos para poder pegarlos en blogger.
No se si es la misma que tu usas(me agradaria saberlo)gracias.

Rosa

miztutoz Cualquier convertidor a código plano servirá... incluso yo, si el código no es demasiado grande o engorroso, suelo hacerlo de forma manual.

-º_Rzm_º-

rosa en mi blog esta asi .sidebar h2 { separado no importa?

Rosa

-º_Rzm_º- Supongo que no...

Yra

Hola Rosita, yo otra vez por aqui, te comento que hice (según yo) todo lo que decias para poner la imagen y nada que me salia, entonces comence a leer todos los comentarios anteriores y nada que veia mi solución, pero luego que he releído tu post y que se me prende el bombillo, lo estaba haciendo mal, :O pero ya lo consegui, si gustas pasa a ami blog. http://yra-hadita05.blogspot.com/

Un beso y gracias por siempre estar a la par con la tecnologia, no se que haria sin ti :D :D

Rosa

Yra A mi me pasa si... cuando algo no me sale, lo dejo para después... y suele funcionar :D

TRANSFORMERS

de nuevo te molesto rosa pero mi plantilla no se parese a los codigos que veo antes mencionados mira quisiera mostrar una imagen diferente en el sidebar pero cuando la pongo aparese flotando en cualquier lado de la plantilla. como podria poner esa imagen en los ttulos del sidebar ademas, tambien los bordes afectan la imagen me Ayudas Por Favorcito

TRANSFORMERS

@TRANSFORMERS
se me olvidava esta es mi web oficial-web.blospot.com

Rosa

TRANSFORMERS En tu caso irian los cambios en h2 {

TRANSFORMERS

de nuevo aqui molestando rosa mmm lo que pasa que quiero poner una imagen diferente en cada titulo de la sidebar es decir una imagen diferente para archivo del blog, enlaces y otras ams. pero cuando coloco el codigo la imagen aparese arriba del titulo. ayudame como puedo poer esta imagen en los titulos:

http://1.bp.blogspot.com/_BNWjArS56Xg/TK-8oSHOzJI/AAAAAAAAAAw/4TKsbbxN6rg/s320/Sin+t%C3%ADtulo-1.png

TRANSFORMERS

hola rosa problema solocionado, buscando y a la 5 fue la vencida y ya quedo la web pero ahora tengo problemas con la imagen de cabezera no te entendi que es lo que debo de hacer?? para que quede bien centrada y se vea completa??

Rosa

TRANSFORMERS Reducir la imagen al tamaño que te dije y volver a subirla.

Miguel

Hola de nuevo:

Ya estoy aquí sendo tan tiquismiquis como siempre...

Este truquillo me ha salido bien en todos los widgets excepto en el se "Seguidores". En ese he probado a ponerlo de unas maneras y de otras, y no hay forma de que aparezca la imagen al lado del título del widget.

El widget de "Seguidores" siempre me ha dado problemas: Primero no me aparecía, luego tuve que ponerle un código especial que encontré en tu blog, y ahora no me aparece la imagen...

En fín, ¿Se puede solucionar?

Rosa

Miguel Has añadido en el título del gadget la clase class='title' pero después en el CSS has puesto .titleseguidores y es por eso que no va...
La class añadida al título debería ser class='titleseguidores' ... han de ser exactamente igual para que funcione.

Miguel

@Rosa:
Lo he corregido tal y como me has indicado... Pero sigue sin funcionar.

Lo he porbado de todas las maneras posibles, pero nada... No funciona.

Quizá es que no se pueda...

Rosa

Miguel Si se puede porque yo misma lo he comprobado.
Vamos a tratar de hacerlo de otra manera...

Elimina la class del título del gadget y dejalo sin class, después en el CSS cambia lo que tienes para el por esto:
#Followers1 h2{
background: url(http://3.bp.blogspot.com/_7CEghmHxCac/TMGeRzTyJsI/AAAAAAAAAeY/SgAD94WjBdo/s1600/pieza+tetris+verdegigante.JPG) no-repeat left;
border: 0px solid #808080;
padding: 5px 5px 5px 45px;
}

Miguel

@Rosa Conseguido!!!!

Muchas gracias de nuevo por todo. Sin tí el blog no sería lo que es.

Rosa

Miguel ¡Bienn! :D

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S