JMiur [E]

Si alguien leyó mi post 224 pixeles más sabrá que el cambio de resolución de la pantalla de mi monitor me había perturbado un poco. DeLarge2001 tenía razón, ya me aburguesé y no entiendo cómo no lo hice antes. Él quiere más pero yo soy un cobarde.

Lo que más me molestaba de la nueva resolución era que, al ver mi blog, el diseño había dejado de gustarme, sobraba demasiado espacio a los lados y la letra me parecía demasiado pequeña. Mis dudas eran simples, ¿debería ensancharlo?, ¿qué pasaría con los que tuvieran menor resolución? Es cierto que hago esto porque me gusta y no para que le guste a los demás pero también es cierto que parte del placer es que le guste o les interese a otros. El juego es más divertido.

Tal vez, hilaba demasiado fino ya que a mi, personalmente, me molestan las barras de desplazamiento horizontal, es un prejuicio, una manía, una tara infantil ¿Y entonces qué?

Se necesitaron 24 horas, los comentarios de un par de lectores amigos, buscar en mi lista de marcadores algo que había guardado hace un tiempo y mucha, mucha suerte, pero aquí está resuelto algo que me tenía molesto. Lo que dijo Daniel me dio la clave. Él hablaba de "accesibilidad desde cualquier plataforma", "paginas elásticas, cuyas dimensiones se adaptan a la anchura de la pantalla", "porcentajes", "programación dinámica", "php". Ahí estaba la respuesta que faltaba.

Sumé sus dichos a una rutina script que un tiempo atrás había marcado como interesante pero que aún no había probado y voilá. El resultado son dos semi-botones en la sidebar, uno dice 800x600 (la resolución standard), el otro dice 1024x768 (la resolución nueva), haciendo click en cualquiera de ellos, el diseño el blog cambia, ensanchándose o angostándose un poco, permutando de uno a otro tamaño en forma dinámica, sin necesidad de recargar la página. Como casi regalo caído del cielo, el script utiliza unas cookies que conservan el último estado por lo que, la próxima vez que se abre, lo hace con la última resolución utilizada.

Hasta donde pude probarlo, anda perfectamente tanto en Firefox como en Internet Explorer (no sé con la versión 7 pero supongo que también). Ruego encarecidamente que, si alguien tiene algún problema, me lo haga saber, se aceptan insultos moderados y sugerencias de cualquier tipo.

Dynamic Drive es una página que siempre consulto porque tiene ejemplo e ideas interesantes, allí fuí cuando leí en purplemoggy sobre un script que permitía cambiar el estilo de Blogger Beta (o de cualquier página web) de manera dinámica. Me encontré entonces con Style Sheet Switcher, una rutina bastante simple, de esas que no hay que entender cómo funcionan sino sólo para qué sirven.

Lo primero es bajar el archivo styleswitch.js y subirlo a la web, esto puede no ser sencillo si no se tiene un servidor pero en otro post voy a explicar una alternativa al alcance de cualquiera, Google Page Creator.

El segundo paso es copiar de la plantilla, los códigos de estilo que definen el layout del blog (las grandes divisiones) pero sólo aquellos que estén definidos con valores (width:nnpx). En términos generales son:
body
#outer-wrapper
#header-wrapper
#main-wrapper
#sidebar-wrapper
#footer
#footer-wrapper
y cualquier otro que deseemos que cambie cuando se modifique el ancho (en mi caso, el tamaño del font de los posts).

Los pegamos con el block de notas, los guardamos con cualquier nombre con la extensión CSS y los eliminamos de la plantilla. Luego creamos otro archivo CSS igual al anterior pero con los nuevos valores, generalmente, basta modificar la propiedad width pero, en ciertos casos, deberán modificarse otras cosas. Lamento no poder ser más claro, dependerá de cada plantilla. La mejor forma es probar en la parte de Diseño, modificar las propiedades y utilizar la Vista Previa, de esta manera, la plantilla original queda intacta. También es recomendable guardarla antes para evitar desastres impensados.

Bien. Se supone que ahora tenemos tres archivos, STYLESWITCH.JS y, por ejemplo, ANGOSTO.CSS y ANCHO.CSS. Vamos a la plantilla y, después del tag </b:skin>, agregamos el siguiente código:

<link href='URL_ANGOSTO.CSS' media='screen' rel='stylesheet' type='text/css' title="ANGOSTO" />
<link href='URL_ANCHO.CSS' media='screen' rel='alternate stylesheet' type='text/css' title="ANCHO" />
<!--Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com) -->
<script src='URL_styleswitch.js' type='text/javascript'>
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

