52

Plantilla Rounders con widgets separados

Hace unos días me consultaban sobre la forma para conseguir que en la sidebar de la plantilla Rounders se muestre cada widget por separado. Para lograr esto se me ha ocurrido copiar el código de uno de los que vienen en la plantilla y copiarlo tantas veces como widget quisiera mostrar. Y este ha sido el resultado:



[1] Para hacerlo tenemos que ir a la parte HTML de nuestra plantilla y, sin expandir los artilugios, localizar la parte del código que corresponde a cada widget, copiarlo y volver a pegarlo justo debajo, las veces que queramos, cambiando cada vez el id=sidebartop, podemos ir poniendo "sidebartop1", "sidebartop2" y así sucesivamente.

[2] La parte que hemos de localizar y copiar es esta:

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile2' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div></div>

En el caso de este ejemplo, dentro del widget esta el perfil (en negrita en el ejemplo), en cada caso esta parte del código se verá distinto según lo que hayamos colocado en ese widget, así que lo hemos de tener en cuenta es el resto del código.

[3] De esta manera duplicaremos el widget que en la plantilla Rounders original se muestra de color verde, para duplicar el otro widget (el de color blanco), haremos exactamente igual con la unica diferencia de que el código a copiar sería este:
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div></div>

No olvidaremos cambiar cada vez la "id=sidebar" por "id=sidebar1", "id=sidebar2", etc.

Entradas Relacionadas:

52 comentarios:


Tranquilita

Apreciada Rosa... Me encantó este consejo!

Pero me gustaría cambiar el color de una de las secciones de la sidebar. ¿Tienes alguna idea de cómo hacerlo?

(La verdad no quise cambiar nada más por temor a desfigurar la plantilla:( )

Te pido, si no es mucha molestia, que visites el blog donde hice este cambio: Los Recuerdos de Yoyo y Chata.

Recibe un gran abrazo desde México.

Diana Tio.

Rosa

Tranquilita, podría cambiarse sin problemas el color central, pero la parte de arriba y la de abajo, es una imagen predeterminada, podría cambiarse por otra igual del color del centro, pero yo no sabría hacerlo, habría que usar algún programa de dibujo y esas cosas yo como que no tengo ni idea...lo siento.

Pau

Hola Rosa, gracias por preocuparte de mi casita jejeje, en un post te preguntaban si se podia poner una imagen en el titulo por etiqueta, bucando una información encontré el blog http://concdearte.blogspot.com donde lo hace... cómo? el codigo fuente dice una cosa pero de ahi a entenderlo... palabras mayores o sea para ti jejejej.... espero te sirva el dato, un abrazo Pau

Rosa

Pau, la verdad que no entiendo exactamente de que hablas...he visto ese blog y sigo sin entenderlo, además el blog ese no termina de cargar, no se que le pasa...

•°o.O •° CaRoLiNa °• O.o°•

Rosa, ya vote nuevamente para que seas el blog del día. Por si acaso yo fui la que te recomende, jijiji, sorpresa!!!!

Saludos desde Chile!!!

Rosa

Je,je, Carolina ¡Gracias! Me llegó el email con el aviso y me quede...KO!
Me preguntaba quién había sido...así que eras tu! Si ha sido una sorpresa, si, de lo más agradable por cierto.
¡Un abrazo y gracias nuevamente!

Lucía

Este truco sólo sirve para la plantilla rounders imagino ...

Si en tu plantilla no tienes ninguno de estos widgets con recuadrito para poderlo copiar tantas veces como quieras, se puede hacer algo para obtenerlos ??

Gracias Rosa.

Pau

Hola Rosita, a lo mejor no me explique bien, lo que pasa es que en esa página cada vez que pinchas una etiqueta el header del blog va cambiando de imagen solo se mantiene el título y al mirar el codigo fuente no entendi mucho como se hacia :)un abrazo Pau

Weells

Hola Pau... he entrado a la pagina que dices y la verdad no se donde arte lleva la C pero bueno... vi su diseño y no hay nada de especial, el template que usa es sencillo y práctico.

