142

Entradas y widget enmarcados por separado

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Me preguntan a menudo como conseguir un marco que bordee las entradas y los widget del blog por separado, tal como yo los tengo en El Escaparate.
Explicaré como hacerlo, teniendo en cuenta que usaré como referencia la plantilla Mínima de Blogger.

Enmarcar cada post por separado

[1] Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código:

.post {

[2] Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:

border:1px solid #000;

El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.

[3] Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:

padding-left: 10px;

El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:

border-bottom:0px dotted $bordercolor;

[4] Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:

background: #ddd;


Enmarcar los widgets en la sidebar

[1] Buscamos ahora esta parte del código:

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


[2] Tendremos que separar antes de nada el código de los widget de entradas y de la sidebar, de tal manera que esa parte nos quede así:

.sidebar .widget{

}

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


[3] Añadimos justo debajo de .sidebar .widget{ las mismas líneas de código que añadimos en las entradas, más una nueva que controlará la separación entre cada widget:

.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}


[4] Igual que antes, para los post, si queremos darle color al fondo de cada widget, hemos de añadir una nueva línea al código anterior (siempre antes de la llave de cierre }:

background: #ddd;
Captura de ejemplo


Nota: En ambos ejemplos el color de fondo es gris (#ddd;) pero podemos cambiarlo por el que nos guste.

Actualización
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código en cada sección, es decir, en .post { y en .sidebar .widget{, teniendo en cuenta que se verá correctamente en Firefox, ya que en IExplorer las esquinas se verán cuadradas:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;

Entradas Relacionadas:

142 comentarios:


Natxo Rovira

Me funciona!!!

Gracias, Rosa, eres un sol!!

Ahora buscaré la manera de hacer los bordes redondeados, me parece que lo he visto en algún sitio...

Un beso

Noa

Esto es lo q t pregunté,no??? Q buena eres!!! Gracias!
Ahora a ver s soy capaz de hacerlo...,jajaja.
Un beso!

Javier Cercas Rueda

Rosa, de nuevo acudo a ti. Estoy intentando incluir en mi blog lo de Ranking de comentarios recientes.

He puesto los feeds de comentarios en modo completo.

Pego en un post el script de Barriodelosrosales (poniendo la dirección de mi blog donde dicen). Publico la entrada....Y NO OCURRE NADA.

He hecho un comentario posterior en el blog, por si el asunto no es retroactivo, y nada.

¿qué hago mal? ¿me puedes ayudar?

Anónimo

Gracias Rosita, de nuevo uno de tus datos me ha servido, ahora cada vez mi blog es más diferente.

Besos desde Viña del Mar, Chile!!!

Anónimo

Natxo, he visto tu blog, ha quedado precioso.
Ya sabes que el efecto de bordes redondeados en IExplorer no se aprecia, pero en Firefox si.
No obstante de las dos formas, se ve muy lindo.
¡Un abrazo!

Anónimo

Noa, creo que era algo así ¿no? Natxo y tu andabais tras lo mismo...

Por cierto, sigo sin poder abrir el archivo...¿no podrías mandarlo en otro formato?
Por ejemplo, copiando el código en tu blog de notas y enviándolo así, como simple archivo de texto...

Anónimo

Javier, yo hace mucho tiempo que lo coloqué en mi blog, y la verdad es que no recuerdo con exactitud que problema había...pero si recuerdo que algo había...una comillas "raras" o algo así...

Voy a darte el código, tal cual lo tengo yo colocado en El Escaparate, a ver si así va...

He puesto ya en el código la url de tu blog, o sea, que solo has de copiar y pegar, lo he probado y a mi me salen sin problemas tus comentarios, ;-)

<script src="http://home.barriodelosrosales.es-a.googlepages.com/comentarios.js"></script><br /><script>var numcomentarios=35;var numcaracteres=300;var textnumcomments="<b>Número total de comentarios en el blog: </b>VAR<br/>"; var textranking="<b>Ranking de comentaristas de los últimos VAR comentarios</b><br/>"; var textlastcomments="<hr width=80%><b>Últimos VAR comentarios</b><br/>";</script><br /><script src="http://javiercercas.blogspot.com/feeds/comments/full?max-results=75&alt=json-in-script&callback=listadocomentarios "></script>
Consigue el ranking para tu blog en : <a href="http://www.barriodelosrosales.es/"target="_blank"> Barrio de los Rosales</a>

Fernando

Cree q quede bien ste truco n una plantilla d 3 columnas?
Yo tengo mis dudas.
He estado probando este truco n mi blog d pruebas y funciona muy bien, la plantilla s d las dimensiones de su sitio.
Al = q Naxto quisiera hacer los bordes redondeados
Como lo hago?

Anónimo

Fernando, no tiene porque quedar mal...pero bueno, eso es a gusto de cada uno.
Para los bordes redondeados, consulta de nuevo la entrada, he añadido una actualización con la forma de hacerlo.

Javier Cercas Rueda

!mil gracias por tu ayuda! ha funcionado perfecto y ya lo tengo puesto.

Anónimo

Javier, me alegro mucho :-)

Anónimo

Hola Rosa, te felicito por ese Blog tan útil y didáctico. Soy un artista que he iniciado un Blog, y doy mís primeros pasos gracias a tí. Te puedo decir que estoy consiguiendo resultados importantes.

Recientemente siguiendo los problemas comunes que veo entre tus visitantes, seguí los que explicaste para ensanchar el espacio de mi blog, esto lo obtuve sin problemas, pero la cabecera del mismo, no se modificó; lo mismo que un traductor google que integré, el cual, quedó más hacia el centro. Por favor Rosa, que puedo hacer para resolver este problema.

Saludos,
Carlos Santos

Anónimo

Carsa, bienvenido! :-)

Busca esta parte del código de tu plantilla:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #7f7f7f;
}

Ahí has de cambiar el valor del width, por el del ancho de tu blog, para que la cabecera tenga ese mismo ancho:

#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid #7f7f7f;
}

En cuanto al traductor, lo he probado en una copia de tu plantilla y a mi me sale correctamente.
No se como lo has colocado tu, pero la forma correcta es, pegar el código en un nuevo elemento HTMLJavascript, y debería verse justo sobre "sitio web de la semana"

Rosa Mari y Santi

Hola Rosa
soy bastante nueva en este mundo del blog. Tu página me va ayudando mucho a modelar mi blog a mi gusto. Además cada vez que te leo encuentro algo que tengo que probar.