Hasta acá, si guardamos y cargamos el blog, no deberíamos ver ningún error y ninguna diferencia. Nos faltan colocar las instrucciones para poder permutar. Para esto, en cualquier elemento HTML o en uno nuevo, no importa donde, deberemos poner esto:

<a href="javascript:chooseStyle('ANGOSTO', 365)">Tamaño normal</a>
<a href="javascript:chooseStyle('ANCHO', 365)">Tamaño modificado</a>
<p><noscript>ADVERTENCIA: Javascript deshabilitado.</noscript></p>

Donde ANGOSTO y ANCHO son los título (title) de los tags LINK que pusimos previamente y 365 es el tiempo de vigencia de las cookies (cualquier valor). Por supuesto, el formato de los vínculos y los textos son los que cada uno quiera.

Listo. Si guardamos y recargamos el blog, se mostrará tal como era. Si hacemos click en los vínculos anterior, permutará de uno a otro tamaño en forma dinámica en forma instantánea. Si hacemos click dos veces en el mismo, no hará nada ni se provocará ningún error.

Yo sólo estoy usando el script para modificar su ancho pero es lo suficientemente funcional como para permitir cualquier clase de cambio y no sólo dos, sino la cantidad que uno quiera. Sólo hay que crear tantos archivos CSS como se quiera y agregar tantos tags LINK como archivos tengamos. Incluso, admite la posibilidad e hacer cambios de manera aleatoria.

Creo que eso es todo. Si tienen alguna duda, pueden consultar. Me parece que cosas así abren muchas posibilidades y sería bueno que las fueran explorando. Yo, quedé agotado.

80 comentarios:

Daniel  

Oye! esto es una pasada! en IE7 rueda bien el invento. Felicidades.

Responder
JMiur  

Gracias, esa era justo la prueba que me faltaba. Se suponía que no iba a tener problemas pero con IE nunca se sabe.

PD: la idea me la dio tu comentario, así que, cualquiera que se queje, te lo mando para Castellón :-)

Responder
rasa  

Perfecto en el mejor navegador Internet Explorer 7 logico!!!
Particularmente me gusta mas como se ve en 800x600 pero me parece que se debe más a una costumbre que a otra cosa.

Responder
JMiur  

Che, ¿cuánto te está pagando Billy por la promoción? En fin, si hay guita, por ahí me prendo en el curro, mi moral es bastante flexible. No me dejes afuera.

Lo del tamaño lo entiendo, a mi me pasó lo mismo pero exactamente al revés. El hombre es un animal de costumbres. La idea era esa, que cada uno pudiera verlo como más le guste. Si funciona, el laburo valió la pena.

Responder
Fede  

Simplemente una cosa: Te envidio. xD

Coincido con el Rasa, creo que se ve mejor en 800x600, pero seguro que es debido a la costumbre. Además que veo que en 1024x768 las letras se ven un poco grandes (sigue siendo costumbre, creo)

Me vas a tener que pasar ese trucoo..xD

Responder
JMiur  

Si, es verdad, sólo es una cuestión de costumbre y de gustos. En mi caso, casi me da un ataque cuando lo vi todo "chiquitito". Todo es muy subjetivo. Por suerte, sino, sería muy aburrido.

La idea era que me gustara a mi pero que cada uno pudiera decidir por su cuenta. Además, se podía demostrar que las plantillas de Blogger son bastante más flexibles de lo que parecen y que los códigos de estilo son una herramienta impresionante.

El "truco" está explicado hasta donde pude porque depende mucho de cada plantilla. Si te interesa usarlo mandame un email y vemos qué se puede hacer. Lo mismo vale para cualquier otra duda que tengas, lo peor que puede pasar es que no sepa :-)

Responder
Black_mystery  

HOLA
VOY AL GRANO DI INMEDIATO
LO KE PASA ES KE EN ESTE POST EXPLICAS TODO PARA LA PLANTILA/S
DEL MODO EN BETA OSEA CON TODO ESO DE #outer-wrapper/#footer-wrappery
Y TODAS ESAS COSA KE SIN METIRTE NO ENTIENDO PARA NADA(DISCUKLPA MI IGNORANCIA)Y A MI ME GUSTARIA SABER COMO HACER ESTO MISMO KE KON TANTO AFAN EXPLICAS PERO CON LA PLATILLA EN HTML SOLAMENTE Y NO EN ESAS PLATILLAS KE TRAE AHORA ENL BLOGGER (VALE EXPLICAR KE YO OCUPABA EL BLOGGER ANTIGUO CON LA MALA SUERTE DE KE ME CAMBIE AL BETA JUSTO UN SEMAN ANTES DE KE EL BLOGGER CLASICO DE MEJORARA) ESO ES MALA SUERTE ,POR LO TANTO MIS PLATILLAS QUEDARON = NO CAMBIARON EN NADA POR ESO TE PREGUNTO SI PUEDES HACERME EL FAVOR DE EXPLICAR COMO HACER TODOS ESTOS CAMBIOS ...
DESDE YA TE AGRDESCO TODA TU AYUDA (KE ESTOY SEGURO ME SERA MUY UTIL)