Mas bien te invito a visitar mi blog, le he agregado un sistema para ver las noticias sin que se recargue toda la pagina y ademas una opcion para importar los post de otros blogs. Aun me faltan arreglar algunos detalles y luego publicaré mi primer template :D

Rosa

Pau, está usando un sistema parecido a este para hacer que la imagen, mejor dicho las imágenes del header, se muestren de forma aleatoria, cada vez que recargamos la página una distinta:
http://elescaparatederosa.blogspot.com/2007/04/header-aleatorias-para-el-blog.html

Weells

que distraído que soy o.0 ... no leí bien

Silvestrosvky

Hola Rosa, gracias por la sugerencia eso era lo que queria; otra pregunta.En mi blog(notienecompon.blogspot.com),¿Cómo hago para colocar la lampara al lado de los titulares?

BGS

Hola Rosa,

Estuve leyendo tus entradas y me imagino que quizas sabes cual es el color verde (el que tiene de fondo mi blog www.posicionar.blogspot.com) en la plantilla Rounders, puesto que quisiera utilizarlo y para ello necesito el codigo.

Muchisimas Gracias

Rosa

BGS, saludos y gracias por pasarte!

El código del color verde , ese tan lindo, es:
#AABBAA o en minúsculas, es igual.

BGS

Gracias Rosa por la ayuda anterior, me sirvio mucho.
Me gustaria saber como hacer para cambiar el ancho del Widget.

saludos

Rosa

bgs, el ancho del widget se modifica aquí:
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

Cambiando el valor en width:240px; por el ancho que quieras, teniendo en cuenta que la suma del ancho que pongas al widget más el ancho del #main-wrap1 {
width:485px;

No puede sobrepasar el ancho total del */
#outer-wrapper {
width:740px; (cuerpo del blog)
Porque si no se "desbordaría) y el widget seiria hacia abajo, ve usando la vista previa y aumentando el ancho hasta dar con el correcto.

O aumenta de mano el widht en #outer-wrapper { para ensanchar el cuerpo y que lo demás tenga suficiente espacio.

Carlos Ventura

Hola rosa,de nuevo por tu ayuda.estoy haciendo la prueba en un blog de prueba con la misma plantilla de Farandula.
pero no se como hacerlo ya que los intentos que he hechos, cuando guardo la plantilla no lo acepta.dime que hago y excusa la molestia.

Carlos Ventura

Aqui estoy de nuevo, pero esta vez es para decirte que despues de tanto batallar lo he logrado.Aunque es en un blog de pruebas ahora lo intentare con el blog de la farandula.
Gracias mil y un abrazote....

Rosa

Carlos,me alegra oír eso. Bien por ti! :-)

Carlos Ventura

Despues de hacer Rounders con widget separado, he notado que en el titulo de cada posp no ha quedado como en el tuyo que tiene el fondo con color:ejemplo donde tu tiene el logo de enlazame,el titulo enlazame sale con su color. No se si me doy a entender.
Hay alguna forma de lograrlo?

Rosa

Carlos, claro que eso no sale, es otra cosilla aparte lo que hay que hacer para conseguirlo. Mira en este post y si tienes problemas me comentas:

Titulos con color

Carlos Ventura

ROSA MIL GRACIAS POR TU AYUDA,GRACIAS A TI Y A TU BLOG HE LOGRADO HACER MUCHAS COSAS PARA MI BLOG.
ESTA VEZ PONER EL COLOR AL TITULO DE LA SIDEBAR ME RESULTO MUY FACIL.
GRACIAS Y ABRAZOS...

Rosa

Carlos, gracias ati.
He estado en tu blog de pruebas y he visto lo que vas consiguiendo...:-)
Cualquier cosilla, pregunta, sin problemas.

Gaby

Rosa... SOS!!! Con tu tutorial pude duplicar los módulos pero ahora una duda me carcome el cerebro: ¿Cómo hago para que sean de distinto color al original?
Bueno, te agradezco mucho la ayuda... Besitos y Feliz 2008!!!

Rosa

Gaby, el fondo de los widget pueden cambiarse de color, pero la parte de arriba y la de abajo (lo que hace sus esquinas redondas) es una imagen, así que no cambiaran de color, por lo tanto los widget quedarían como en dos colores distintos...lo que no sería demasiado estético, creo yo.