Gracias por tu ayuda

Anónimo

Rosa Mary (tocaya mía por cierto) gracias a ti por tener un momento para agradecer...

padam

el post que estaba esperando! gracias rosa, lo probaré en cuanto pueda!

Jack Hammer

¿Qué te parece cómo va quedando?

Anónimo

Maestro, te sale todo sin problemas por lo que veo. :-)

Jack Hammer

Es que Maestro tiene una buena Maestra ;-)

Anónimo

Hola Rosa perdona que te moleste, soy Gabi, cuando e puesto estas entradas en mi blog al mirar aver como quedaban se me a puesto un destornillador y una llave fuera en el blog y no se como quitarlas, si pudieras alludarme te lo agradeceria mucho, todo lo que se te lo devo a ti por yo de esto no se nada un beso rosa y espero que no te moleste gracias.

Anónimo

Gabi, eso es normal, en Blogger esas herramientas se llaman de "edición rápida" pero no son ningún problema, ya que solo las ve el administrador del blog, tus visitas no las ven.

Además tu solo las ves si estás dentro del panel de Blogger, cuando te desconectas del panel y entras a tu blog como cualquier visita más, no las ves.

Mas información

Profesor

Hola Rosa, otra vez gracias por poner informacion que todos queremos saber, pero en este caso no me funciona tu truco. Imagino que no es por tus datos sino resultado del odio que mi portatil en particular y la informatica en general sienten hacia mi :)
Bueno si me puedes ehcar una mano estoy en www.spanishmalaga.blogspot.com

Espero a que tu varita magica que todo lo arregla toque mi blog.
Muchas gracias por todo, eres la mejor de la red. Saludos.

Anónimo

Profesor, tranquilo que ni es tu portátil ni nada parecido...en realidad si que sirve para tu plantilla, pero esta entrada es un poco como orientación y si sigues los pasos punto por punto, resultará tal cuál en una plantilla Mínima o similar...la dificultad en la tuya es el color de fondo que está aplicado en sidebar y main (que en realidad es una imagen), así que los cambios serían más complejos.
Para que te hagas una idea de como quedaría más o menos, mira aquí (solo he cambiado la sidebar):
http://plantillasoloparapruebas.blogspot.com/

Kawzar

Hola rosa!

Me ha servido mucho tu blog, he aplicado algunos de tus "trucos". Gracias por compartir con nosotros lo que sabes!

mira, mi problema es el siguiente:

como le puedo poner un fondo como a las entradas a mi lista de links y mi archivo del blog? porque en uno de mis blogs, he puesto un fondo oscuro, y le he puesto borde y color solido de fondo a las entradas para que se lean sin dificultad y quedo bien (gracias por eso :-)), pero la lista de vinculos, y el archivo, al no tener fondo solido, no se ven bien. quiero hacer que luzcan como las entradas, no se si me explico. Me gustaria que me solucionaras este problemita. Desde ya gracias !

pd: el problema lo tengo en este blog

Anónimo

Macarena, eso que quieres es lo mismo que explico en la entrada, en esta parte:

Enmarcar los widgets en la sidebar

Unknown

Hola rosa. Una pregunta. He visto el blog de Luis Enrique y me ha gustado mucho su apariencia: http://luisenrique21.com/WordPress/. ¿Podría dar una apariencia igual o similar en blogger? Me refiero por la transparencia del color de fondo de las entradas. ¿como puedo conseguir la imagen del fondo del blog?. Gracias. Esta noche investigaré.

Anónimo

Javier, el efecto de ese blog que dices, está hecho con tres imágenes, la del fondo, la del main que es semitransparente y la de la sidebar (semitransparente también), colocadas con las "órdenes" adecuadas, eso si.

Verás, no se lo digas a nadie ;-) he "tomado prestadas" las imágenes del blog de Luis Enrique y he estado haciendo alguna prueba en una especie de "copia" de tu blog.
Lo ves, lo estudias, y me dices algo...¿OK?

Experimento

Procura decirme algo pronto, porque a veces "se me va la olla" y jorobo los blogs de pruebas...:-)

Anónimo

Me quedo boniyo mi blog con este adorno......

una cosa el siguiente código que figura asi