BLACK_MYSTERY

Responder
JMiur  

1. Las plantillas de Blogger no son HTML puro, nunca lo fueron, usan códigos especiales. La estructura de las "viejas" y las "nuevas" es la misma. Tienen un HEADER, definiciones CSS y un BODY con grandes sectores, cada uno identificado con un nombre (el header, el área de posts, el o las sidebars, el pie de página, etc) eso es lo que, genéricamente, se llama LAYOUTS.

2. Las diferencias entre Blogger y Blogger Beta no tienen nada que ver con la técnica descripta. Esta es válida para cualquier página web que use layouts (Blogger los usaba antes y los usa ahora).

3. #outer-wrapper, #footer-wrapper o cualquier otra cosa parecida son "nombres" (la propiedad ID de un tag DIV, o sea, de uno de esos sectores). En mi plantilla "antigua" tenía nombres como #alpha, #banner y cosas así.

4. Hasta donde pude ver en uno de tus blogs, los anchos están definidos dentro de las definiciones de estilo, en el HEAD y comienzan con:
/*----- LAYOUT ----- */
por ejemplo #container dice que el ancho es 700, #menu_left = 122, login_box = 122, #head = 540, #content = 540, #content_footer = 540, etc, etc.

5. Necesitas tener 2 modelos, uno para ANGOSTO y otro para ANCHO, el primero, es el que ya existe. Para el segundo, sólo hay una posibilidad, elegir el que más te guste.

6. Una vez identificados los sectores (todo lo que tenga la propiedad width puede ser un sector), hay que probar usando VISTA PREVIA. Cambiar un valor, ver que pasa, anotar el dato, probar otro, hasta encontrar lo que nos gusta. Todo esto, sin guardar la plantilla, sólo previsualizándola. Una vez definidos esos "nuevos anchos", el proceso es el mismo que cuento en el post.

Lo que describo no puede "copiarse y pegarse", es una técnica, algo aplicable en general pero los detalles son distintos para cada plantilla y para cada usuario.

Si, encuentras inconvenientes o te trabas en algún punto, puedes comunicarte por mail y veremos la forma de resolver el problema.

Responder
Aiguamel  

Gracias por tus explicaciones.
Tengo un problema similar al tuyo, al cambiarme la pantalla.
Por eso tengo abiertos dos blogs, en uno con mi antiguo diseño y el otro con un diseño que encontré que se adapta a la pantalla de ordenador que estés,
(diarioemocional1.blogspot.com), SIN HACER NINGÚN CAMBIO,ni tener ningún botón, pero no sé como lo consigue.
De todas formas muchas gracias por la información.

Responder
JMiur  

Aiguamel: el criterio que se usa en tu plantilla es diferente y entre comillas, más sencillo, lamentablemente, haber usado ese hubiera significado modificar demasiadas cosas de las mia y, la verdad, no estaba con ánimo para semejante aventura :)

Por si te interesa, te doy una idea general. En vez de utilizar anchos fijos, cada bloque está dimensionado como un porcentaje donde 100% es el ancho de la pantalla. De esta manera, los objetos se agrandan o achican según el visitante.

Como toda técnica, tiene sus pro y sus contras.

Responder
ynometoques  

Bueno... no es esto justo lo que agregaré a mi blog pero quería avisar que a vos y un par mas de udes los busqué bastante por allí ya que sus trucos son mas que ayuda. Espero sigan estando por aquí y conozcanme como "ynometoques". Ah, aviso que yo no ayudo a nadie, solo tengo mi humilde blog ynometoques.blogspot.com con cosas de aqui y de allá. Tomo solo lo que me es útil para él. Gracias desde ya.

Responder
JMiur  

Gracias, ynometoques, espero que, como decís, tu blog "aporte a tu salud emocional", por lo menos este, lo ha hecho con la mia :-)