observador

Rosa:
Primero felicitarte por tus conocimientos, por tu exagerada dedicación y por tu sensibilidad.
Aprovechando tu solidaridad enorme con los recién llegados, me atrevo a realizarte una pregunta, que espero que para ti sea de perogrullo.
El problema es que acabo de meterme en esto de retocar el estilo y elegí Rounders3, pero procurando un poco más de espacio solo para el Page Structure.
Todo fue bien, pero necesitaba los corners_main_bot.gif y corners_main_top.gif adaptados a 730, para que con los sidebar-wrap en 240 todo quedase bien.
Retoqué los originales en ImageShack al ver esta entrada, pero no conservan el color sepia del fondo, quedándome blancos o negros :-(
Seguro que es una tontada, pero ... como se puede lograr cambiar eso, de la misma forma que tu cambiaste el que está en http://img159.imageshack.us/img159/4313/cornersmaintopgq9xs2.jpg

Usé algún programa gráfico que tenía a mano, peor no lo conseguí ... :-<
Ahora lo deje con una solución de compromiso,pero bien no está.

Gracias por anticipado y espero que al menos te rías un poco con mi desconocimiento y torpeza.

Rosa

observador, que va no es ninguna tontada, de echo yo no manejo ningún programa gráfico de esos...no tengo ni idea.
Lo hago de forma "artesanal" y si te dijese que uso el paint seguro que no me creerías, pero así es. Lo unico que hago es aumentar el tamaño de la imagen y esta pierde el formato gif, lo que hace que si cambiamos el color de fondo de las entradas los corners no cambien el suyo.
Si vas a mantener el color actual, al menos de momento, este "apaño" te servirá...Te dejo las imágenes a 730 px:

#main-wrap1 {

http://img171.imageshack.us/img171/3387/cornersmainbotwq2.gif


#main-wrap2 {

http://img171.imageshack.us/img171/6576/cornersmaintopyj3.gif

observador

Te creo Rosa, te creo ... y acabo de probarlo y es requetefácil.
Además lo haces de la forma más simple y efectiva.
Gracias por colocar las figuras, que ya estoy utilizando, porque además contestaste muy rápidamente.
La verdad es que te pareces a una ONG . Que tengas suerte en todo.

Rosa

Observador, es la primera vez que me comparan con una ONG, je,je, me ha hecho gracia :-)

¡Suerte a ti también!

Haîmat

Rosa, no se si esta petición iría aquí pero bueno, yo la dejo ;b
Necesito saber como puedo poner una columna lateral al lado izquierdo en la plantilla rounders 4, supongo que como hiciste con la plantilla scribe (creo oO). He buscado en otros sitios y o bien no coincide lo que me indican ellos con lo que hay en mi código HTML o bien me descargo la plantilla que dejan y según dice blogger "no esta completa" como si faltase cerrar algo. No se, solo necesito un poquito de ayuda XD Gracias por adelantado (espero) y por tu blog, es realmente util ;)
¡Saludos!

Rosa

Haimat, creo que esto es lo que buscas:
http://elescaparatederosa.blogspot.com/2007/06/rounders3-aadir-sidebar.html

Haîmat

Gracias,ya lo intente de esa forma XD Al final he acabado usando la plantilla para descargar de esta pagina


http://www.bloggerbuster.com/2007/08/rounders-4-three-column-template-for.html

¡Saludos!

Rosa

Haimat, ;-)

PedroX

Este post me ha servido para hacer LO CONTRARIO... en todos mis blogs, utilizo la plantilla rounders, y esa tiene 2 modulos (se puede decir que son como 2 sidebars, una arriba y una abajo)... pero yo le hice una modificacion a la plantilla, y la otra sidebar o modulo de anajo se ve mal.. pero con el codigo que das aqui, logre quitarlo para que me quedara 1 solo..

Saludos!!

Rosa

PedroX , claro, solo seguir los pasos para quitar en lugar de para poner...¡chico listo! :D

Javi