.sidebar .widget{

corresponde a

.sidebar .widget {

Anónimo

El blog de Patan, si es el mismo código, lo que sucede es que yo para explicar cualquier cambio casi siempre tomo como referencia la plantilla Mínima y en ella este código comparte propiedades con el main, algo así:
.sidebar .widget.main .widget {

Por eso digo que antes hay que separarlos:
.sidebar .widget{

}

.main .widget {

Eso no es necesario cuando en la plantilla ya está así, o cuando la plantilla no tiene la propiedad .sidebar widget{ que entonces se añadiría directamente en el código.

Unknown

Bueno Rosa te paso a molestar de nuevo con una consultita, pude hacer andar el tema de el enmarcado de la sidebar, quedo mas o menos lo que buscaba para crear un "menu" para el blog.

La cuestión es que me gustaría saber como ponerle fondo a la palabra del titulo de cada agregado en la sidebar

Otra cosa es como cambiarle el tamaño de letra lo puedo hacer pero me cambia también la de los post del main q es lo que no quiero

Desde ya muchas gracias nuevamente la verdad que muy atenta con esto de la ayuda a los nuevos blogger y a los no tan nuevo por lo que anduve revisando tu blog

Saludos desde Argentina

Anónimo

Centro de estudiantes, para ponerlo un fondo de color o una imagen a los títulos de la sidebar, consulta en esta entrada

Ahí verás que la zona para hacerlo es sidebar h2{

Pues bien, para controlar el tamaño del texto de los titulos en la sidebar, también sería ahí:
.sidebar h2{
font-size:90%;

El 90 es el tamaño en porcentaje, puedes poner el que necesites e incluso usar pixeles:
.sidebar h2{
font-size:10px;

Unknown

GRACIAS ROSA.

Pude realizar el menú a un costado esta en este momento como prueba solamente.

Tengo 4 problemitas que no se como se hacen en html

1. Al darle marco al el "main" osea las entradas. no hay problema pero me gustaria darle fondo al titulo de la entrada.

2. Ademas de eso tengo un problema me queda muy pegado el marco a la barra de botones de arriba, no se como bajarla sin que se bajen la barra de menu.

3. Me gustaría anexar un reloj que tengo pero no quiero que quede dentro del recuadro de la sidebar. osea que quede arriba de todo la sidebar y que no quede encuadrado. Yo supongo que se debe colocar directamente en el html y no como elemento agregado pero cuando hago eso no aparece y me desconfigura el recuadrado de la side bar.

4. En el menu que realice de la side bar no se como poner en "negrita" los titulos de los elementos.

ACA PODES VER COMO SE VE HASTA AHORA:

http://cearqnoticias.blogspot.com/

COMO YA TE DIGO NO SE QUE HAGO SIN VOS ROSA MUCHAS GRACIAS Y EN LO QUE PUEDA AYUDAR AVISAME.

FELICITACIONES POR EL BLOG!!!!!!

SALUDOS ATENTAMENTE DRZAKEN

Anónimo

Centro de estudiantes, veremos si puedo ayudarte...

1- Fondo a los títulos de entrada.
En esta parte de la plantilla :

.post h3 {

colocas como para los de la sidebar:
.post h3 {
background: #ddd; (o el código del color que sea)
Si el .post h3{ no está en tu plantilla prueba a añadirselo, no en todos los casos funciona, pero sin probar no lo sabremos...

2- No puedo ver en tu blog a que te refieres...pero si se trata de "bajar" un poco las entradas, sería aquí:
.post-wrapper {
border:5px solid #808080;
padding-left: 10px;
width: 660px;
margin-left: -20px;
moz-border-radius: 10px;
webkit-border-radius: 10px;
}
Añade una nueva línea ahí con padding-top:0px;
En donde ves cero, la distancia que sea...

3- Para lo del reloj necesitaría ver su código...

4- Busca esto:
#sidebar dd a:link {
border-bottom-width: 0;
font-weight: normal;

y en "normal" pon bold

Ya me contarás...la plantilla no es de Blogger original y puede que no esté acertada en todos los casos...

Unknown

=D muchas gracias. =D

Newman

Rosa..mucho gusto,es la primera vez que te escribo y viendo la cantidad de utilidades que hay...no puedo màs que felicitar a todo el equipo de tù blog. La razòn por la cual te escribo es que por un error que cometì en mi plantilla,mis etiquetas se muestran a continuaciòn de mis post...y no al costado (sidebar). Pero al pinchar una etiqueta y me muestra en otra pagina el post..se ve todo correcto.
No se como poder arreglarlo, por eso acudo a tì. Te agradezco de antemano y muchas gracias.
Mi direcciòn es:
http://elblogdenewman.blogspot.com/
PD: si necesitas la plantilla Html,hazmelo saber para enviartela

Anónimo

Newman, el gusto es mio. :D

Más quisiera yo que tener un equipo, je,je, mi equipo soy yo y nadie más...

Verás he estado viendo tu blog y en cuanto a medidas en su código, está todo correcto. ahí no hay problema.

Lo que te pasa, sucede como tu bien dices, solo en la página principal, y eso es porque en alguna entrada de las que aparecen ahí (página principal) algo has incluido que hace ese efecto.
Podría ser cualquier cosa, por lo que tendrías que revisar esas seis entradas en busca de lo que puede estar causando el problema, que podría ser cualquier cosa...desde una imagen, hasta una justificación mal hecha en el texto...

Newman

He revisado cuidadosamente y no logro encontrar nada hasta ahora. Tendrè que conformarme con dejarlo asì por el momento. Te agradezco el gesto de contestar mi consulta.
Un cordial saludo Rosa

FERNANDO ALONSO MUÑOZ CARBALLEDA

Blogs como el tuyo son muy necesarios. Gracias por tu iniciativa. Te tendré en favoritos

internet

Hola, amiguita muy interesante tu blog, tengo muchas dudas y creo que usted es la unica que podria ayudarme.
1. Busco el .sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
y no lo encuentro solo encuentro este cofigo: .sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

y no se que hacer no me sale, yo estuve buscando desde tiempo para poder hacer eso y me alegre cuando lo encontre pero me di con la sorpresa que no me funciona, haber si me das una mano te agadeceria mucho.

Gracias

C.P.C Ebherson Eskan Ruiz

Anónimo

Eskan, como ya digo en la entrada esto es solo una orientación, usando la plantilla Mínima, la tuya no es de Blogger original, es por eso que hay diferencias en su código...


Añade lo necesario en:
.sidebar .widget {
margin-bottom: 1em;
}
Así:
.sidebar .widget {
margin-bottom: 1em;
border:1px solid #000;
}

Y para las entradas puedes incluir sin problemas en la plantilla lo que falta:
.main .widget {
border:1px solid #000;
}

DoN CeSaR

Muchisimas gracias rosa por tu pronta respuesta me funciono de maravillas cuando puedas le echas un vistazo y me das tu visto si :)... Alguna recomendacion o sugerencia seria aceptada... Una pregunta como puedo reducir ese espacio entre los sidebar laterales y la columna del medio ?? en vez de agrandar el del medio, quisiera agrandar la columna derecha e izquierda

Anónimo

DoN CeSaR, en esta parte del código:
#sidebarleft {
width:190px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarright {
width:190px;
float:right;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Deberás aumentar un poco el width:190px; por ejemplo a 200px, no aumentes demasiado o el blog podría "desbordarse".

DoN CeSaR

ROSAAAAAAAAAA muchas gracias jejeje ya lo hice buscando otras cosas lo encontre y asi mismo justamente fui probando, es que en el explorer se me sale del margen algunas cosas... Muchisimas gracias :D ... Ahora intente quitarle el fondo crema que le ves a mi blog y dejar el fondo de un color en especifico y no me funciono, quedaba marron oscuro incluso yendome al body y quitando esa imagen y las demas nada de nada

Pamen

Rosa, he empezado en esto de los blogs hace poco, con mi blog de cocina. Llevo como cosa de 1 año ayudándome de tu fantástico blog y me he decidido a comentar para felicitarte por tu blog y que de paso me eches una mano. Cómo hago para que la columna lateral se despegue de las entradas, esque están demasiado juntas. Mi blog es
PamenCocina
Gracias anticipadas.

Anónimo

Pamen, creo que debería bastar con cambiar el float de tu sidebar.

Localiza esto en la plantilla:
#sidebar-wrapper {
width: 230px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Y donde dice float: left; pones float:right;

Si eso no es suficiente vuelves por aquí ¿ok? Usa vista previa antes de guardar nada.

Anónimo

DoN CeSaR, has de borrar la url de la imagen en el body, así está en tu plantilla:
body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:#29303b;
line-height:1.3em;
background:#483521 url("http://www.blogblog.com/scribe/bg.gif") repeat;
}

Quitas la url para que quede así:

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:#29303b;
line-height:1.3em;
background:#483521;
}

Como ves solo queda en esa línea:
background:#483521;

Ese es el color del fondo, si cambias ese código por ejemplo así:
background:#ffffff;

Tu fondo será de color blanco.

Puedes ver los códigos para los colores aquí:
http://www.webtaller.com/utilidades/csscoder/colores.php

O buscar alguna otra web en Google con más variedad de colores.

Anónimo

DoN CeSaR, acabo de acordarme de un programita muy ligero y sencillo de usar que "copia" el código de cualquier color de una página, mira aquí:
http://elescaparatederosa.blogspot.com/2007/08/todos-los-colores-mano.html

Pamen

Gracias Rosa, pero ya lo arreglé renovando la plantilla. UN SALUDO y seguiré aplicando tus consejos.

Paula

Hola Rosa!
Hace un tiempo ya que no puedo escribir comentarios en tu blog :(

A ver si ahora puedo.

Bueno mi pregunta con respecto a esta entrada es que no he podido encontrar el código de la sidebar (por que quiero ponerle margen solo a los elementos en esta, ademas de separarlos entre si porque estan muy juntos)

Lo unico similar que he encontrado es esto:

/*-- (Lateral) --*/

#sidebar-wrapper {
float: right;
width: 210px;
}

#sidebar-wrapper ul{
padding: 0;
border-top: 1px solid #EAEADA;
}

#sidebar-wrapper li {
border-bottom: 1px solid #EAEADA;
padding: 8px 0 8px 5%;
}


#sidebar-wrapper li a {
font-size: 1.1em;
color: #554;
text-decoration: none;
width: 95%;
}

#sidebar-wrapper li a:hover {
background: #F0F0EB;
color: #654;
}

#sidebar-wrapper h2 {
color: $colortituloslateral;
font-size: 1em;
line-height: 30px;
margin: 0;
padding-left: 12px;
}


Me puedes ayudar por favor?

Este es mi blog: http://planetab.blogspot.com

Gracias :D

Anónimo

Paula, eso es porque tu plantilla no es original de Blogger, yo siempre hablo de las originales...

Verás, debajo de todo ese código que me muestras, añade esto:

.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}

Paula

Si!! ahí resulto!! Muchas gracias :)
Que haría yo sin ti Rosita :)

Ah! agregue, justo abajo de padding-left, padding-bottom y padding-top para despegar los elementos de los bordes superior e inferior de cada cuadro... no me traerá problemas o si :S

Anónimo

Paula, a la primera ¡genial!
No, no va a traer o no debería traerte ningún problema.

Paula

Que bien :)
Gracias!