Responder
Claudia  

Hola... Buenisima tu pagina... Este post donde comentas como cambiar el ancho del blog era la solucion que estaba buscando hace rato... pero antes de detonar mi blog, quisiera saber con mas precision como hacerlo sin perder la cordura en el intento...
Mi blog www.simplemindsargentina.blogspot tiene esta plantilla ----------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
---------------------------------
Ahora bien, la pregunta del millon es si me podes ayudar a acomodarla en ancho y letra como esta tu blog... Ultimamente hice unos "cambios" y tengo como resultado que cuando abro un post en otra pagina el slidebar queda debajo del post... Cosa rara, no?... y no me gusta...
Espero tu respuesta y nuevamente "Genial tu blog"...
Besos
Claudia

Responder
JMiur  

Claudia, enviame un mail y vemos en que puedo ayudarte. vagabundia@gmail.com

Por lo que estuve viendo, tu blog está bien armado aunque aparecen algunas cosas extrañas. Seguramente usás Internet Explorer para navegar y, tal como decís, la sidebar se mueve al abrir una página individual, lo más probable es que eso ocurra porque se supera el ancho total, por ejemplo colocaste unos vídeos de 350 pixeles de ancho pero la sidebar tiene 250 pixeles.

Todos esos son detalles que podemos ver a través del correo.

Saludos.

Responder
alanising  

hola!!! Tengo una preguntota! Me he partido ya la cabeza intentando meterle los accesorios que tenía en blogger normal, a blogger beta. Pero no puedo. No puedo hacerlo en código html y en "añadir elementos" no quedan centrados, ni se ven completos. ¿Me podrías ayudar, por favor? Muchas gracias de antemano!

Responder
JMiur  

Sí, no hay problema, deberían funcionar correctamente.

En principio, van en un elemento HTML y si los quieres centrar, colocalos dentro de un boque centrado, por ejemplo:

<div align="center">
....... el código .......
</div">

De cualquier manera, puedes enviarme un mail a vagabundia@gmail.com para ver los detalles porque, seguramente, todos son diferentes y tal vez requieran algún retoque extra.

Responder
andres  

hola no se si mi pregunta ya fue respondida o es muy tonta, pero te pido ayuda conla edicion de mi plantilla, lo que deseo hacer es colocar un semi boton en los titulos de la sidebar, asi como lo tienes tú., desde ya muchas gracias

Responder
JMiur  

Andrés: voy a tratar de escribirlo aquí pero, si no te queda claro, envíame un mail.

Primero que nada, cree una clase en la parte de estilo de la plantilla, en este caso:

boxtitulo {
background-color: #402020;
font-size: 1.2em;
margin: 0pt;
padding: 5px 10px;
text-align: center;
}

Luego, donde quiero que aparezca ese pseudo-botón:

<span class="boxtitulo"
onmouseout="this.style.backgroundColor='#402020'"
onmouseover="this.style.backgroundColor='#484848'">
<a href="URL">TEXTO</a>
</span>

donde #402020 y #484848 son los colores del botón en estado normal y cuando se pasa el mouse encima.

Responder
Gem@  

En el foro preguntaban sobre esta explicación, les mandé a esta entrada :$
Tengo que reconocer que aplicar esto en mi blog es una asignatura que tengo pendiente, el tiempo que requiere dedicar es algo que me da pereza, pero lo encuentro de mucha utilidad.

Responder
JMiur  

No te creas que es muy difícil, Gem@. Cualquier cosa, cuando te decidas, me envias un mail lo vemos.

En el caso particular de tu blog no parece haber complicaciones, se hace más complejo cuando los fondos son imágenes :)

Responder
Fernando Diaz  

El archivo que tiene uno que bajar primero.
En que parte del HTNL se pone?

Responder
JMiur  

Vamos a la plantilla y, después del tag </b:skin>, agregamos el siguiente código ..... etc.

Tanto styleswitch.js como los dos archivos CSS van ahí.

Responder
Fernando Diaz  

creo que no me explique bien el archivo styleswitch.js donde se pone?
despues los 2 codigos siguientes se ponen en despues de b:skin>

Responder
JMiur  

OK ahora está claro :)

Para alojar archivos de este tipo (o cualquier otro), lo más sencillo es GooglePages. Hay un post con un tutorial paso a paso y es muy sencillo: AQUI

Responder
Fernando Diaz  

Okay, ya subi el archivo en Google Page Cretaor despues que hago?

Responder
Fernando Diaz  

No tengo ni ideoa de como usar poner esto en Blogger, ni menos para que sirve el Google Page creator

