Blogger con ancho variable

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.