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...
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.
30 comentarios:
¡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!!!
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.
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!
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.
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...
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??
Nicolas, algo has hecho mal...acabo de hacerlo de nuevo en mi blog de pruebas y va perfecto. :-(
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!
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. :-(
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?
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...
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?
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...
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.
isdaya , pues lo siento pero no...no entendí:S
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.
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!
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.
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!
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/
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.
Ya quedo como queria.
Muchas Gracias!!
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!
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...
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!!!!!
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
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.
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
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?
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
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.
Comentar con el formulario antiguo