Responder
JMiur  

Pués, de ahí en adelante debes seguir los pasos que explica el artículo. Ver cuñales son las propiedades que usa tu plantilla para establecer los anchos, crear dos archivos CSS y subirlos, colocar el script y los archivos, etc.

Responder
Ivan Alejandro  

Hola, me hice un blog hace poco y la tu articulo me encamino hacia lo que buscaba.
La verdad muy completo. Gracias

De todas maneras preferí hacerlo de otra manera que me resulto mas sencilla y se adecuaba mas a lo que quería.

Hice un post en mi blog con el procedimiento para hacer dinámico el ancho, también nombre tu blog como fuente (espero que no te moleste)... Te invito a pasar por él y si no te agrada saco el link cuanto antes.

Saludos

http://IvanAlejandro0.blogspot.com

Responder
JMiur  

Gracias, Ivan, acabo de verlo. No me molesta en absoluto, es un honor.

Tu procedimiento es correcto y es usado habitualmente. Personalmente, opté por no hacerlo así porque definir sectores mediante porcentajes no me permite controlar los anchos de las cosas y ese es un punto fundamental cuando se trata de mostrar scripts o códigos como en mi caso pero es un procedimiento válido y más sencillo de manejar.

Saludos.

Responder
BlogK  

Hola soy nuevo en esto y quiciera que me des una manito... estoy interezado en cambiar en ancho de mi pagina puesto que cuando entro a un cibert cafe.. siempre.. casi siempre veo que la configuracion de los monitosres son de: 800x600px, y estoy creando una pagina que aun esta en proyecto.. pero desde ya quiciera incorporar esta gran variabilidad que estado buscando.
Sé que este post ya tiene tiempo y he estado buscando en otros lugares que me den mas explicacion al respecto.. pero siempre vuelvo aqui... jijiji y ya es hora que te aga preguntas, porque en sí ya estoy fastidiado :( y es algo que no me cabe a la cabeza. mira mi interrogante es esta:

¿que es lo que extactamente debo copiar al wordpad de mi plantilla, si te entiendo cuando dices.
#outer-wrapper, #header-wrapper, #main-wrapper, #sidebar-wrapper, #footer-wrapper. pero extactamente que parte de ellos, no fuiste muy explicativo en ello, porfavor explicate, te doy un ejemplo de mi duda.. cuando miro mi template y me ubico en los layout veo esto:
----------------------------
#content-wrapper {
width:980px;
overflow:auto;
margin:15px auto;
}


#main-wrapper {
width:515px;
float:left;
}

#sidebar-wrapper {
width:455px;
float:left;
margin-left:10px;
}
--------------------------
dices que debemos copiar solo el width de cada parte de la pagina.
¿reconocera solo si copiamos eso? ¿que extension mas debemos copiar?

serias muyyy amable en darme un explicacionnn...

Responder
JMiur  

Es exactamente así, basta copiar el nuevo valor de width, los otros se mantendrán Por ejemplo, si este fuera el CSS original:

#content-wrapper {
width:980px;
overflow:auto;
margin:15px auto;
}


y por medio de un script o como sea, cambiamos sólo una parte:

#content-wrapper {
width:800px;
}


Lo único que cambiará será el ancho, las demás propiedades permanecerán invariables.

¿Cuales son los bloques a cambiar? eso dependerá de la plantilla pero sean los que sean, sólo es necesario modificar width y, eventualmente, las imágenes que se utilicen como fondos.

Responder
hernaaan  

Hola, te escribo medio rápido porque me estoy durmiendo...

El tema en cuestión es que cambié el ancho de mi plantilla y se desajustó el diseño de configuración de Blogger para los elementos. Es la solapa de "Elementos de página". Hoy por hoy sobrepasa el ancho de la ventana, y la vista es similar a un overflow. O sea, tengo la barra de desplazamiento en la parte inferior, que me permite ver el resto.

Mi plantilla inicial era Stretch Denim, y la fui modificando viendo la Denim común, solamente que de ancho total elegí 975px (Denim creo que tiene 740).

En un principio creí que era esta parte de código:

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
width: 975px;
margin-left: 0;
margin-right: 0;
}

pero sigue igual, aunque ya lo haya cambiado. Si mal no recuerdo, también la saqué de la plantilla Denim. Revisando, creo haber encontrado todas las diferencias entre la Stretch y la original, pero el problema sigue.

Cualquier ayuda se agradece! Ya se que a la vista no tiene incidencia, pero es para estar un poco mas cómodo a la hora de editar... Gracias de nuevo.