[:: ––––•(-• Gåß®ÎëL™ •-)•–––– ::]

eres unica rosa .. pasate por mi blog..

saludos


:) WwW.DarkNnEs.BloGsPoT.CoM

saludos a todos !!

Anónimo

Saludos Rosa. No sé si alguien te ha preguntado ya esto, si es así, disculpa.

He hecho el truco para poner los marcos en las entradas, y le he puesto un color de fondo además. El problema es que el texto de la entrada, más los comentarios se quedan pegados arriba ( http://davidtroyagalvez.blogspot.com ), y quisiera ponerlos un poco más abajo.

¿Cómo podría hacerlo?

Gracias y enhorabuena por tu blog :)

Anónimo

Troya mira en esta parte de tu plantilla:
.post {
border:2px solid #8A0808;
padding-left: 20px;
padding-right: 20px;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background:#F2F2F2;
}

Añade un padding para la parte de arriba y otro para la de abajo:
.post {
border:2px solid #8A0808;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background:#F2F2F2;
}

Anónimo

1000 gracias, Rosa. ya lo he conseguido: -----> http://davidtroyagalvez.blogspot.com

Además, ya he aprendido cómo se configuran los márgenes, para poder hacerlo en futuras ocasiones con otros elementos :D

Gracias ;)

Ahora una preguntita más, si no es molestia. He visto que has cambiado el "publicado en" por "publicado a las" ¿Cómo lo has hecho? Es que me gustaría cambiarlo porque creo que queda mucho mejor así...

¡Saludos!

Anónimo

Troya , eso es fácil ya que se hace en el mismo panel de Blogger, es una de sus opciones.
Mira, ve a la parte de Diseño(donde se añaden los gadget) allí en la cajita que figuran las entradas del blog pincha en el enlace que pone "editar" y que está dentro de esa caja, allí verás la opción para cambiar eso.

Mary Lovecraft

querida Rosa, hace una hora que estoy buscando este trozo de simple código

.post {

en mi plantilla y no doy con él...¿habría otra manera de hacerlo?? la plantilla a que me refiero no es blogger sino una adaptación para blogger, ya sabes:

http://wwwalter-nativa.blogspot.com

a ver si pudiera ser...estoy intentando dar forma a este nuevo blog y esto de enmarcar las entradas y widgets por separado lo andaba buscando pues le puede dar al blog más apariencia de "revista" virtual, que es lo que yo busco en Alter~nativa.

espero tu respuesta, muchísimas gracias de antemano y besote grande para tí!! :***

Anónimo

Mary, en tu plantilla lo que equivale a post{ sería esto:

#main .post p{

Pero en tu plantilla aparece así:

#main .post p,#main .post ul, #main .post ol {
margin-bottom: 1em;
line-height: 1.5em;
}
Así que habría que separarlo antes de los otros datos, quedaría así:

#main .post p {
margin-bottom: 1em;
line-height: 1.5em;
}
#main .post ul, #main .post ol {
margin-bottom: 1em;
line-height: 1.5em;
}

