30

Cambiar las barras de separación por una imagen


Recuerda
que aunque yo pruebe los "trucos"

Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
En un post del blog de Gem@ se explica, de dos formas distintas, como colocar una imagen (barra o divider) separando cada post.
Yo lo he logrado de otra manera:

1- Situate en Plantilla, edición HTML

2- Busca el siguiente código:
post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em; }

3- Cambia esta parte: border-bottom:1px dotted $bordercolor; por esta otra background:url("http://URL DE TU IMAGEN") no-repeat bottom left;

Quedaría así:

.post {
margin:.5em 0 1.5em;
background:url("http://URL DE TU IMAGEN")
no-repeat bottom left;
padding-bottom:1.5em; }

De la misma manera he sustituido la barra de separación en la sidebar por una imagen:

Buscas este código en tu plantilla - HTML:

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

Y lo sustituyes por este:

.sidebar .widget, .main .widget { background:url("http://URL DE TU IMAGEN")
no-repeat bottom left;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Tienes que cambiar la url (dirección) "URL DE TU IMAGEN" por la de tu barra.

No necesitas haber eliminado antes la barra que viene en Blogger, al hacer esto se elimina automáticamente, dando paso a la imagen.

Entradas Relacionadas:

30 comentarios:


Azul...

¡Mi niña apañá! No te tengo en el olvido, dejo constancia, es que ando como loca con la mudanza, ya ves que, por no tener, ni cama propia tenía, así que estoy comprándolo todo, pero todo (me arroparé hasta donde me lleve la cobija, claro jeje)

Te dejo 300 bessototes!!!

Gabriela

que tal rosa!!
sabes he tenido muchos problemas para
editar el titulo de mi blogs, hice lo que muestras por ahí pero se borró todo una imagen que había puesto.
a ver si me puedes ayudar, héchale una miradita al mio para que veas la cagada que tengo.

Rosa

Hola Gabriela!

En tu plantilla en HTML, extiende las plantillas de artilugios y luego busca esta parte del código:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)'
type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>


Elimina los dos
<data:title/> del código.

Suerte, a ver si asi resulta!

Gabriela

gracias , mil gracias. eres una diosa de los blogs.
Hice tal cual me señalaste y quedó como yo quería, solo tuve que hacer unos retoquesitos en unos valores de padding o algo así.
gracias.
te sigo de cerca, te puse entre los blogs que sigo.

Rosa

Me alegro que te resultara, y de diosa nada de nada, ni mucho menos, casi todas estas cosas las recojo antes de otros sitios, solo que soy muy cabezona y "destripo" plantillas a gogó, je, je...

Nicolás Dobson

Gracias por el aporte, es muy útil, pero no me funciona en la zona de la sidebar, me había resultado, pero cuando puse el de los post, se me murió el otro :S

qué hago??

Rosa