Responder
JMiur  

Si, ese es un problema común y muy complicado de resolver porque Blogger usa iframes que son difíciles o imposibles de manejar.

Vas a tener que seguir probando en el mismo lugar

body#layout #header

porque eso es lo que lo controla aunque hay propidades a las que no puedes acceder y, por lo tanto, el resultado no es demasiado bueno.

Responder
Malchidael (seudonimo)  

oye gracias por tu ayuda.. disculpa que me demore en replicarte porque estaba ocupado y no tiempo iempo de hacer areglar mas mi pagina pero lo que tu me diste si me ayudo y seguire avanzando en verano mi proyecto espero siga consultando tus post.. que son muy bueno utiles..
cuidate nos vemos

Responder
JMiur  

Ya ni recordaba ESTE POST pero ahí, tal vez haya algún dato más.

Responder
Paulara  

Hola!
Sé que este post es bastante antiguo, pero esto es justo lo que he buscado por bastante tiempo.

El problema que tengo, supongo que se debe al tiempo que ha pasado, es que el archivo styleswitch.js parece que ya no está disponible en el link que diste, podrias ayudarme con esto por favor?

Muchas gracias por hacer este blog, hace un tiempo que lo conocí y me gusta mucho. ^_^

Responder
JMiur  

Paulara:

Acabo de verificar el enlace y no parece haber problemas: AQUI

De cualquier manera, si sigues teniendo problemas para acceder, envíame un mail y te adjunto una copia:
vagabundia@gmail.com

Responder
leonardo manjarres  

hola jmiur, soy novato en esto de los blog, ayer precisamente cree mi primer blog y estoy investigando la forma de cambiar la apariencia del mio. lo que te quiero preguntar en como colocaste ese menu horizontal debajo del titulo de tu blog. si me quieres ayudar porfavor escribeme a leomanca_82@hotmail.com te lo agradeceria mucho de todo corazon... bye.. ha y te felicito por tu blog, me gusto mucho.

Responder
JMiur  

Ya te he respondio por mail como querías. De cualquier manera, la explicación de eso está AQUÍ.

Responder
leonardo manjarres  

que pena molestarlo tanto jmiur, pero en que parte pongo este codigo que me pasaste, osea, lo puedo colocar en cualquier parte del codigo html de mi blog o es necesario colocarlo en algun lugar especifico..... gracias por ayudar a la comunidad y hasta pronto

Responder
JMiur  

Fíjate en el post de referencia. Puedes ponerlo, como dice allí, dentro del header o bien, en tu caso, parece haber un sector especial, que en este momento no contiene nada y que está debajo del header:

<div id="crosscol-wrapper" style="text-align: center;">
<div id="crosscol" class="crosscol section"/>
</div>

Puedes colocar el HTML allí:

<div id="crosscol-wrapper" style="text-align: center;">
<div id="crosscol" class="crosscol section">

AQUI

</div>
</div>

Y las propiedades CSS van, por ejemplo, antes de </head>

<style type="text/css">
PROPIEDADES
</style>

No tiene importancia el aspecto final, eso, se corrige y adapta. Si logras que se vea, aunque sea mal, luego puedo decirte cómo personalizarlo.

Responder
solrac  

Hola JM.

este es un pequeño 'bump' a este post, el motivo es que he estado navegando por la red y he visto este post Style Sheets By Resolution, es un hack para hacer que se cargue automáticamente un CSS u otro según la resolución de la pantalla que se tenga.

Responder
JMiur  

Por lo que veo, la idea es correcta. Puede leerse la resolución de la pantalla y, en base a eso, cargar diferentes archivos CSS con la precausión de tener siempre alguno general porque, por un lado, hay muchas variantes y por otro, hay navegadores que no tienen JavaScript habilitado.

En definitiva, sí, es una forma de utilizar esto de una manera más automática.

Responder
HaCk CrAcK  

No me dirias como agregar el boton buscar, pero en el banner? t como hago que el banner ocupe todo el ancho de la pagina?y si no es mucha molestia como hacer este windget de comentarios, ya que el que viene predefinido es medio feucho

Responder
JMiur  

Para contestar alguna de esas cosas debería saber a que blog te refieres o donde está el botón que quieres mover.

Lo de los comentarios está en este post. Es probable que para ciertos detalles gráficos sea necesario modificar el script.

Responder
HaCk CrAcK  

Ok, muchas gracias por responder tan rapido!
Entonces pondre mis consultas en donde me dijiste

