Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.
Haremos que las entradas se vean más o menos así.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8eVlf4i3wncxvCkTwDIcvwtvLLL-SNakg1-BRwVGyD9zjPTX-8YZBgJw_C5z-oX7U3IQFwQvEY4y0zQ1fyLPjhO-RaB0DnmyOugipNQ9szgjywiQcIdPCb3L_SrEtKu00Qh_t9r9m5XD/s800/entradas-enmarcadas.png)
Y los gadgets así.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsBwMsOnxwpfni5Y6GyCElJ7Iv2vsIslWWDzw9XYY7nQXid6Pj-FyG9K5rwARUyAqwoYZ9rsM0mSV5H2gFY5nkswDPGIrZo1VzhN61WHLWHhNXaOVr7FhrOJHtOR1jSz-txFhpOhpHATG/s800/gadgets-enmarcados.png)
Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Plantilla | Edición de HTML, y ahora...
Antes de ]]></b:skin> agrega esto:
El tamaño, tipo y color del borde se modifica en border: 1px solid #000;
También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.
En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:
Antes de ]]></b:skin> agrega esto:
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.
Haremos que las entradas se vean más o menos así.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8eVlf4i3wncxvCkTwDIcvwtvLLL-SNakg1-BRwVGyD9zjPTX-8YZBgJw_C5z-oX7U3IQFwQvEY4y0zQ1fyLPjhO-RaB0DnmyOugipNQ9szgjywiQcIdPCb3L_SrEtKu00Qh_t9r9m5XD/s800/entradas-enmarcadas.png)
Y los gadgets así.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsBwMsOnxwpfni5Y6GyCElJ7Iv2vsIslWWDzw9XYY7nQXid6Pj-FyG9K5rwARUyAqwoYZ9rsM0mSV5H2gFY5nkswDPGIrZo1VzhN61WHLWHhNXaOVr7FhrOJHtOR1jSz-txFhpOhpHATG/s800/gadgets-enmarcados.png)
Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Plantilla | Edición de HTML, y ahora...
Para plantillas hechas con el Diseñador de plantillas de Blogger
Antes de ]]></b:skin> agrega esto:
.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
El tamaño, tipo y color del borde se modifica en border: 1px solid #000;
También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.
El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas áreas sólo elimina el que le corresponde.
En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:
.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}
Para las Plantillas antiguas de Blogger
.post {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}
.sidebar .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
.footer .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.
Ya sea que uses una plantilla del Diseñador, o una plantilla antigua, quizá tengas que modificar la separación del borde pues en algunos casos podrá quedar muy pegado al contenido. Esa separación se modifica en el padding que aparece en los estilos. Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.
Estos métodos son únicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.
interesante potro lo voy aplicar en una web que tengo....potro una pregunta como hago para colocar entradas destacadas y que se actualizen en donde aparecen las imagenes en carruzel que tengo en esta web...www.cienciaverde.co.cc
ResponderEliminarHa! no Fui el primero pero el segundo si! muy buen post @potro, y por cierto MUY Util!.....
ResponderEliminarGracias, Potro, siempre he querido algo así y no sabía cómo hacerlo..¡ahora sí!, :)
ResponderEliminarUn beso
Hola Potro, estupendo trabajo... mil gracias como siempre ;-)
ResponderEliminarFull como siempre potro, andas volando !!!
ResponderEliminarMuchas gracias men!...
Suerte y Exitos!... ;)
ciencia, usando un slider puedes poner entradas destacadas (en el buscador de aquí encontrarás algunos), pero si quieres que se actualicen automáticamente me parece que en Pizcos tienen una entrada sobre eso.
ResponderEliminarSergio Molina, gracias Sergio, por cierto, muy bueno el cambio en Ejoy-nate :)
Sofía Serra Giráldez, qué gusto leerte de nuevo por aquí, y digo por aquí porque por tu blog siempre ando aunque ande de incógnito :)
MaG@S RaDioMuSiC, gracias a ti por tu visita!
Circulo W.H., suerte y éxitos para ti también!
potro una pregunta.. como puedo agrandar el main pero que quede centrado porque se agranda para el lado derecho solamente.. lo que hice fue poner margin-left -10px en post h3 y se centra pero la `parte izquierda se ve cortada.. que hago?
ResponderEliminarMuy bueno Potro.
ResponderEliminarGracias
Si Potro, con lo de la caida de blogger... se me daño todo, y decidi hacer un cambio de ultima hora, que a la final quedo bn :)
ResponderEliminarEres un fenómeno Potro, mil gracias.
ResponderEliminarMuy útil esto, me cae de perlas para una plantilla que esto haciendo.
ResponderEliminarPotro una pregunta, de casualidad sabes como se llama el aviso que sale en esta página cuando se llega al final del post. Que muestra un post relacionado. He intentado encontrar un tutorial sobre como ponerlo pero la verdad no doy con ninguno y sin saber el nombre del truco más díficil encontrarlo. Si conoces un tutorial donde expliquen, como hacerlo te lo agradezco.
Hola, Potro! Hay algo que no entiendo:Cuando dices que quizás haya que modificar la separación del borde, dices que:
ResponderEliminar"Esa separación se modifica en el padding que aparece en los estilos". ¿Qué es el padding de los estilos, dónde lo busco?
También te quería comentar : si tengo un slider justo en la sidebar y es ahí donde quiero enmarcar los gadgets, ¿con el Slider no funcionará y dará problemas, no?
Gracias!
PokerPRO, no me ha quedado claro, ¿quieres agrandar el área de las entradas? ¿en cuál plantilla?
ResponderEliminarFRANCISCO, Jorge Donato, gracias a ustedes!
Adalberto, no conocía ese gadget, a ver si luego doy con un tutorial que hable sobre ello.
ResponderEliminarNo sin MyMakeUp, en el código que se agrega verás que hay tres padding, esos son los padding que se tienen que modificar en caso de que sean necesarios. Si el slider está en la sidebar también se enmarcará, pero no veo por qué te daría problemas :/
potro estuve buscando en pizcos pero no encontre entradas destacadas automaticas
ResponderEliminaren la plantilla minima.. quiero agrandar el main-outer pero al hacerlo solo se agranda para el lado derecho.. no se como centrarlo..
ResponderEliminarpotro necesito ayuda contactame a este correo mxla12@hotmail.com
ResponderEliminarciencia, entonces pregúntale a él en una entrada sobre ese post, yo alguna vez lo vi pero no recuerdo el nombre del gadget.
ResponderEliminarPokerPRO, hazlo y ya hecho me dices en cuál blog lo has puesto para poder mirarlo y entender el problema.
Maiik'r, arriba hay un enlace de Contacto por si necesitas ayuda sobre un tema que no esté publicado en el blog.
listo potro esta en el de www.poker-maestro.blogspot.com.. ayuda.. un abrazo!
ResponderEliminarSupongo que te refieres a reducir el margen izquierdo del contenido de las entradas. Si es así busca esta parte:
ResponderEliminar#main-wrapper {
width: 520px;
float:left;
word-wrap: break-word; margin:0 0 0 35px;
Cambia ese 35px por 25px o un valor que se adecue a tus necesidades.
Vaya ésto también me interesa, pero más exactamente me gustaría enmarcar y cambiar el fondo de una parte del texto de la entrada ¿es posible? Mil gracias.
ResponderEliminarGracias, Potro, ya me enteré de lo del Padding. Pero aunque en vista previa me salía más o menos bien, cuando realmente hice el cambio, me dio error de blogger y me superponía unos gadgets sobre otros!!! Así que tuve que deshacer cambios :(
ResponderEliminarMuchas gracias Potro, está genial. Lo he hecho en la sidebar y sin ningún problema, pero tengo una pregunta: puedo cambiar también el color de fondo de los gadgets?
ResponderEliminarSaludos!!!
Lyra
Lo he utilizado para enmarcar mi post-footer y me gusta como me ha quedado. Gracias.
ResponderEliminarhttp://mpmoreno.blogspot.com/
Potro como siempre grandioso me has leído la mente mil gracias
ResponderEliminarSolo una pregunta por que al inicio de las entradas no me cierra el margen como lo podrás ver aquí en mi blog http://cityvilleextreme.blogspot.com/
ResponderEliminarMaría, sí es sólo un párrafo específico el que deseas enmarcar encierra el texto en este código:
ResponderEliminar<div style="background:#ccc; border:1px solid #000; padding:10px;"> ...Aquí va el texto... </div>
El background es el color de fondo, y el border es el borde.
No sin MyMakeUp, posiblemente hubo algún error en la modificación, pero igual si lo guardas sin hacer ningún cambio seguro te saldrá bien, ya después puedes personalizarlo un poco.
ResponderEliminarLyra, claro, ahí mismo en este código que agregaste añade debajo de border: 1px solid #000; esto:
background:#ccc;
m.p.moreno, a mí también me gusta el resultado que has conseguido :)
ResponderEliminarTH3 V1P3R, yo lo veo todo bien.
Muchísimas gracias Potro, me encanta como ha quedado;-)
ResponderEliminarPerfecto Potro! Solo me volví un poco loca para elegir un color que me gustara, muchas gracias.
ResponderEliminarhote queria pedir un favor creo que debe ser muy simple para ti pero muy problematico para my es que en my blog que es este http://cinecolombi.blogspot.com/ en la parte de arriva en al lado del favicon que es el titulo del blog que dice cinecolombi-estrenos hD me gustaria que ese mensaje ese titulo solo se vea en la pagina principal del blog no en todas las entradas y paginas para que se vea el titulo de la entrada muchas gracias espero averme expresado bien y buen dia :D
ResponderEliminarSólo necesitas optimizar los títulos del blog para que en las entradas se vea primero el nombre de la entrada y después el título del blog.
ResponderEliminarSaludos.
potro como hago para colocar canales en vivo en mi web con ustream, yo coloque un canal pero me sale que solo se tiene que ver directamente en la pagina de ustream.tv
ResponderEliminarSí, es cierto que hacía tiempo que no venía, Potro, huracanes interiores que me han traído a mal traer, perdón por la redundancia, :).
ResponderEliminarMe halagas con eso que me dices, que visitas mis blogs, gracias.
Un beso enorme.
Por cierto , algún día podrías decir como es eso de "incógnito"...yo es que soy más inocente que un cubo boca abajo, por muchos años que lleve en esto, :D.....o muy tooonta,;)
ciencia, no lo sé, nunca he usado ese servicio.
ResponderEliminarSofía Serra Giráldez, es sólo un decir, refiriéndome a que siempre me doy mis vueltas aunque nunca dejo un comentario, tendrás que disculparme por eso pero muchas veces me quedo corto de palabras para expresarme. Y nada, que de tonta no tienes ni una pizca ;)
potro por hay me di cuenta que blogger no esta dejando que una añada gadget en el panel de control ni que actualize el gadget....
ResponderEliminarPrueba hacerlo desde otro navegador, o borrando cookies, historial y chaché del navegador.
ResponderEliminarGracias por echar un vistazo a mi blog. No sé como llegas a todo. Te sigo via email.
ResponderEliminarHola potro, ya utilice este post pero no me queda no se porque, utilice los tres bloques pero ni los gadgets se enmarcan me podrías ayudar por favor?
ResponderEliminareste es mi blog
http://conta-lerh.blogspot.com/
Pd. uso la plantilla fantástico S.A.
Recuerda que para las plantillas Fantastico S.A (Awesome Inc.) y Ethereal el código varía por otro que se menciona ahí.
ResponderEliminarSi no te da resultado haciendo ese cambio prueba ponerlo debajo de:
/* Footer
----------------------------------------------- */
Potro, cres que se pueda hacer esto pero para determinadas entradas? Digamos, solo las entradas con "x" categoría? Un saludo.
ResponderEliminarClaro, usando las condicionales. Antes de </head> esto:
ResponderEliminar<b:if cond='data:blog.url == "URL de la etiqueta"'>
<style type='text/css'>
...Aquí el código de los estilos para enmarcar...
</style>
</b:if>
ya lo hice potro cambie el codigo antes de ]]></b:skin>
ResponderEliminary despues de:
/* Footer
--------------------------------------------- */
cambiando el primer bloque por este
.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}
y no me queda no se que estoy haciendo mal, gracias por tu ayuda potro
Pues no entiendo porqué no surge efecto, yo lo pruebo cada vez en la misma plantilla y funciona sin problemas :/
ResponderEliminarComo último recurso pon este código:
.main-inner .widget {
border: 1px solid #000 !important;
}
.date-outer {
border: 1px solid #000 !important;
}
pues no se que es lo que pasa pero ni con el ultimo código se puede cambiare la plantilla con la sencilla, gracias por todo potro eres increible
ResponderEliminarcambie la plantilla y ya quedo, solo una cosa potro que podria hacer para que lo que sale al final de la entrada (autor, etiquetas y comentarios) solo se vean en las entradas y no en la paginas
ResponderEliminargracias
Por supuesto, sólo es cuestión de encerrar los datos del post-footer dentro de una condicional.
ResponderEliminarmuchas gracias potro
ResponderEliminarHola potro yo hace mucho tiempo tenia un blgo con una plantilla de esta manera parecia
ResponderEliminarwww.megapeliculasgratis.com me refiero q era asi la presentacion de mi portada, una vez te mande la plantilla, bueno la idea es q perdi la plantilla (el respaldo) y bueno nunca mas pude saber como voler hacerlo de esta manera mi blog, serias tan amable de enseñarme como hacerlo de esta manera ?? gracias o tal vez poner la plantilla que te envie ?
Pues si quieres dame algún dato que agregaste en ese correo, ya sea el nombre que usaste, o mejor aun la dirección de correo electrónico, así localizo ese mail y te envío el respaldo que en aquella ocasión me enviaste.
ResponderEliminarbueno la direccion con la que te envie recuerdo q te envie un correo y tb te contacte por el link de contacto de tu blog, la direccion de correo debe ser esta cuta_beer@hotmail.com
ResponderEliminary me acuerdo que te lo mande en un link de megaupload
Gracias, con ese dato ya encontré el correo donde adjuntaste la plantilla así como el enlace de descarga a ella, ahora mismo te la mando a esa dirección.
ResponderEliminarGracias potro recibi el mail y probe la plantilla en uno de mis blogs, pero no kedo de igual manera las imagenes de arriba no se por q kedan deslizandoce hacia abajo y si notas las entradas tienen el titulo pero salen cortados es decir no sale todo el titulo, podrias ayudarme a recostruir esta plantilla ? la verdad esta plantilla la hiso un amigo mio pero el ya no esta ... te la coloco en un blog para q veas como keda ahora (es extraño deberian kedar bien las imagenes de la parte de arriba) pero bueno la idea es que kede centrado y si por favor podrias ayudarme ah mejorarlo poniendo centrado kitando esas cortinas de los costados y expandir ese parte del blog para que kede centrado, el blog donde lo eh colocado es este
ResponderEliminarhttp://peliculas-revo-online.blogspot.com
lo que comente del titulo es algo que deberias tomar en cuenta por q en el estilo magazine (3) lo que hace q salga mas las entradas es el titulos pues algunos son demasiados largos y otros cortos y descuadra la imagen que va al centro por eso opte por recurrir a esta antigua plantilla porfavor ayudame
ResponderEliminarSino me equivoco esas imágenes son parte de una galería hecha con jQuery la cual no conozco, pero a simple vista sí he podido notar que al menos dos de los archivos que hacen que esa galería funcionen están alojados en un sitio que está inactivo y por lo tanto los archivos no funcionan y como resultado la galería tampoco.
ResponderEliminarLos títulos no veo que ninguno se salga del contenedor, pero de ser así se puede arreglar ocultando el texto sobrante, y digo ocultar porque en las plantillas tipo magazine los títulos siempre deben ser cortos, ten en cuenta que la idea es mostrar en poco espacio poca información.
Las cortinas son una imagen, sólo busca en la plantilla esa imagen y elimínala.
Ahora, no es que la plantilla no esté centrada, lo que pasa es que tienes una sidebar que no tiene nada y ese espacio vacío da la apariencia que no está centrado.
Sin embargo sí puedes quitar un espacio sobrante (que ignoro porqué lo pusieron).
#centermeio {
width:1012px;
padding-left:70px;
Potro hola de nuevo yo, me veras muchooo por acá, encontré mi lugar ideal jeje, mir, hice todo lo que dices y me queda bien ene le sidebar y el footer funciona en ciertos gadget, pero en las entradas no.
ResponderEliminarEste es el blog que estoy intentando re-modelar
http://teambookbl.blogspot.com/
Potro, respecto a tu comentario numero 48 debo decirte que no me funciona lo de esconder los datos del post-footer en condicionales, me ayudas plisssss
ResponderEliminargracias potro por responder esos archivos q mencionas q estan alojados en un sitio inactivo los puedo descargar y colocarlos en algun sitio nuevo ? o o podrias averiguar algo sobre ese jQuery creo q la version q esta usando esa plantilla es la 1.3.2 y creo q ya hay mas actualizados
ResponderEliminarbueno lo que yo decia de la quitar la cortina y que kede centrado me referia ah como esta ahora si te fijas ya quite la imagen de la cortina que venia con todo y titulo aparte del titulo que tiene, y bueno kedan a los costados 2 espacios muy grandes, ademas creo q esta plantilla fue hecha para poder vizualizarce en una pantalla LED.
por lo que yo lo veo asi
https://lh4.googleusercontent.com/-gKEAfB_u4Ec/TfvkLMaMaNI/AAAAAAAABKE/Ll7ePWyVkoI/s104/asi%2Blo%2Bveo.JPG
si te fijas en la imagen veras q no tengo para ver mas al costado --> donde se supone la plantilla continua si achico la visualizacion de mi imagen en mi monitor con la tecla control y apretando el boton - recien puedo verlo completamente y veras que como no estan las cortinas se ven 2 muros enormes a los costados,
eso me pregunto si se puede espandir ah eso me referia con centrarlo al kitar las cortinas espero puedas ayudarme
Hola AMAFLE ,
ResponderEliminarYo encantado de que visites este blog así que puedes venir las veces que lo desees ;)
En las entradas no te ha funcionado porque te ha faltado un pequeño y diminuto punto en el primer código, si te fijas debe ser así esta primera parte:
.post {
Y tú lo has puesto así, sin el punto:
post {
En cuanto a los del post-footer sólo localiza los códigos que se muestran en aquél enlace y enciérralos con la condicional que es para que se muestre SÓLO en las entradas individuales.
Saludos.
Hola de nuevo FarStar,
ResponderEliminarSi el sitio ya no existe no puedes recuperarlos, algunas veces se puede usando la caché del sitio pero no en este caso pues ya tiene bastante tiempo sin funcionar.
Como te decía antes, no conozco esa galería así que no sabría decirte cómo o dónde encontrarlos.
Igual te repito, no hay espacios sobrantes, ese espacio que ves ahí del lado izquierdo es tu sidebar, pero como sólo tienes un gadget hasta arriba da la impresión de que ese espacio estuviera vacío, pero no lo está.
Puedes eliminar la sidebar si lo deseas, eso hará que se recorra a la izquierda el contenido de las entradas, pero te quedarás sin sidebar.
Si deseas ocultarla sólo añade en esta parte lo que está en negrita:
.sidebar1{
display:none;
no fui muy especifico aca las imagenes q te envio son para que te guies perfectamente:
ResponderEliminara continuacion como esta con las cortinas:
http://1.bp.blogspot.com/-nTEH5uEBag4/TfwJAwYsUuI/AAAAAAAABKg/QiSXqIdYD0w/s1600/ASi+queda+con+las+cortinas.JPG
asi keda sin las cortinas y el espacio negro que kiero que no este:
http://2.bp.blogspot.com/-1fQYoCXttCU/TfwI-NE7pkI/AAAAAAAABKc/ULEKsAjkLmQ/s1600/asi+se+ve+sin+las+cortinas.JPG
y gracais por seguir respondiendo se q debe algo aburrido por no decir aburrido y molestoso, pero eres un capo en esto y nesecito de tu sabiduria, que galeria de imagenes me aconsejas para reemplazar ese? ese se movia automaticamente pasaba de imagenes solito alguno parecido ?
Gracias por los detalles extras, ahora sí me ha quedado claro, pero de igual forma se trata de un problema de percepción. Te explico:
ResponderEliminarLa plantilla, al igual que la gran mayoría de las plantillas, tiene la estructura del blog centrada, de tal forma que si agrandas la ventana del navegador entonces el contenido se centra, esto hace que parezca que hay un espacio sobrante.
Pero si reduces el ancho de la ventana de tu navegador verás que ese supuesto ancho extra desaparece, ¿porqué? pues porque como el contenido está centrado se mantendrá así sin importar el tamaño de la ventana.
Así que hay dos opciones, o lo dejas así (es lo más recomendado para que se vea bien en todas las resoluciones de monitores), o bien, modificas los márgenes para eliminar ese auto-centrado, de manera que el blog se recorrerá a la izquierda.
Si deseas hacerlo sólo busca todos los margin:auto; que haya en tu plantilla y elimínalos.
De galerías hay decenas de ellas, todo depende de qué tengas en mente, pero en la red encontrarás mucha información y variedad de galerías.
muchas gracias potro por todo, ya vi q kitando el margin:auto; se corre a la izkierda tal como me comentas, bueno creo q lo dejare con el margin:auto; y bueno buscare una galeria adecuada muchas gracias otra vez.
ResponderEliminarWow amigo, simplemente gracias! solo gracias wow, me has ayudado muchisimo te agradesco viejo! jajaja me gusta tu web y con esta entrada te pasastes gracias!!
ResponderEliminarQué gusto que hayas encontrado la información que necesitabas, un saludo!
ResponderEliminarHola, te hago una consulta, incorpore a mi blog la opción que te facilita Blogger del gadget "Lista de Blog" y quiero enmarcarla al igual que a las demas que tengo en el Blog. Me podrías decir si es factible y como. Probe con la opcion que brindas en esta página pero me queda desigual a las demas. Muchas Gracias.
ResponderEliminarGabriel Peirano. http://futbolamateurssd.blogspot.com
Hola Gabriel,
ResponderEliminarLo que sucede es que ese gadget parece que no está en la sidebar original de la plantilla sino en una sidebar que has añadido.
Puedes probar agregando también esto:
#sidebar-right-2-1 .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
potro no me va :S queria ponerlo en las entradas pero no se ponen los bordes, como puedo solucionarlo?
ResponderEliminarwww.campamentoweb.blogspot.com
tambien he probado el que le diste a lerh
Mira esta entrada para que veas dónde está el error:
ResponderEliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Esta todo correcto... pero sigue sin verse
ResponderEliminarNo, no está correcto, te falta una llave de cierre, por eso te puse el enlace para que te fijaras en ese detalle:
ResponderEliminar#Text1 h2 {
background: url(http://i578.photobucket.com/albums/ss230/superclub_2009/campamentoweb_preguntas.png) no-repeat top;
height: 55px;
.post-outer {
border: 10px solid #33CCCC;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:15px;
margin: 20px 0;
}
no me habia dado cuenta... :D
ResponderEliminargracias
Hola Potro, una cuestión:
ResponderEliminarcómo puedo poner un fondo a los gadget sin tenerlos que enmarcar. Y de igual modo, cómo poner un mismo fondo a varios gadget????
Gracias
Hola Carlos,
ResponderEliminarSiguiendo el mismo procedimiento puedes ponerle el fondo a los gadgets, sólo cambiarían los estilos para que en lugar de que sea un borde sea un fondo. Sólo agrega antes de ]]></b:skin> lo siguiente:
.column-right-outer .widget, .column-left-outer .widget {
background:#ccc;
padding:10px;
}
Potro, no se dónde poner esta consulta...he mirado en tu indice, pero no encuentro ninguna mas adecuada
ResponderEliminarHe puesto 5 gadgets en el crosscol y no consigo q se vean los titulos. Yo creo que falta espacio, pero no se dónde arreglarlo. Alguna idea?
Muchas gracias,
Hola Isabel,
ResponderEliminarNo creo que sea la falta de espacio, desde hace un par de días algunos usuarios han tenido el mismo problema, así que podría ser un problema con la plantilla.
Agrega antes de ]]></b:skin> este código y dime si eso lo arregla:
.tabs .widget h2 {
display: block !important;
}
Saludos.
Potro, sí, se ha arreglado!! Muchas gracias,
ResponderEliminarGracias por hacérmelo saber Isabel, si continúan los problemas con los demás usuarios haré una entrada sobre este tema. Saludos!
ResponderEliminarEstimado amigo, espero que te haya ido bien las vacaciones..... tengo una pregunta. He enmarcado mis entradas y el margen que me deja en la parte inferior ss grande, cómo puedo disminuirlo. Puedes comprobarlo: http://www.semanasantadebaza.com Un abrazo
ResponderEliminarHola carlos,
ResponderEliminarPuedes modificar el margen inferior en esta área:
.comentarios-cb {
background:#FFFFFF; /* Color de fondo */
border-top:2px solid #FE2181; /* Borde superior */
border-bottom:2px solid #FE2181; /* Borde inferior */
margin-bottom:20px;
}
Con un valor más pequeño se reducirá el espacio.
Otro abrazo para ti.
Potro, he disminuído el porcentaje en margin-bottom:20px y no se produce ningún cambio, ni en vista previa ni guardando los cambios. El espacio entre la línea inferior y la línea de texto de comentarios y etiqueta sigue siendo grande. ¿Qué puede pasar?
ResponderEliminarDebo pedirte disculpas porque entendí mal, creí que te referías a los comentarios y no al marco de las entradas. En ese caso agrega lo que está en negrita en esta parte:
ResponderEliminar.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
padding-bottom:2px !important;
margin: 20px 0;
}
Potro, no logro localizar este ese código, ¿puede haber otro similar?
ResponderEliminarMe he hecho un lío, porque apenas veo que el código que pusiste fue el que es para las plantillas antiguas de Blogger, y no para las que están hechas con el Diseñador de plantillas, que es tu caso.
ResponderEliminarSiendo así, entonces busca esto:
.main .post { margin:0 0 1.5em;padding:0 0 1.5em; padding: 10px; }
margin: 0 0 45px 0;
}
Y cámbialo por esto:
.main .post { margin:0 0 1.5em; padding: 10px; padding-bottom:2px !important;}
Hola, Potro. Ya conseguí enmarcar las entradas, sin ningún problema. He visto que alguien pide cómo cambiar el color de fondo de los widgets. Se puede cambiar el color de fondo de las entradas, después de haberlas enmarcado? Me refiero SOLO al de las entradas, sin tocar el color de fondo de la plantilla. Gracias. Ah! mi plantilla es de las antiguas, Sand Dollar.
ResponderEliminarClari que sí Vicenç, sólo agrega la propiedad del color, añade justo arriba de:
ResponderEliminarborder:1px solid #351C75;
Esto:
background:#ccc;
Chico, eres un genio! Hecho! Bien, queria el color blanco y así lo he puesto: #FFFFFF. Te agradezco una vez más tu ayuda. Saludos desde Catalunya.
ResponderEliminarSaludos Potro , funciona el poder poner fondo de otro color a las entradas y gadget , gracias por tu ayuda mil gracias .
ResponderEliminarSe me olvidaba preguntarte si es posible poner una imagen que quede colocada a la izquierda de la entrada y poner el texto a la derecha de esa misma entrada , por tu ayuda mil gracias.
ResponderEliminarHola pantro,
ResponderEliminarEl área de las entradas es independiente al área de los gadgets, así que sí puedes poner un color de fondo distinto a cada uno de ellos. Sólo tienes que agregar la propiedad del color de fondo:
background: #ccc;
Lo de la imagen, cuando la subas, ahí especificas la alineación de ella, si escoges a la izquierda entonces el texto de la entrada quedará a la derecha.
Potro ya he hecho lo que me has pedido en el e-mail, no obstante el código margin: 0 0 45px 0;
ResponderEliminar} no lo se encuentra en el blog. un abrazo y gracias
Hola Carlos,
ResponderEliminarAcabo de entrar al blog y veo que sí se ha reducido la distancia, si te fijas en la imagen que me inviaste y como se ve ahora en el blog, sí se ve menos espacio entre el borde y el final de la entrada. Ya no se puede reducir más, si acaso 2px menos, pero no es mucha la diferencia. Si quieres quitarle esos 2px entonces cambia el padding-bottom:2px !important; por:
padding-bottom:0px !important;
El otro código que te he sugerido que elimines está justo debajo de la línea que has pegado. Quizá lo veas así:
margin: 0 0 $(post.margin.bottom) 0;
}
Un abrazo.
Hola Potro, despúes de mucho intentar me salió pero poniendo .main-inner .column-right-inner .widget {
ResponderEliminarY los valores que tu diste. Será por la plantilla???, o sea lo hice a prueba y error. Eso es en la plantilla simple. Saludos.
MUXAS GRACIAS POTRO POR TODO.
ResponderEliminarVimonbox, pues con los valores que yo puse en la entrada debió funcionar, al menos con esos yo los he probado y funcionan, pero bueno mientras con los que pusiste funcionen no hay de qué preocuparse ;)
ResponderEliminarGracias por la info potro. Me ha servido mucho para quitarle lo plano a mi blog. Gracias =)
ResponderEliminarPor nada Olmo, saludos!
ResponderEliminarhola
ResponderEliminarcomo podria, reducir el espacio q divide a los gadget y las entradas??.... ps el diseñador de plantillas de bloger, puedes reducir o aumentar el ancho de los gadgets pero siempre mantiene una proporcion dejando un espacio de separacion bien grande, por eso kiero reducir eso; aparte reducir el margen de la izkierda del gadget ya deja mas espacio en los costados del blog¬¬
Gracias x tu ayuda
saludos...
agrego .......q mi blog es de 3 columnas (gadget, entradas y gadget)
ResponderEliminarencontre algo sobre "outer-wrapper" q es para aumentar el ancho, mmm pero no lo encontre en los codigos html de mi blog¬¬.. , espero q me ayudes con mas informacion
gracias...
Hola yagami,
ResponderEliminarPara disminuir el espacio que hay entre la sidebar y las entradas agrega antes de ]]></b:skin> esto:
.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {margin-left:-20px !important;}
Gracias
ResponderEliminarPotro me funciono d maravilla :)
Hola he puesto el codigo solo para gachets y yo no lo veo. esto es lo que he puesto lo he intentado varias veces pero no hay forma de que se vea
ResponderEliminarla plantilla es del diseñador de plantillas de blogger
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #FBFB18;
border-radius:10px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
padding:50px;
margin: 50px 0;
}
.footer-inner .widget {
border: 1px solid#FBFB18;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
padding:50px;
margin: 50px 0;
}
.]]>
en este blog http://zerezas-curiosidadesvarias.blogspot.com/
queria los borde redondeados es por la
plantilla ? en el blog de cocina tengo otra plantilla que me funciona mejor
http://zerezas-otrasformasdecocinar.blogspot.com/
ZereZas
Arribita del código que has puesto hay una llave de cierre que no está cerrada, sino la cierra no funcionará nada de lo que pongas debajo:
ResponderEliminar.section-columns td.columns-cell {
border-left: 1px solid transparent;
}
.widget {margin-top:15px;}
Hola Potrito! espero que estes bien..
ResponderEliminarQueria preguntarte como podría poner un fondo a los titulos de los gadgets, osea un color normal, no deseo imagen, solo que el titulo de los gadgets se vea resaltado con un fondo claro...
Si me ayudas porfis??
Cuidate y gracias,
bexitos...
Hola Antoxwoman,
ResponderEliminarSería igual que en esta entrada:
http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html
Sólo que en lugar de poner esto:
background: url(URL de la imagen) left top;
Pondrías esto:
background: #FF00FF;
Besos!
Gracias Potrito beiio!! ^_^
ResponderEliminarPor nada ;)
ResponderEliminarhola POtro no consigo enmarcar la primera columna de mi blog,
ResponderEliminar}
.second-links a {
color:#666666;
}
.post-outer {
border: 2px solid #94B9D1;
border-radius:5px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
padding:15px;
margin: 10px 0;
}
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
si pudieras ayudarme esta es mi direccion http://vantagehighenergy.blogspot.com/ .
Hola pantro,
ResponderEliminarEse código que has puesto es para las plantillas hechas con el Diseñador de plantillas de Blogger. Tú usas una que no es original de Blogger, sin embargo quizá te sirva el código para las plantillas antiguas.
Gracias por contestar y seguire probando con lo que me dices , un saludo! .
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola potro ya estoy de vuelta, por fin lo pude poner lo que me dijiste pero veo algo raro en la sidebar izquierda donde esta bufete vila busqueda
ResponderEliminarlo enmarca en dos recuadros y me parece raro,tiene que ser asi? y yo no tengo estilos de css, me dejaba fuera y desenmarcado la publicidad de adsense y contador de visitas de geocunter que yo creo que lo debia
quitar porque ya tengo el de bloger y me parece mas fiable,
en fin el desajuste de la sidebar me ha hecho ajusta el ancho del blog completo y lo puse en 1150 la barra lateral izquierda en 280 y la barra lateral derecha en 230
con el diseñador de plantillas de blogger.
me lo puedes ver y decirme que pasa esta en el blog----
http://zerezas-curiosidadesvarias.blogspot.com/
y como siempr gracias
un saludo
zerezas.
Hola zerezas,
ResponderEliminarEn algunas plantillas es normal, eso depende de la estructura de cada plantilla. Quizá sea por el tipo de plantilla, su diseño, estructura, etc.
Saludos.
hola potro siendo asi a lo mejor me gusta mas o queda mejor enmarcando un gadjet sy y otro no se puede hacer?
ResponderEliminarun saludo gracias
zerezas.
gracias hermano ya personalise un poco mas el blog gracias hermano
ResponderEliminarHola Potro, yo aquí de nuevo :D
ResponderEliminarQuería preguntarte como podría enmarcar el blog. Es decir, no me refiero ponerle un borde total al blog, sino colocarle el borde al cuadro que esta dentro del marco total, haha. Sorry pero creo que ya te mareé, creo que las imágenes explicarían mejor lo que deseo. He aquí una imagen:
http://img832.imageshack.us/img832/3449/exampleborder.png
Como ves, deseo ponerle un marco así a lo que esta en color rojo, claro que con otro color :) pero quisiera saber el código y donde debo insertarlo. Please Potris, espero me puedas ayudar :D
Bexotes y muchas gracias x ayudarme! :D
Hola de nuevo ,
ResponderEliminarDe forma automática no. Tendrías que ponerle el borde de forma manual a cada gadget. Para hacerlo debes sacar el ID del gadget, luego antes de ]]></b:skin> poner esto:
#ID {
border:2px solid #000;
}
Y en donde dice ID poner el ID del gadget al que le pondrás el borde. Eso debes hacerlo para cada gadget, o bien, para no usar tanto código agrega ahí mismo todos los IDs separados por una coma.
#ID1, #ID2, #ID3, ID4, ID5, ID6 {
border:2px solid #000;
}
Por nada Posandoval The Master, saludos!
ResponderEliminarHola Antoxwoman,
ResponderEliminarGracias por el ejemplo ilustrativo :)
Agrega antes de ]></b:skin> esto:
.content {
border:3px solid #000;
}
Con eso se deberá crear un borde al contenedor de la plantilla.
Bexotes para ti también!
Hola Potrito!
ResponderEliminarGracias por responder...
Traté con el código pero no sale el borde del lado derecho, salen los 3 sí de arriba, abajo y de la izquierda. Probé con 2 blogs y el resultado es el mismo :3
Puedes verlo aquí:
http://img707.imageshack.us/img707/6363/blogdeprueba.png
Habrá alguna solución a este pequeño problemilla?
Gracias potris!! te devuelvo otros bexotes!! :D
Hola Antoxwoman,
ResponderEliminar¿En cuál blog has puesto el código? Necesitaría verlo puesto para poder ver qué puede estar pasando :)
Este comentario ha sido eliminado por el autor.
ResponderEliminarOkis Potris!!!
ResponderEliminarMi blog es:
http://www.evolucionfacebook.blogspot.com/
La verdad es que no sé que pueda estar pasando porque no sale.
Es más lo he probado con un blog nuevo de prueba en la que no he agregado ningún gadget, sólo una entrada para ver si resultaba, pero no, el resultado sigue siendo el mismo, el borde de la derecha nada que aparece...
Mi plantilla es del diseñador de platillas de blogger, es la simple.
Gracias Potro por tu pronta respuesta!!!
Besototes..
Antonella.
Hola Antoxwoman,
ResponderEliminarPero no veo puesto ahí el código del borde :(
Necesito verlo puesto para saber qué puede estar pasando, quizá es algo que se corrige en un dos por tres, pero tengo que verlo "en vivo" ;)
Besos.
Si Potrito tienes razón. Ya lo puse. Puedes verlo ahi, así lo dejo hasta esperar tu respuesta.
ResponderEliminarhttp://www.evolucionfacebook.blogspot.com
Gracias. Cambia entonces ese código que te di, por este otro:
ResponderEliminar.content-outer {
border:3px solid #000;
}
Con ese ya debe quedar, sino, me avisas ;)
Wooow...increíble... esta vez sí resultó... genio!!! :D
ResponderEliminarGraciassss, eres como mi padrino mágico :D eres sencillamente genial, thank u sooo muuuuchhhh, u amazing!
Bexototototes... :D
Qué bueno que todo salió bien :)
ResponderEliminarSiiiiiiiiii y todo gracias a tí! Gracias Potro!!! :D:D:D
ResponderEliminarHola, le cambié el radio y lo puse a 15px y conseguí que los bordes se me vieran redondeados, pero me gustaría que el fondo de cada entrada, gadget, footer, se viera de otro color. Como puedo añadirle un fondo' gracias de antemano
ResponderEliminarAhí mismo puedes agregar el atributo del color de fondo:
ResponderEliminarbackground:#ccc;
Pero eso aplica para todo el contenedor.
gracias se ve como quería, pero el sidebar y el footer no aparece el color del fondo, incluso al hacerlo desaparece el borde que lo enmarca
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarmira buscando buscando probé aunque con más trabajoa cambiar el fondo uno a uno buscando entre las variables y poniendo
ResponderEliminar#HTML11{
background: #6a7227;
}
cambiando el nombre de cada uno claro
puedes ver cómo quedó http://elblogdsonia.blogspot.com
Sí, de hecho en el comentario #113 se menciona ese método ;)
ResponderEliminarYo quiero enmarcar el pie de la entrada, esa caja a lo ultimo que dice el nombre de quien lo publico, los botones para compartir etc. Mejor dicho exactamente lo quiero asi como tu lo tienes que tiene los botones sociales,entradas relacionadas y el boton de donar. Porfavor ayudame! Este es mi blog http://vainasbook.blogspot.com/
ResponderEliminarEse es el post footer, y sólo habría que añadirle el borde:
ResponderEliminar.post-footer {
border:1px solid #000;
}
Potro mira mi blog es www.reventanime.blogspot.com intento poner el enmarcado y no puedo desde k es peusto lo de leer mas en modo resumido
ResponderEliminarEl problema es que has eliminado la llave de cierre que estaba arriba de donde lo has puesto:
ResponderEliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Este comentario ha sido eliminado por el autor.
ResponderEliminarPERDON YA LO SOLUCIONA GRACIAS TENIAS RAZÓN UN FALLO TONTO
ResponderEliminarQué bueno que lo has resuelto :)
ResponderEliminaroye, lo siento. ya encontré que andaba mal y logré resolverlo. cuando cambié el color del texto automáticamente cambió el color del título. Otro saludo.
ResponderEliminarVale, de todas formas ya te he respondido allá ;)
ResponderEliminarSaludos.
Hola, Potro. He enmarcado los gadgets y las entradas. El único problema es que justo encima de los gadgets de la cabecera hay unas líneas negras que antes no había. Me podrías decir cómo quitarlas? Muchas gracias. Este es mi blog http://infectadosblog.blogspot.com/
ResponderEliminarPerdón, se me olvidaba decirte que también está la línea negra que aparece justo debajo del título del blog. Esa también me gustaría quitarla y no sé si estaban antes o aparecieron cuando enmarqué los gadgets y las entradas.
ResponderEliminarHola INFECTADO CERO,
ResponderEliminarBusca en tu plantilla un código como este:
.tabs-inner .section:first-child {
Si lo tienes mira si debajo de eso hay una propiedad de borde, si es así elimínala, con eso desaparecerá el borde de esas áreas.
Saludos.
Muchísimas gracias, Potro!!!! Ha funcionado. Eres un máquina!!!
ResponderEliminarGracias a ti por tu visita!
ResponderEliminarHe seguido las indicaciones pero no sé por qué no me funciona, ¿qué puede ser Potro?
ResponderEliminarSaludos
Es porque al ponerlo has eliminado la llave de cierre de los estilos que están arriba. Lo pusiste así:
Eliminar.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
Y debe ser así:
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
}
.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
Saludos!
buenas potro
ResponderEliminaryo no quiero enmarcarlos sino que los gadget tenga el fondo del color de mi plantilla como lo hago por que los gadget tienen es un color negro de fondo y no quiero eso sino que esten del color de la plantilla
Hola Casting Venezuela, si usas una plantilla del Diseñador de plantillas entonces desde ahí, desde el Diseñador, puedes elegir el color de fondo que tendrán los gadgets y demás elementos.
EliminarSaludos.
no uso una personal potro por eso te digo por que no la encuentro como hago eso potro con una plantilla personal
ResponderEliminar¿Cuál es el blog? Es que por más que me intento aprender los blogs de todos no puedo, son muchos lectores o.O
EliminarHola Potro estoy necesitando colocarle a un texto determinado (párrafo ) de una entrada un fondo y la manera editar ese fondo (color, ancho, alto). saludos.
ResponderEliminarPuedes mirar esta Pag. de ejemplo: http://www.visualkey.net/sami-halawa
ResponderEliminarNo se si este POST sea el más indicado "enmarcar las entradas y gadgets"
ResponderEliminarSólo añade un DIV con los estilos que quieres. Por ejemplo:
Eliminar<div style="background:#ccc; padding:15px;">Este es un texto de ejemplo.</div>
Ahí mismo le puedes añadir los estilos que quieras.
Saludos.
Que bueno Potro!
ResponderEliminarAhora bien, si en vez de enmarcar los post o los gadgets, quiero enmarcar más o definir mejor el borde del blog, ¿Cómo se puede lograr?
Fijate que en mi blog, el borde es de un ligero gris que pierde fuerza y me gustaría colocerle otro color o hacer el borde más consistente: www.mariavalverdefansclub.com
GRACIAS CAMPEON
Hola Marçal M.,
EliminarDebajo de .main-outer { agrega esto:
border: 2px solid #000;
Ese es un borde, el 2px es el ancho, y el #000 el color.
Saludos.
Potro el codigo funciono perfecto pero no al añadir el estilo de ancho y alto. No se si lo estare haciendo bien me podras echarme una mano saludos.
EliminarPues tendría que ver cómo lo estás haciendo, pero sólo es agregar esos estilos ahí mismo:
Eliminarstyle="background:#ccc; padding:15px; height:100px; width;200px;"
Todo perfecto Potro. Funcionando un 100% Saludos.
ResponderEliminarBuenas Potro.
ResponderEliminarUna pregunta; puedo hacer que solo se aplique el marco a solo algunos gadgets del sidebar?
Gracias por toda la ayuda Potro!
y otra cosa Potro, en IE no se ven las esquinas redondeadas de los marcos.
ResponderEliminarGracias!
IE no soporta los bordes redondeados, me parece que sólo la versión 9 puede interpretarlos.
EliminarPara que se aplique a un gadget en específico agrega antes de ]]></b:skin> lo siguiente:
#NOMBRE {
...aquí los estilos...
...aquí los estilos...
...aquí los estilos...
}
En NOMBRE iría el ID del gadget al que se lo quieres aplicar, y dentro pondrías los estilos que deseas, en este caso los del borde.
Saludos.
Hola!
ResponderEliminarHe cambiado de arriba abajo mi blog gracias a ti, ya te lo he comentado por Twitter, muchas gracias :)
Una pregunta: entiendo que puedo poner un color, o que sea transparente, con background-color:#xxxxx;
En cambio, ¿puedo hacerlo translúcido con cierta opacidad? En otro lado he visto un código como éste:
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
Pero no funciona dentro de .post-outer {
¿Existe alguna solución?
Muchas gracias!
Jose
Un saludo,
Jose
Muchas gracias Jose, por tu comentario y por el tweet de ese día :)
EliminarEsos estilos efectivamente son de opacidad, y deberían funcionar. Ponlos de nuevo y dime en cuál blog lo has puesto, así puedo ver si es necesario aplicárselos a otra clase, o si hay un error en la colocación.
Saludos.
Muchas gracias!
ResponderEliminarEl blog es:
http://josearnedo.blogspot.com/
Lo pongo dentro de .post-outer; si pongo
background-color:#222222; -> no hace caso a opacity
Y con
background-color:#transparent -> queda transparente del todo...
Y si quito background-color, también queda transparente del todo...
Muchas gracias de antemano! :)
Jose
Ahora lo tienes dentro del post-body, y no notas la opacidad porque está a casi nada. La opacidad más baja sería de 0.1
EliminarSi lo pones debajo de .post-outer { lo verás aplicado a toda el área de la entrada, por ejemplo:
.post-outer {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
Sin embargo, la opacidad afecta a todo el contendor, no sólo al fondo, así que igual los textos e imágenes de las entradas se pondrían traslúcidas.
Así que, en esos casos, es mejor usar una imagen semi-transparente en lugar de un color sólido. Por ejemplo:
.post-outer {
background: url(URL de la imagen);
De esa forma, una imagen de un color gris, semi-transparente, en formato PNG quedará como fondo de las entradas y el resto de los elementos de las entradas no se verá afectado.
Saludos y enhorabuena por el primer lugar :)
Perfecto!!! Ya lo he hecho, y es exactamente lo que quería :)
EliminarMil gracias de nuevo, y enhorabuena a ti por tu clasificación en el concurso!!! :)
Un abrazo,
Jose
Gracias José, qué gusto que quedó justo como deseabas :)
EliminarPotro aca en esta pagina -> http://www.pasaencorea.com/
ResponderEliminarSus gadgets lo han enmarcado con un fondo verde y una franja pequeña de color verde más oscura.
Quisiera saber como lo han hecho o algo parecido a eso.
Hola Kim Rae Soon. Ese blog no tiene enmarcados los gadgets, sólo tienen un color de fondo los títulos, que supongo es a lo que te refieres.
EliminarPara poner los títulos de los gadgets de esa manera busca el h2 { de tu plantilla, y justo debajo agrega esto:
margin: 10px 0 0 0;
padding: 5px 0 5px 10px;
background: #8fc725;
font-size: 14px;
font-family: Arial, Helvetica, Sans-serif;
font-weight: bold;
text-transform: uppercase;
border-left: 5px solid #587e0c;
color: #fff;
text-shadow: 0 -1px 0 #6a9412;
Cordial saludo Potro,
ResponderEliminarQue bueno poder saludarte de nuevo, y desde ya mil gracias por la ayuda que me puedas brindar. sucede que hace dias me dio por mirar que le podia hacer a mi plantilla sand dollar y pues encontre que el outer wrapper lo podia tener en un color le puse por ahora blanco, pero megustaria saber si en esa parte que tengo en blanco le puedo poner una imagen de fondo y mezclarlo tambien con algun color, me gustaria si se puede hacer me expliques como lo hago que codigo agrego en outer-wrapper de mi plantilla. Te dejare la url de mi blog http://www.angularestereo972fm.blogspot.com/ Gracias potro por compartir tus conocimientos con nosotros una saludo.
Hola Angular Estereo,
EliminarSi ya tienes el color definido y quieres cambiarlo por una imagen, entonces cambia esto:
background: #fff ;
Por esto:
background: #fff url(URL de la imagen);
Con eso tendrás una imagen don fondo en esa área.
Por cierto, vi que en tu CSS pusiste unos comentarios que no deben ir de esa forma. Mira esta entrada para que veas a qué me refiero:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Hola Potro,
ResponderEliminarMuchas gracias como siempre por tu ayuda, me quedo genial. Tambien te queria comentar que realice la labor que me encomendaste en CSS tal cual como esta en la entrada que me enviaste GRACIAS TOTALES y un saludo.
Me alegra haberte podido ayudar :)
EliminarSaludos.
Potro de nuevo,
ResponderEliminarQue pena con usted, creo que olvide uno de los tropiezos más frecuentes IE se ve bien en mozilla, chrome pero en internet explorer como siempre nada luce como uno quiere, no se si depronto me puedas ayudar y mirar que otro codigo pe toca agregar para que se vea igual que en los demas exploradores te dejare la dirección para que verifiques lo super que me quedo http://www.angularestereo972fm.blogspot.com/ como siempre mil agradecimientos y disculpa tanta preguntadera.
Siento no poder ayudarte con eso pues no tengo equipos con Windows para tener acceso a IE. Hay algunas cosas que más o menos podría decirte cómo solucionar, pero tendría que saber exactamente qué no se ve bien ahí, aun así sería hablarte al tanteo pues como te digo, rara vez tengo un Windows a la mano :(
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro.
ResponderEliminar¿Sería posible enmarcar las entradas utilizando imágenes? Es decir, poder enmarcar la entrada con, por ejemplo, un balón de fútbol que se repitiese alrededor de la entrada.
Gracias.
Tal vez poniendo esto:
Eliminar.date-outer {
background: url (URL de la imagen);
padding: 30px;
}
.post-outer {
background: #CB9 !important;
}
Aunque las entradas podrían verse de un color distinto.
No funciona, Potro. No te preocupes, era un antojo el que tenía. Gracias por intentarlo.
EliminarUn saluso!
Muchisimas gracias Potro!
ResponderEliminarTenia mucho tiempo buscando la manera de enmarcar las entradas y tengo una duda que no es de este tema.
¿Como le puedo quitar el fondo negro transparente que tiene la plantilla Picture Window?
De antemano gracias!
Para quitar el fondo semitransparente del contenedor busca esta parte y elimina lo que está en negrita:
Eliminar.content-outer {
background: $(content.background);
-moz-border-radius: $(content.border.radius);
-webkit-border-radius: $(content.border.radius);
-goog-ms-border-radius: $(content.border.radius);
border-radius: $(content.border.radius);
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin: $(content.margin) auto;
}
Saludos.
Muchas gracias Potro!
EliminarTe felicito por tu pagina y tus tutoriales :D
Saludos.
Saludos Potro, hice lo de encuadrar gadget y ¡estupendo!.Ahora me planteo que quiero dejar un gadget(un reloj)sin encuadrar,solo un gadget no todos y no sé si se puede hacer.Espero tu respuesta y te agradezco tu atención. Ana
ResponderEliminarHola Ana, sólo localiza el ID del gadget, ya que lo tengas agrega en los estilos esto:
Eliminar#NOMBRE {
border: 0 !important;
border-radius:0px !important;
}
En donde dice NOMBRE iría el ID del gadget al que se lo quieres aplicar.
Saludos.
Gracias otra vez.Voy rápido a probarlo
EliminarPotro ayer me desanimé,no pude encontrar ID ni lo del estilo,pero hoy todo un exito.
EliminarUn montón de gracias. Ana
Qué bueno que no has desistido :)
EliminarMe quedó buenísimo, El Potro, pero tengo una duda... Si tienes tiempo, ¿podrías fijarte por qué se ve el Sidebar de ese manera en mi blog desde el gadget "El Desafío de Shinichi Kudo?". Como siempre, debe ser la plantilla XD
ResponderEliminarParece que hubiera un error en tu plantilla, porque según el código fuente dentro de ese gadget tienes los demás gadgets, no me explico cómo pudo suceder o cómo es que Blogger no te ha marcado error al guardar cambios o.O?
EliminarSí... Raro, ¿no? Probaré algunas cosas a ver qué pasa, pero, de todas formas, lo arregle o no, me gusta cómo quedó y lo dejaré así ^_^ Uno le agarra amor a su plantilla, así sea imperfecta XD y me gusta además cómo va quedando con los cambios que le estoy haciendo... ¡Besos desde Argentina y ya nos estaremos leyendo en otra entrada! Muchas gracias por tomarte el tiempo de fijarte en mi problemilla ^^
Eliminar¡Hola de nuevo! Ya descubrí cuál era el problema, éste código que había pegado en un gadget html. http://laeulalia-tublog.blogspot.com.ar/2008/04/poner-una-imagen-que-tenga-movimiento.html Ahora puse la imágen en un gadget de Imagen y el problema se solucionó... Lo curioso es que no puedo recordar por qué utilicé ese código en vez del gadget correspondiente... XP
EliminarUna cosa importante... desde hace ya varios días que no me sale la opción de editar las entradas desde el blog (ése lapicito que suele aparecer el lado del nombre del autor), tengo que entrar el escritorio para editar las entradas. También noté que el contador de visitas cuenta la mía a pesar de estar logeada, cosa que antes no sucedía... ¿Será problema de Blogger?
Qué bueno que lo has resuelto :)
EliminarCreo que a todos nos pasa que después de un tiempo nos preguntamos para qué habremos usado equis cosa.
Lo otro que mencionas debe ser por las redirecciones de dominio según el país:
http://ciudadblogger.com/2012/03/las-nuevas-direcciones-de-los-blogs.html
Excelente Potro, siempre encuentro lo que busco en tus tutoriales, ¿que haría yo sin ti??? un abrazo desde Isla Margarita, Venezuela!!!
ResponderEliminar