Nicolas, algo has hecho mal...acabo de hacerlo de nuevo en mi blog de pruebas y va perfecto. :-(

Diego

Hola, Rosa!

Encontré tu página navegando en Google y me pareció muy buena, gracias por ese trabajo. Te planteo una pregunta parecida a lo que trata este artículo: ¿Cómo haces si lo que quieres que esté entre artículo y artículo sea un pequeño banner de adsense?

La plantilla que yo uso es Tekka.

Saludos!

Rosa

Diego siento no poder ayudarte en eso...de Adsense no tengo ni idea, como ves no uso publicidad...no me gusta ni me interesa y no me he molestado en saber nada del tema. Lo siento. :-(

Schwarz.Schnee ۞

espero que me conteste en mi blog o_o, ya instale una imagen divisoria solo que nose como hacer apra que este en el centro.

me ayudas?

Rosa

Schwarz.Schnee ۞, debajo de la primera llave del código, esta {
añade esta línea:

float: center;

No tengo por costumbre contestar en otro blog que no sea este, además, no sabría en cual contestar, puesto que tienes más de uno...

MARGA'S HAPPY PATCHWORK

Hola Rosa, Me ha salido bien la imagen, pero no me ocupa toda la linea de las entradas, ¿es posible que se repita? ¿como por favor?

Rosa

MARGA, si vas a usar el "enmarcado" de entradas no podrás usar esto a la vez...creo que estás lanzándote a poner todo y eso te traerá problemas. Piensa en lo que quieres conseguir y trata de lograr eso, cuando acabes ve a por lo siguiente...te he contestado en alguna consulta anterior y creo que ni te has dado cuenta...

isdaya

Muchas gracias, esto me ha servido de mucha ayuda, pero yo queria saber si tambien se puede cambiar la linea que sale alrededor de las fotos para que salga la barra separadora en vez de esa linea horrible de color, no se si me explico... espero que si.

Rosa

isdaya , pues lo siento pero no...no entendí:S

isdaya

Rosa ya esta arreglado, y si, me explique un poco mal perdona.
Voy a ver si encuentro la entrada idonea para una consulta que te quiero hacer.
Besillos.

Duendes Juguetones

Hola de nuevo Rosa!!!
Estuve intentando poner una imagen que separase las entradas, pero no lo he conseguido.No localizo la parte del código que pones, ya que en mi plantilla viene diferente. Mi plantilla no trae barras de separación para las diferentes entradas ¿Tiene esto algo que ver? ¿tendría que haber colocado primero una para luego cambiarla por una imagen?
Espero que me puedas ayudar!!!! Un besote muy grande!

Rosa

Duendes Juguetones Localizas esto en tu plantilla:
.post {
margin-top:0px;
margin-right:0px;
margin-bottom:30px;
margin-left:0px;
}

Y lo modificas así:
.post {
background:url("http://URL DE TU IMAGEN") no-repeat bottom left;
margin-top:0px;
margin-right:0px;
margin-bottom:30px;
margin-left:0px;
}

Donde dice "http://URL DE TU IMAGEN" tienes que colocar la url de la imagen que vas a usar.

Duendes Juguetones

Hola Rosa!!!
Ya probé y sale bien, lo que pasa es que se me monta en la fecha de la siguiente entrada. Probé a ponerla centrada, y sale bien, pero sigue al mismo nivel que las "reacciones" a la entrada ¿como puedo bajar un poco la barra???

Muchas gracias de antemano!!!!
Y un besote!

Minstrel

Hola, muy bueno, me sirvio mucho pero hay una cosa que no me gusto y no se como cambiarla.
No solo me agrega la barra en la sidebar sino que tambien al final del todo el blog y no quiero que tambien este ahi, sabes como sacarla pero que siga estando en la sidebar???
Mi blog: http://minstrelfromhell.blogspot.com/

Rosa

MinstrelCambia esta parte:
.sidebar .widget, .main .widget { background:url("http://3.bp.blogspot.com/_jbSqQTEZxU8/S5ha_qiuk1I/AAAAAAAAAGo/zSrRwA9kgZs/s400/SeparadorSidebar.jpg")
no-repeat bottom left;
margin:0 0 1.5em;
padding:0 0 3.8em;
}

Por esto:
.sidebar .widget { background:url("http://3.bp.blogspot.com/_jbSqQTEZxU8/S5ha_qiuk1I/AAAAAAAAAGo/zSrRwA9kgZs/s400/SeparadorSidebar.jpg")
no-repeat bottom left;
margin:0 0 1.5em;
padding:0 0 3.8em;
}
.main .widget{
margin:0 0 1.5em;
padding:0 0 3.8em;
}

Para que la barra no salga también en los gadgets de las entradas.

Minstrel

Ya quedo como queria.
Muchas Gracias!!

Naiara

Hola de nuevo Rosa, Soy Naiara, de Duendes Juguetones, perdona que te insista, pero no me dijiste si había forma alguna de bajar un poco la barra que coloqué al final de las entradas (el problema es que se me monta en las reacciones)

Gracias de antemano y un besote!

Rosa

NairaPerdona cielo, ando con problemillas en mi proveedor de internet en estos días y algunos comentarios no me están llegando a mi correo y tengo que andar mirando cuando puedo por aquí...

Prueba añadiendo lo mismo, la línea con el background, en esta otra parte:

.post-footer {
padding:0px;
margin:0px;
color:#800080;
font-size:80%;
}
Me cuentas luego como fue...

Duendes Juguetones

Hola Rosa!!!!
No te preocupes, que esto de internet ya se sabe como va ;)
Acabo de probar a hacerlo como me dijiste, pero nada, no sale ni la imagen :( así que no tengo ni idea de que hacer!! SOS ;)
Espero que me des otra alternativa.
Besitos mil!!!!!

Patricia Ovies

Hola de nuevo, fuente de sabiduría,
voy a buscar lo primero por si ya me pudiste responder a las cuestiones varias pero, aqui ca otra de las mías, estoy intentando separa las entradas por una barra divisoria y por más que bisco expandido y sin expandir en mi plantilla scribe, no veo estos códigos. Si, que soy una pazguata, ¿puedes, por favor socorrerme?
Bss

Rosa

Patricia Ovies Lo que si puedo decirte, es que están, aunque tu tengas ahí otro datos, pues depende del diseño. Lo qe te interesa es esto:
.post {

Y justo debajo de ahí, puedes incluir sin problema el código que indico para la barrita divider.

Patricia Ovies

Lo acabo de hacer....y mi desastre persiste, se queda encima de la barra anterior y aplasta el escrito por....
Yo ya no sé. No tengo palabras para los lios en los que te estoy metiendo, fuente de sabiduría

Patricia Ovies

Rosa,
He hecho cambios, lo que no logro quitar es la barra pero:
He puesto margin bottom 8px, era 24px y he añadido padding bottom 3em que tampoco existía.
¿Que te parece?

Rosa

Patricia Ovies Pues que exactamente ahí está el quid... en los margin y padding que son los que acercan o separan... se juega con esos valores, hasta dar con lo que necesitamos.
Si te parece quedó ahí bien, entonces bien está.

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