Una vez separado, añades lo que necesites debajo de #main .post p {
que es lo mismo que .post{

LustLady

Hola...

Llegué aquí de lugar en lugar buscando asesoría porque he intentado colocar un fondo de color semitransparente en la caja de posts de mi blog y no lo logro :( Logré meter opacidad pero ésta se aplica también al texto y a las imágenes y ya no sé qué hacer, quité el fondo y la opacidad porque dificultan la lectura, y es que tengo el blog con una imagen de fondo fija y a ratos el texto se pierde con ella. Espero me puedas sugerir algo. Gracias de antemano!

Mi blog está en http://thedarkchestofwonders.blogspot.com

Debo mencionarte que mi plantilla es del antiguo Blogger, no he querido actualizarla, me gusta más cómo está ahora.

Anónimo

eLiZa, quizás usando como fondo de tus entradas una imagen semitransparente:
http://humanossinsentido.blogspot.com/2008/08/crear-imagenes-semitransparentes-con.html

UN TEMA CADA DIA

Hola Rosa!!!

Desde la primera vez que entré aquí me quedé prendado del diseño, tener todos los elementos enmarcados le da un toque muy chulo :P Pero entre pitos y flautas nunca me pusé a buscar como se hacía.
Hasta hoy, que he dado con ello por error xD Andaba buscando como eliminar el marco de la cabecera en la plantilla mínima (negra) y he dado con esto :D

Pero lo he probado y nada de nada. ¿Puede ser porque haya ensanchado la plantilla?.

Un saludo!!

Anónimo

UN TEMA PARA CADA DIA, pues no, no tiene nada que ver con el tamaño de la plantilla, tendría que salirte sin problemas, es algo sencillo y, además, precisamente las explicaciones para hacerlo están basadas en el código de la Mínima...

UN TEMA CADA DIA

problema solucionado!! :p Salía todo perfectamente, pero con un marco negro sobre un fondo... negro!!! Por eso no veía ninguna cambio xDD

Tengo un problemilla con los marcos de la sidebar. Sigo tus intrucciones para cambiar los espacios a ambos lados pero ¿cómo cambio el de arriba y el de abajo?.

Muchas gracias!!

Eres una crack!

Anónimo

UN TEMA CADA DIA...te refieres a la distancia del contenido del widget al borde...eso he creido entender...
Si es así sustituyendo supongo que has puesto padding-left: x para la separación a la izda y padding-right: x para la derecha, pues tendrias que añadir padding-top:x para la de arriba y padding-bottom:x para la de abajo.

Si vas a dar la misma distancia en todos los lados, puedes sustituir todas esas "ordenes" por padding:10px; por ejemplo, y tendría una distancia de 10px el contenido al borde en sus cuatro lados...

UN TEMA CADA DIA

Sí, a eso me refería!! Gracias!!

La última, y ya no te moelsto más xD En la plantilla mínima negra la cabecera viene dentro de un doble marco. ¿Cómo lo puedo eliminar?. Además de que no me gusta como queda tiene el problema añadido de que si añado algún elemento a esa zona también aparece dentro del dichoso marco.

Gracias de nuevo!!

Anónimo

UN TEMA CADA DIA, no es ninguna molestia :-)
para eso estoy, siempre que pueda ayudarte no temas preguntar.

Localiza en tu plantilla el #header-wrapper { y el #header { verás que en ambas zonas del código hay una línea que pone:

border:1px solid #333333;

Cambia el 1 por un cero 0 y listo (en ambas partes)

UN TEMA CADA DIA

Ohhhhh por fín!!

Muchísimas gracias!!!!

Partidos Vinotintos Blog

Rosa no logre ver los bordes :/

checa mi código:


.sidebar .widget{
border:1px solid #660000;
padding-left: 10px;
margin:0 0 1.0em;


}


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

así lo entendí yo :/ si no fue así plis corrígeme jiji ...

Un besaso Rosa gracias por estar tan atenta a todo

http://partidosvinotintos.blogspot.com

Anónimo

Carledens, eso está bien, el problema lo tienes algo más arriba, en el título, fíjate que lo tienes así:
.sidebar h2 {
background-image: url(http://img100.imageshack.us/img100/7779/titulo4xq1.jpg);
border: 0px #FFFFFF; padding: 7px;

Al final te falta la llave de cierre} eso hace que lo que pongas a continuación no tenga efecto.
Hay que estar atento a esos pequeños detalles, casi siempre son los que impiden que algo funcione bien.
Tiene que estar así:
.sidebar h2 {
background-image: url(http://img100.imageshack.us/img100/7779/titulo4xq1.jpg);
border: 0px #FFFFFF; padding: 7px;
}

Anónimo

Hola Rosa, como se puede centrar el título del widget o gadget?

Anónimo

En
.sidebar h2 {

añadiendo esta línea después de eso mismo:

text-align:center;

EmiTer

Muchas gracias Rosa

MARGA'S HAPPY CRAFTS

Hola Rosa, Cuando enmarco las entradas, me desaparece la imagen de calendario tan mona que nos enseñastes, ademas, la parte inferior del enmarcado no sale.
Este es el codigo que yo tenia antes de enmarcar:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

y este es el que al final me daba el error que te comento:

.post {
border:2px solid #99C9FF;
padding-left: 10px;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
background: #FF6FCF;

Si ves el fallo te lo agradecere mucho.

Anónimo

MARGA, te falta la llave de cierre que va al final, una como esta }

MARGA'S HAPPY CRAFTS

Hola, Ahora no me quita la fecha, pero no me cierra el recuadro por abajo, ¿Que crees que puede faltarme?

Anónimo

MARGA, elimina la línea que dice:
border-bottom:0px dotted #ffffcc;
pudiera ser eso...

MARGA'S HAPPY CRAFTS

Perfecto.
Muchas gracias, eres un solete.

Anónimo

Hola Rosa! acabo de poner este código sólo el de los post, pero la línea del lado derecho no se ve, no se a que se deba... :o

Anónimo

Alondra en Firefox si se ve el borde...

Intenta (aunque no es seguro porque con IE nunca se sabe...) colocar un padding-right, así:
.post {
border:1.8px solid #889AF1;
padding-left: 1px;
padding-right: 1px;
border-bottom:0px
clear:both;
}

Anónimo

Gracias Rosa, ya coloque el padding-right: 1px;
sigue sin verse pero pues es culpa del IE...jaja está medio loco porque de repente si se ve cuando actualizo, y de repente nada!! así lo voy a dejar, espero que no se vea mal :O

Anónimo

Alondra, yo ahora tambien lo veo en IE :D

Priamo

Hola de nuevo : Estoy intentando este truco pero no doy con el resultado. Veras si accedes a mi blog en pruebas:priamo22.blogspot.com veras que el marco blanco que he creado para el vidget me sale con otra linea más que no sé de donde sale.
Puedes ayudarme
un saludo

Anónimo

Pruebas Priamo, sucede en IExplorer, también en mi blog pasa...con Firefox y otros se ve perfecto.

Marisabel

Muchisimas gracias Rosa, estoy tomando como base tus instrucciones y tutoriales para modificar mis blogs y unirlos en uno. Voy pasito a pasito, introduciendo cositas y modificando otras.
-podrias decirme cómo ponerle sombra a los bordes del marco?- que quedase como si sobresaliese.

Anónimo

marisabel , no entendí...¿podrías enseñarme algún blog con ese efecto que dices?

Marisabel

No se si te he contestado o se ha perdido, te decía que en este se ve lo que quiero decir, esa sombra en los marcos.
http://bocadosdulcesysalados.blogspot.com/
Y si quiero quitar los marcos que he añadido, cómo vuelvo a dejarlo como antes.

Anónimo

marisabel, eso son imágenes. Esa plantilla lleva añadida en el fondo de las entradas y la sidebar imágenes con ese efecto ya incluido en ellas.

Para quitar cualquier cosa que hayas añadido solo tienes que hacerlo al revés...sigues la entrada y donde dice "colocas esto" te fijas donde ya lo tienes añadido y lo quitas, así de simple.

Peropaka a.k.a. Dj X

Hola Rosa guapa. Como podras ver en mi blog:

www.dj-peropaka.blogspot.com

Tengo hecho muuuuuchos de los trucos que enseñas en el escaparate. Pero la pregunta es:

Como haces para que los widgets de la derecha se te queden tan centraditos en los marcos y como le pones el marco con relleno al nombre del widget??

No se si me explico. En mi blog, no le pongo el marco a los widgets de la derecha porque se descentran mucho y el titulo del widget se queda del mismo color.

Como cambiar el titulo y personalizarlo?

Gracias chica, eres un cielo ñ_ñ

Anónimo

Peropaka Dj ¡Qué nick más gracioso! :D:D

Mira en esta entrada corazón:
http://elescaparatederosa.blogspot.com/2007/07/imagen-o-color-de-fondo-en-el-ttulo-del.html

Alan

Hola rosa, bueno no sabia donde escribirte y lo hago aqui.
Este es mi blog y tengo 2 problemas
http://www.hilarydufflatin.ya.st

Bueno una de mis preguntas es como hago para que mis Widgets no me queden tan separado??? en especial las imagenes q uso como titulos

Y la otra es, como le cambio el color ROSADO OSCURO ( #da4b86 ) que aparece a los costados, ya he tratado mil formas pero no se cambia, quisiera ponerle el rosa mas claro que esta al lado el que uso para el layout. ya le cambie los codigos, el color, de todo y ese rosado oscuro no desaparece XD q Hago???

Desde ya gracias

Anónimo

Alan, para cambiar el color de fondo localiza esto en tu plantilla:
body { margin: 0px; padding: 0px; text-align: left; font:normal normal 83% Verdana, sans-serif; color:#9D1961; background:#DA4B76 url('http://i256.photobucket.com/albums/hh190/Alanalem/valentine2008-b.jpg') repeat-x top left; }

En negrita te he señalado el código del color que tienes que cambiar.

En cuanto a los títulos de la sidebar, has incluido las imágenes directamente sobre el contenido, procura que después de la imágen no haya ningún <br> ni salto de línea.

Alan

Bueno mil gracias ROSA, he podido solucionar el problema del fondo, pero de las imagenes en el sidebar no lo entiendo, no he puesto las imagenes con codigo sino subiendo directamente como nuevos widget, y no creo q encuentre
en algun lado.
No se si entiendes?

Anónimo

Alan Entiendo...y eso es un problema, porque si cada imagen es un widget, al darle un valor a los widget afectará a todos, con lo que se reducirá ese espacio pero los títulos se pegaran al widget que tengan "encima".

Lo mejor sería colocar la imagen directamente en cada widget desde la plantilla.
Si miras con los elementos expandidos en tu plantilla verás esta línea:
<b:section class='sidebar' id='sidebar' preferred='yes'>

A partir de esa línea están los widgets añadidos en tu sidebar, en el mismo orden en que los has colocado en ella, cada uno de ellos empieza por <b:widget y un poco más abajo de su comienzo vemos la parte que corresponde a su título:

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

Si borras eso y en su lugar colocas la imagen así: <img src="url_de_la_imagen"/> tendrás las imágnes sustituyendo al título original y guardarán la distancia adecuada.

Alan

Gracias x tu ayuda!

Necesito que me espliqueas algo:
Recuerdas que te pedí ayuda para cambiar el color de un fondo y me psaste este codigo:

body { margin: 0px; padding: 0px; text-align: left; font:normal normal 83% Verdana, sans-serif; color:#9D1961; background:#DA4B76 url('http://i256.photobucket.com/albums/hh190/Alanalem/valentine2008-b.jpg') repeat-x top left; }

Bueno, quiero saber comomo hacer para q en ves de q aparesca tan solo un color de fondo aparesca una imagen y de q tamaño debería ser?
Desde ya gracias

Anónimo

Alan Vamos a ver...la imagen si es adecuada puede tener 1pixel de ancho por 1 pixel de alto, depende de la instrucción que tu le des.

En ese código que me muestras tienes colocada una imagen aquí:
background:#DA4B76 url('http://i256.photobucket.com/albums/hh190/Alanalem/valentine2008-b.jpg') repeat-x top left;

Pero le dices a esa imagen que se expanda de forma horizontal: repeat-x

Si colocas ahí repeat-y se expandirá entonces a lo ancho de la pantalla.

Si no pones nada, se expandirá a lo ancho y a lo alto repitiendose las veces necesarias para cubrir el fondo...

Alan

Aha, y no sería mas facil agrandando esa imagen q ya tengo puesta hay, osea haciendolá mas ancha para q tape ese fondo?

Anónimo

Alan Correrías el riesgo entonces de que si alguien usa una pantalla muy amplia la imagen no alcanzase a cubrirla por completo.

No se exactamente el efecto que quieres conseguir, pero yo en tu caso aumentaría la altura de la imagen y colocaría luego el repeat-y en el código...

Unknown

Rosa, estoy haciendo una prueba en un blog y me gustaria saber como hago para que no quewde enmarcado el buscador del blog?

Anónimo

TRECARUNGA ¿Te refieres a enmarcar el gadget donde has puesto el buscador? Si es así, tienes que mirar la id del gadget, imagina por ejemplo que es HTML7 y colocar unas líneas así en el CSS:

#HTML7{border: 1px solid #ddd;}

Unknown

Gracias Rosa!

Mara

Gracias Rosa por tus trucos.
Necesito tu ayuda.
Yo lo he hecho en mi blog pero no termina de quedar bien. No cierra el final de la entrada.
Me quedo asi:

.post {
border:2px solid #000000;
margin:.5em 0px 1.5em 0px;
border-bottom:0px dotted $bordercolor;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

.post p {
margin: .5em 0 .4em 0;
}


Mi blog es http://mamapaez.blogspot.com/

Anónimo

Mara Tienes que eliminar esta línea en .post{

border-bottom:0px dotted $bordercolor;

Pues aunque hayas puesto 0 el sitio de la línea está ahí y "tapa" al borde nuevo.

Mara

Gracias Rosa!!!!!!!!!!!!!! Ya esta arreglado

Alan

Bueno rosa, yo otra vez XD ja.
Bueno, mira este blog estoy preparando:
www.solopruebahdl.blogspot.com

Y tengo problemas con las imagenes de los laterales, ya que las lineas verdes deverían coincidir, q puedo hacer???
Este es el codigo de la parte donde esta esa imagen:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background:#cccccc url('http://i256.photobucket.com/albums/hh190/Alanalem/Lateralb2.jpg') repeat-x top left; }
blockquote { margin: 0 0 0 30px; padding: 0px 0 0 20px; font-size: 100%; line-height: 1.5em; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

También tengo otra pregunta, como puedo cambiar el color de las lineas que aparecen como fondo de los titulos de cada post, ya q me aparecen naranja y tengo que hacerlas verde.
Gracias

Anónimo

Alan En cuanto a las imágenes yo no puedo hacer nada...no se trata del código sino de las mismas imágenes, deberían estar diseñadas para que coincidieses y no es así...la imagen de fondo tendría que ser más ancha desde la primera línea verde hacia arriba...pero eso se hace cuando se diseñan.

En cuanto a las líneas de las entradas se cambian donde ves en negrita:

.post h3 { text-align: left; margin: 0px; font: normal bold 116% Trebuchet, Trebuchet MS, Arial, sans-serif; color: #11593C; border-top: 1px solid #f63; border-bottom: 1px solid #f63; }

Alan

Gracias.
Aunque he diseñado esa imagen para que coinsida, pero nuse, como que al ponerla se desformó.

Anónimo

Alan Tienes que pensar que la imagen del fondo se coloca en el body, y el body no solo es lo que se ve en pantalla sino algo más que no se ve, así que la imagen "subirá" más que la otra.
La del fondo tiene que ser más alta.

Alan

Tienes razon ROSA
mil gracias por tus ayudas.
Ahora necesito saber como puedo centrar el titulo de mi sidebar?

Anónimo

Alan En el mismo sitio que usaste para ponerle fondo, ahí es cualquier cosa que implique a los títulos de la sidebar:

.sidebar h2 { text-align: center;

Estas cosas mínimas ye debería ir sabiéndolas hacer tu solo si te fijases un poco...

Alan

Ok, muchas gracias.
Tienes razon, es que aveces me pierdo entre tanto codigo ja.

MIL GRASIAS.

Gildo Kaldorana

Muchas gracias!!

Anónimo

Gildo Kaldorana Gracias a ti por tu visita ;)

-¦-= Shadow†Sneak =-¦-

Hola como estas, je.. bueno al grano, es algo sencillo pero no se como lograrlo, es tan solo correr el titulo de cada sidebars para el lado derecho de la pantalla ,ejemplo: perfil,música,banner etc.. la forma que e logrado correrlos es por :
" .sidebar .widget{
padding-left:3px; " solamente lo tengo a 3, para aprovechar bien el espacio, para imágenes (el mio es de 390), ya que si lo corro también correré la imagen, por eso solo quiero saber la forma de correr solo el titulo de cada sidebars, porque si lo dejo en 3 queda muy pegado al borde que tengo, solo es eso.. ojala me respondas..

Bueno blog.

saludos.

-¦-= Shadow†Sneak =-¦-

Jejeje... ya no creo que necesite la respuesta intrusiando la plantilla, di donde tenia que agregar el código:
padding-left: "X" px;

es en : " h2 { "

bueno eso es..jeje..

saludos.

Anónimo

-¦-= Shadow†Sneak =-¦- ¡Así es! Buen trabajo :D

Pily

Muchas gracias¡¡¡ Este es el post que andaba buscando¡¡¡ :D

Sonia Herrera

Hola Rosa! Gracias por tanta ayuda como nos prestas. No sé como poner un recuadro a un gadget de texto, a modo de menú. Ni siquiera encuentro el código html al que haces referencia en el post. Aún así, consigo el recuadro, el problema es que me lo aplica a todos los gadget (incluido imágenes) y yo sólo quiero aplicarlo a un gadget: el de texto. ¿Cómo lo hago? Mira mi blog de pruebas: http://pruebas2530.blogspot.com/. Muchas gracias de antemano.

Anónimo

Sonia Mira en el comentario 101

COSAS MIAS

Hola Rosa, como podrás comprobar, llevo todo el día enganchada a tu blog, debo ser la única que no es capaz de poner enmarcados los post, lo he intentado varias veces y me da miedo seguir y estropear lo que tanto me ha costado, me lio con los códigos.
¿Serías tan amable de ponerme el código completo para yo coiar y pegar? perdona mi atrevimiento y muchas gracias siempre.

Anónimo

COSAS MIAS No se si en tu plantilla quedará demasiado bien, pero bueno, por probar... antes de guardar los cambios dale a Vista previa y así si no te gusta no estropeas nada...

Mira en el código de tu plantilla y busca esto:

.post {
margin-top: 0;
margin-right: 0;
margin-bottom: 1.5em;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 1.5em;
padding-left: 14px;
border-bottom: 1px solid #ddd;
}

Antes de esa llave } que ves al final, coloca esto:
border:1px solid #000;

Anónimo

Me ah quedado muy bien :) .... pero solo en firefox :(
rosita sabes alguna forma como redondear las esquinas del main y la sidebar como tienes los rounder o algo asi?
creo que usan imagenes pero como se hace?
Muchas Gracias

Anónimo

Fackss Es bastante complicado pues depende de cada plantilla, y si, se usan imágenes... imposible explicar en un comentario por cierto.

Magdalena

mil gracias Rosa! siempre me salvan la vida, aunque me la paso probando cosas, siempre caigo en tu blog y el de Gema para ver como se hace en realidad y sin inventar jajaja
feliz año!

Mónica Jourgensen

Hola Rosa, nuevamente muchas felicidades por tu blog. A mí me gustaría que me pudieras ayudar con respecto a los widgets enmarcados que se encuentran en el pie del blog, ¿cuál es exactamente el código que se debe modificar para enmarcar mis columnas del footer?

Gracias! =) Un beso

Anónimo

Mónica ¿Para que blog o plantilla concretamente?

Mónica Jourgensen

Es para www.monvor.blogspot.com

Anónimo

MónicaCreí que hablabas de las columnas que yo explico como colocar... esa plantilla no es de Blogger original y además las columnas del footer no tienen las mismas clases que las mías... lo siento pero no puedo ayudarte, perdería un tiempo del que no dispongo y que he de reservar para las plantillas diseñadas para Blogger o basadas en lo que yo explico.

Unknown

Hola Rosa:
Coloqué en bibliotecaoleihaifa en la sidebar los recuadros y quedaron bien casi todos,excepto los banners que están verticales y no de dos en dos,intenté aumentar el padding de los widget pero no modificó nada,que me aconsejas.-
Gracias,tu blog es fuente imprescindible de consulta

Rosa

AviberNo hay espacio suficiente para ellos en la sidebar... tendrías que reducir algo las entradas y sumar eso que reduces ahi en sidebar-wrapper para ampliar el espacio...

Unknown

Gracias Rosa:
lo difícil generalmente tiene una solución sencilla,solo hay que saber encontrarla ,que es lo verdaderamente difícil.-
No te pases nunca de Blogger a otro sistema

Cartoncita Rosa

Hola Rosa, esta ocasión solo te daré las gracias ya que he leído tu entrada y también los comentarios para despejar mis dudas.

Suelo hacerlo así para comprender mejor lo que voy haciendo y que me salga bien.

Gracias por todas las explicaciones :D

Anónimo

Hola Rosa la verdad he leido detenidamente el post, tambien cada comentario pero no me sale como deseo, he creado un blog de pruebas : http://blogdepruebas0000.blogspot.com/

Favor ayudame me gustaria tener el sidebar que como este blog : http://www.quierocrearunblog.com/

De verdad espero me puedas ayudar a resolver esta gran duda.

Saludos y desde ya gracias.

Yuri Chavez

Anónimo

Yuri Chavez Tu plantilla no es original de Blogger, sino adaptada, es por eso que no te coincidirán los datos... en "quierocriarun blog" usan una Mínima de Blogger modificada luego por ellos... tal como hago yo por ejemplo en el Escaparate....
Para plantillas adaptadas no doy soporte... pues son todas muy distintas y hay cientos... me volvería loca en eso además de emplear un tiempo enorme del que no dispongo...

SunsetSims

Hola Rosa, yo de nuevo:)

Siguiendo con mis pruebas o inventos, di con este post y bueno aunque creo que he buscado bien por tu blog no he encontrado lo que buscaba, he hecho todos los pasos de enmarcar las entradas, hasta ahi han quedado muy bien.

Lo que quería si se puede, es que el borde fuera semitransparente, el fondo del blog lo tengo como en un negro pizarra, le daría un efecto creo, muy chulo.

Mi otra cuestión (ya aprovecho el comentario), es como puedo separar la distancia entre la cabecera del blog (la altura creo que es) con lo de páginas estáticas, que son como si fueran una barra de menú, no se lo veo todo muy junto.

Gracias de nuevo:)

Anónimo

Bencuom Cuando no me decís la url del blog para el que son los cambios, es casi como si no me dijeseis nada... cada plantilla es un mundo distinto a la anterior.

SunsetSims

aaaaa perdona Rosa, no lo habia pensado, es que al ser de pruebas y no estar abierto no sabia si podias verlo..lo que puedo hacer es mandarte la invitacion por correo para que lo veas...

La plantilla es la minima, ahora te la mando

Gracias de nuevo.

Anónimo

Bencuom
Para separar las páginas del header, coloca algo como esto en el CSS de la plantilla, antes de ]]>

#PageList1 {
margin-top: 20px;
}

La distancia la aumentas, aumentando el valor en 20

En cuanto a lo que dices de transparencia, no es posible aplicarlo a un borde que yo sepa, pero puedes ver algo sobre el tema transparencias aquí:

http://gemablog-.blogspot.com/2008/09/transparecias.html

SunsetSims

Gracias Rosa!

Me va de maravilla este truco:)

Anónimo

Rosa..espero estés bien y vengo a molestar otra vez espero no ser inoportuna y no pedir demasiado, ocurre que ya he logrado diseñar tal cual como quería mi blog pero no puedo enmarcar ni poner color a la parte del footer donde sale el texto y el copyright, será porque agregue añadir tres columnas al pie?

También me podrías ((si fuera posible y tenéis tiempo o la entrada)) indicar una forma de entender esto de margin y padinng cuando tienen 4 cifras cual es cual por que yo solo juego con ellas y me gustaría tenerlo claro ((ej.: 20px 0px 15 px 0px)) y también porqué solo una es que no se porque hay algunas cosas que quedan muy separadas y otras muy juntas por ejemplo lista de títulos de las etiquetas. espero haberme hecho entender.

Un abrazo! y Grazie de antemano!

liyiss

Hola Rosa, estaba probando ponerle un margo a un solo widget, y conseguir lo he conseguido, de varias formas, y con todas ellas sale el marco en ese widget específico. Ahora, tengo el problema que este widget es un html (uno que he cogido en una entrada tuya sobre un mensaje para los que usan IE) y lo que ocurre es que aparecte el marco y dentro el codigo en html.
No se de que más formas probar a poner el marco para que el widget salga bien. Me puedes ayudar?
un saludo enorrrrme, eres de gran ayuda.

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.

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