Responder
GrupoMistral  

Hola, quiero saber como se puede usar los lados del blog, la informacion queda centrada pero estimo se pierde espacio y se hace muy larga la imagen, quisiera usar los lados poir ejemplo para links o propagandas..que debo hacer?

Agradecido

Jorge Villalobos.

Responder
JMiur  

Eso no es demasiado difícil pero excede un poco las posibilidades de responder en un comentario; sobre todo, porque cada plantilla es levemente distinta.

Por lo que veo, en tu caso, como no hay imágenes de fondo, podría hacerse ¿por qué no me envías un mail y vemos si puedo guiarte?

Responder
Tincho  

JMiur, como se que sabes tanto! te molesto con algo..estoy armando un blog(Recien empece, vas a ver que tengo muy poco:(..Bueno el problema es que quisiera saber como hago para achicar la diferencia que hay entre post y post..? en definitiva entre foto y foto de ambos lado...veras que tanto en vertica(post a post) o horizontal(foto a foto) hay una diferencia que no quiero tener. parece tonto pero es bastante importante...
Otra consulta es como agrando el ancho de los post..NO de la pagina, sino de los post, ya que en la entrada principal quisiera que se vean 3 imagenes de cada cosa pero cuando coloco la tercera...se me va para abajo..como en la seccion audio.. GRACIAS SI ME CONTESTAS..Y DISCULPA POR ROMPERTE...

Responder
Tincho  

ahhh!!!la mi pagina es www.aportexaporte.com.ar

Responder
JMiur  

Tincho:

No estoy seguro de la primera pregunta, si te referís a la separación entre entradas, eso lo podés modificar buscando esto:

.post {
margin:0.5em 0 1.5em;
padding-bottom:1.5em;
}

Eso en negrita, es la separación hacia abajo. Usá un valor más bajo o directamente poné 0 y luego probás hasta encontrar la seapración que te guste.

Lo del ancho, sin aumentar el ancho total, sólo es posible resolverlo achicando las sidebars o bien achivando el margen entre los posts y la sidebar.

Por ejemplo:

#contentleft {
float:left;
margin:0;
overflow:hidden;
padding:0 30px 20px 0;
width:500px;
}

Podés poner:

padding:0 10px 20px 0;
width:520px;


Y en Firefox etraría una tercera imagen pero, convendría que lo chequearas en IE.

La idea es, para que no se vaya todo para abajo, aumentás el ancho y se lo descontás al margen así, el total que es la suma de ambos, sigue siendo el mismo.

Responder
Tincho  

Ahora si, gracias.. con respecto a la primera pregunta(que no la redacte bien) es... si te fijas ahora(hice lo que me dijiste) entro la tercera imagen.
Ahora bien..la diferencia que hay entre imagen e imagen dentro del post, esa no la puedo modificar,ya que por mas que pegue las tres imagenes, cuando publico la entrada me pone esa diferencia de 1cm automaticamente. O sea me muestra una cosa en la edicion del post y me publica otra, es como que esta configurado en el HTML para que este esa diferencia tanto de arriba como de abajo como de los costados..bueno espero haberlo explicado bien..

Responder
JMiur  

Creo que si, veremos :D

Nunca te guies pro la Vista Previa de los post, eso, casi es un chiste de Blogger, no sirve de nada :D

En el CSS de la plantilla, las imágenes tienen márgenes po defecto y esos son los que tenés que cambiar. Por l oque veo, Está en dos partes:

#content p img {
border:medium none;
float:left;
margin:0 10px 10px 0;
}
se separa 10 pixeles a la derecha y abajo

.post img {
padding:4px;
}
se separa 4 pixeles alrededor.

Podés, modificar eso para toda la plantilla o, si querés hacerlo sólo en algunos casos, le agregás el estilo a la imagen:

<img style="margin:0;padding:0; ............

o los valores que quieras. Eso depende mucho de cómo sean tus entradas, siempre es más cómodo definirlo en la plantilla, claro, pero, afecta a todas.

Responder
Tincho  

y me volviste a sorprender una vez mas! voy a hacer una seccion en mi pagina de recomendaciones..y va a estar Vagabundia se cabeza..gracias te felicito...bueno chau se me hace tarde!! me voy a ver el Rally Dakar que pasa a 40 km de aca!..espero poder verlo...saludos

Responder
JMiur  

Jajajaja. Saludos, Tincho; me alegro que sirviera :D

Responder
l3utterfish  

y para blogger viejo (old blogger) alguien me podria dar alguna pista?