Hola! soy el chico que hace unos dias andaba a vueltas con un curso de turco y sus menús y sus historias, como me ayudaste, y como el 50% de mi blog lo he montado gracias a tus consejos, pues te dejo una aportación que he hecho, es una radio con 7 canales, la he hecho de musica turca como no podría ser de otra forma, pero seguro que tú sabes como cambiarlo, y si no lo sabes (pero te interesa el asunto) me puedes preguntar. te queria mandar un archivo adjunto, pero con esto no se puede, asi q te dejaré un segundo comentario con el código, por si le puedes dar una utilidad para ti o para otra persona, que estoy seguro que si.
un saludo y muchas gracias!!!

Javi

Vaya, no me deja enviarlo... te lo mando por mail, si te interesa nabralo (no es ningun virus)... un saludo!

LiLi mint

que tal Rosa, muy util tu blog! me he pasado un buen rato por aquí leyendo y no se bien cómo llegué a este post. Bueno, creo que aquí bien cabe la pregunta:
¿cómo es que puedo poner diferentes imágenes en cada una de las cajitas (widgets) del blog. He visto que tienes por ejemplo, una muchachita guapa en el RSS, y no se si sea un .js el contador de entradas y comentarios.

No sería por copiar, pero si para personalizar un poco más mi blog. Agradeceré tu ayuda.

Una vez más, muy buen blog el tuyo!
Saludos desde México

Rosa

LiLi mint , acabo de publicar una entrada sobre el tema de los widget con imágenes.

El contador de entradas y comentarios, lo dejamos para mañana ¿ok? ;-)

LiLi mint

Bien! que he leido el nuevo, ya he comentado, y en cuanto a los contadores, vale, que no hay apuro.

Gracias!!

Amaia

Rosa, tu blog es genial, lo he descubierto hoy, y a mi que soy una novatilla, me está ayudando mucho.
Gracias

Carlos C.

Hola Rosa,una consulta como le cambio el color de los títulos a los nuevos módulos. Gracias de antemano.

Carlos C.

Hola Rosa,una consulta como le cambio el color de los títulos a los nuevos módulos. Gracias de antemano.

Rosa

Carlos C., pues tendría que cambiarse desde "fuentes y colores" al mismo tiempo que los demás.

Odiseo Blabla

Genial!!! lo hice y funcionó...

Ammonio

Hola rosa. Tengo un problema: En mi blog no utilizo la plantilla rounders. Utilizo la plantilla mínima. Y lo que deseo es poder modifica independientemente cada widget y no tener que cambiar de plantilla ¿Qué me recomiendas? ¿Lo explicas en algún otro post?

Muchas gracias, y realmente admiro mucho tu gran dedicación por evacuar las dudas que te efectúan.
Graciass....

Rosa

Ammonio No entiendo que quieres lograr...:o

El nieto

Hola!

El blog está muy bien, enhorabuena!

He utilizado este truco pero me pasa una cosa rara, la caja nueva que me aparece para albergar el nuevo widget está cortada por abajo, es decir, no tiene las esquinas redondeadas por la parte de abajo. Sabes cómo lo puedo arreglar?

Muchas gracias por adelantado!

Rosa

El nieto No se que ha pasado, pero lo único que hacemos con esto es copiar el que ya hay, con lo que si los que tenías estaban bien, el nuevo a de estarlo también, suponiendo que todo lo hayas hecho correcto...

Zenix

Hola, quisiera saber si me podrías ayudar, tengo una plantilla Inove y quisiera que los post quedaran separados como en esta otra Mobipress pero no se como hacer eso :s please ayudame!!!!

Rosa

Zenix No es una plantilla original de Blogger... con estás ya tengo demasiado trabajo y no puedo dedicarme a las que no lo son, pues sería demasiado el tiempo a emplear. Lo siento.

Zenix

Rosa Listo problema solucionado, ya me familiarice con las estructuras que se utilizan en las plantillas para blogger, te agradezco por haberme contestado, publique esto en otro sitio y ni siquiera me contestaron simplemente borraron el comentario y ya :s Gracias de todas formas :$

Publicar un comentario en la entrada

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

Los comentarios están siendo moderados.

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