Responder
JMiur  

En principio, la idea es la misma pero, cambian los nombres de los diferentes DIVs.

En http://trucoshtcdiamond.blogspot.com/ outer-wrapper se llama page, main-wrapper se llama primary y sidebar-wrapper se llama secondary.

Responder
Raul  

¿Hay algún modo de poner el CSS y el script en la plantilla directamente, sin alojar el archivo en ningún sitio?

Responder
JMiur  

El script en la plantilla, si. El CSS alterno no.

Responder
Raul  

Gracias JMiur

Responder
Raul  

Ahora tengo otro problema, al poner el script en la plantilla, me da un error:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The entity name must immediately follow the '&' in the entity reference.

Responder
JMiur  

Si estás copiando enl contenido del script directamente en la plantilla, debes usar CDATA y verificar que funcione. Sino, debes usar una rchivo externo.

Responder
Raul  

Gracias JMiur, usando CDATA no me da Error ¿sabes de algún lugar donde subir CSS?

Responder
JMiur  

Tal Vez Google Sites pero no lo he probado.

Responder
Raul  

Gracias JMiur

Responder
Raul  

Los he subido a Google Sites y no funciona ¿algún otro sitio donde subirlos?

Responder
JMiur  

No. No conozco ninguno. Deberías probar cambiándole la extensión.

Responder
Raul  

Lo intenté subiendo con la extensión .css y como .txt pero no me funciona, cuando voy a ver el archivo empieza a descargarmelo y en SkyDrive se ve bien, pero el problema es que SkyDrive cambia la URL

Responder
JMiur  

Ya lo probé. En Google Sites funcionan perfectamente:

<link href='https://sites.google.com/site/vagabundia/Home/demo.css?attredirects=0'
media='screen' rel='stylesheet' type='text/css'/>

Responder
Raul  

Es que yo había quitado ?attredirects=0, de todos modos, no me cambia el estilo al hacer clic en la imagen, tal vez puse el codigo mal o algo, mi blog es http://laplataformaazul.blogspot.com

Responder
Raul  

Hola, ahora he subido ambos CSS a Fileden, parece que están bien como en SkyDrive y Fileden no cambia la URL, así que todo perfecto, pero el script no funciona, ¿por que no funciona?

Responder
JMiur  

Para mi, el CSS subido a Fileden nunca funcionó sin embargo, el error hasta ahí es que está mal escrito CDATA:
//<![CDATA[
//]]>

Responder
Raul  

Gracias JMiur, ahora funciona perfectamente, de momento, espero que siga así

Responder
Borest  

Hola Jmiur, en este blog: http://borest-borest-net.blogspot.com/ instale una plantilla, pero cuando vi como estab la verdad que no mem gusto para nada, mira tengo una pantalla de 1024x600px, cuando entraba a ver el blog, en la parte de abajo veia una barra para desplazarme a la derecha para ver otra parte del blog que faltaba, (creo yo esta muy ancho) y pues quisiera saber como puedo arreglar eso para que al entrar solo vea el blog sin ninguna barra para desplazarme en el navegador para ver el resto del blog. Saludos.

Responder
JMiur  

Borest:
Si ocurría eso es que el ancho era excesivo. Más detalles no puedo darte porque debería verlo online.

El ancho es width pero tambien padding, margin y border; en IE hay que preveer que el navegador tiene un borde y eso resta espacio de los 1024. Entre 1000 y 1010 pixeles es un valor máximo aceptable.

No sólo son los DIVs contenedores los que definen el ancho; también el contenido puede afectarlos pero, depende de las propiedades CSS de la plantilla.

Responder
Borest  

Pues no entiendo mucho del codigo, pero me supongo que debe de ser eso, ya lo probe en IE8 y se ve sin la barra, solo en firefox y chrome se ve eso. Saludos.

Responder
Peter  

Hola jmiur, este codigo funciona también para ajustar el ancho del blog de las plantillas nuevas a la resolucion de la pantalla?, traté de implementarlo pero no puede...

JMiur  

Lo desconozco. No uso esas plantillas ni pienso usarlas jamas :D

Responder
Higaku  

hola :) disculpa, tengo una pregunta, es que tengo en mi blog botones flotantes a los lados de mi blog, pero el blog esta muy extendido y no deja espacios alrededor, entonces los botones se sobreponen con las sidebar, sabes como puedo hacer para espaciar los lados??

JMiur  

No sé a qué blog haces referencia, debería verlo. La resolución de pantalla con qie lo veas, también tiene mucho tiene que ver con eso.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR