JMiur [E]

Este script que puede encontrarse en White Hat puede ser un complemento al truco que muestra Gem@ y que nos da la posibilidad de  cambiar el color del blog con un solo click, utilizando hojas de estilos diferentes, una técnica similar a la que se emplea en Blogger con ancho variable.

Lo que este nos permite es aumentar o disminuir el tamaño de las fuentes de los textos del blog lo que puede ser de utilidad para lectores con problemas visuales si es que utilizamos fuentes pequeñas.

Hasta aquí suena interesante pero tiene algunas limitaciones, por ejemplo, cambia las fuentes de los textos siempre que estén incluidos dentro de la etiqueta P pero, si usamos DIVs, deberemos modificar el código:

getElementsByTagName('p');

por:

getElementsByTagName('div');

La segunda limitación importante es que las fuentes deben estar definidas en pixeles (px) y no como unidades ralativas (em) aunque esto también puede modificarse.

Para usarlo, lo incluimos antes de script en la plantilla, antes de </head> y luego, agregamos dos simples enlaces:
<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>


<script v type="text/javascript">
var min=8;
var max=18;

function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i&lt;p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}

function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i&lt;p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}   
}
</script>

Mucho más flexible es el script que se encuentra en DynamicDrive ya que podemos definir las etiquetas que serán afectas y además, funciona con etiquetas depreciadas cono FONT.

El script lo descargamos de la página y luego lo agregamos a la plantilla, también antes de </head>:
<script type="text/javascript">
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return
var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz &lt; 0) sz=0;
if (sz &gt; 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i &lt; tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>
o lo subimos y alojamos en un servidor propio:
<script type="text/javascript" src="URL_textsizer.js"></script>
Modificando la primera instrucción del script, podemos agregar o quitar las etiquetas que serán afectadas:

var tgs=new Array('div','td','tr');

var tgs=new Array('div','p','td');

y luego, ponemos los enlaces donde nos guste:
<a href="javascript:ts('body',1)"> AUMENTAR </a>
<a href="javascript:ts('body',-1)"> DISMINUIR </a>

Alli también podemos hacer algunos cambios.

En el ejemplo anterior utilizamos body es decir, le indicamos que cambie TODA la página pero, podríamos indicarle que sólo lo haga con una parte o con un sector específico, indicando el ID correspondiente:

cambiarFuente('nombre',1)

29 comentarios:

Marcos Horro Varela  

Hola JMiur , ¡te pasaba para saludar!

También quería si pudieras , la opinión personal tuya sobre el diseño de mi nuevo blog... Te lo agradezco ^^

Saludos

Responder
Gem@  

Fantástico, lo vi hace tiempo en algún blog implementado y ha resultado más sencillo de lo que pensaba ;) me llevé los iconos de las letras espero no te moleste ;)

Responder
JMiur  

Markos:
Un saludo y buen cambio. Todo se ve en orden. Me gusta el cambio :)

Gem@:
Es verdad, es muy sencillo de hacer. Los íconos los debo haber hurtado de alguna parte así que no hay problema ;)

Responder
Emerald  

Hola jmiur!mi pregunta no tiene nada que ver con este post,disculpa! Pero tengo un problema(cuando no!) y recurro a vos.Uso Firefox desde hace mucho y diseño mi blog según este navegador, pero hoy al querer verlo con IE, me doy cuenta que la configuración no es la misma, la sidebar me aparece bajo los post! esto se podra solucionar? Gracias y saludos jmiur!!

Responder
JMiur  

luzdeluna:

Primero que nada, revisa la sintaxis de ESTE POST

Parece que hay un DIV mal cerrado.

No puedo ver bien pero, aparentemente, es el último donde falta el símbolo >

Si te fijas en IE, el problema es en la página principal pero no en las páginas individuales.

Responder
Emerald  

Solucionadoooooo!!!!! Un abrazote de oso Jmiur!!!!Genio!! Jamás me podría haber dado cuenta que era un post el que desconfiguraba todo ya que no me tiró error cuando lo hice! ahora que lo saqué ya está la sidebar en su lugar!Mil gracias, salvaste mis nervios de punta con tu consejo!jeje
Saludos y si me permitis ... otro abrazote!

Responder
JMiur  

Jajajajaja, me alegro que se solucionara. La verdad, me costó trabajo entenderlo porque yo tampoco entendía como era que Blogger había dejado pasar ese error así que dudaba y lo revisé varias veces hasta estar seguro :D

Responder
Gem@  

Hace días hice una breve explicación en mi blog sobre aumentar las fuentes del blog, me basé en el script de DynamicDrive por aquello de ser más flexible y como todo lo pruebo antes también lo añadí a un blog de pruebas sin problemas. Sin embargo hay a quien si le ha proporcionado problemas (ni aumenta ni disminuye las fuentes) el script está correcto y los enlaces también, mirando las plantillas veo que se mezclan unidades relativas con pixeles y pienso que es ahí donde está el error.
Como dices que eso también puede modificarse yo pregunto... ¿hay forma de hacerlo sin cambiar todas las unidades relativas por pixeles?

Responder
JMiur  

Vi la entrada, Gem@. El problema es ese que dices; lo que hace el script es usar unidades relativas y entonces, con ciertas plantillas, los valores se tergiversan porque hay una equivalencia entre unas y otras pero no es exacta. Peor aún, el script permuta entre tipos pre-estalecidos:
xx-small, x-small, small, medium , large , x-large, xx-large

Para que funcionara perfectamente, TODA la plantilla debería tener propiedades de fuentes definidas de esa manera.

Otra alternativa sería cambiar levemente el script que lo que hace es leer uno de los datos que le damos y usarlo. En lugar de:

var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');

poner, por ejemplo:

var szs=new Array('70%','80%','90%','100%','110%','120%','130%');

En realidad, cualquiera de estas alternativas no parece demasiado útil y los nuevos navegadores ya incluyen un zoom interno que tampoco es muy exacto :)

No creo esta explicación sirva de mucho, suena más bien a resignación :D

Responder
Anónimo  

No entiendo por qué no puedo agregar esto a mi blog. En Firebug bajo Firefox me aparece el error "ts is not a function" y no funciona ni en Firefox ni en IE !!!

Responder
JMiur  

No hay ninguna función ni variable llamada ts así que, se trata de un error en la sintaxis; revisa los nombres.

Responder
Anónimo  

Supongo que la función que busca es esta: function ts(trgt,inc), pero evidentemente no la encuentra...

Responder
JMiur  

Ya la veo. Pero, debes tener un error de sintaxis en alguna parte. debería verlo online para tratar de encontrar el error.

Responder
Anónimo  

OK, JMiur, el blog de pruebas en está en http://unapruebitamas.blogspot.com/, donde se puede ver el error al hacer click sobre los íconos para aumentar o disminuir el tamaño del texto.

Responder
JMiur  

Lo que no se ve, es el script. En el código fuente no aparece ni en FF ni en IE ¿está puesto?

Responder
Anónimo  

Ya logré que funcione en el blog de prueba, pero me sigue dando el mismo error en mi blog "principal", donde voy a dejar agregado el script para que lo puedas revisar. El blog de pruebas es http://unapruebitamas.blogspot.com/ y el principal es http://soymosquero.blogspot.com/
Tambien quisiera saber como se hace para que aumente o disminuya solamente el tamaño de fuente del cuerpo de los post y no los encabezados, por ejemplo. Gracias.

Responder
JMiur  

Online no se ve nada. Evidentemente, los navegadores reordenan las cosas y el error no puede verse.

Para seleccionar algo y que sólo afecte ciertas secciones, debes cambiar body por el ID del elemento. En los posts es complicado porque sólo hay uno general llamado Blog1 que incluye titulos y comentarios. Los posts tienen un ID que coloca Blogger y varía.

Responder
Anónimo  

Hola he intentado pober este script y no me funciona. Una vez que lo pego y lo guardo al volver a editarlo veo que delante de los elementos a modificar se ha incluido esto:#39 No se si sera por eso pero el caso es que no funciona ¿Me puedes ayudar? Gracias es una opcion muy interesante ya que es para el blog de una biblioteca universitaria

Responder
JMiur  

Esos que aparece como &amp#39; no es otra cosa que la forma en que Blogger nos muestra los carácteres de comillas simples. Es engorroso para leer pero no es un error.

Responder
Viktor Lecter  

He querido poner este hack muchas veces y me he tardado full, el primer problema con que me encontré es que el segundo hack que expones no funciona si le pones el: //<![CDATA[ y el: //]]> dentro del script, el segundo problema es que tampoco funciona si lo adicionas a la plantilla directamente, solo funciona si lo pones dentro de un widget, je, je, je, a mi al menos no se me hizo tan sencillo como todos dicen, al final lo solucione todo, pero "mi" problema es que cuando yo edito los post nunca pero nunca los hago en la edicion normal sino que lo hago dentro de la edición HTML y siempre les pongo la etiqueta font, con un tamaño de letra personalizado (por si acaso algún día me toca cambiarme y migrar de Blogger a otro lado), el problema y ya lo comprobé es que esa etiqueta me impide cambiarle el tamaño al post, ¿como modifico el script para que este haga caso omiso de dicha etiqueta y aumente el tamaño a voluntad?

Responder
Viktor Lecter  

Ji, ji, ji, ehhh, uuuppss, ya lo conseguí, que bobo que soy, es que yo estudié sistemas hace muuuuchos años y soy mas de la época del cobol, basic, fox pro y pascal, lo hice poniendo:

var tgs=new Array('div','td','p','tr','font');

Gracias, hagamos como que nunca entré aquí...

Responder
Viktor Lecter  

"el segundo problema es que tampoco funciona si lo adicionas a la plantilla directamente", me refería a los enlaces por si acaso.

Responder
JMiur  

Los enlaces pueden agregarse en la plantilla pero deben ser escritos con cuidado:

href='javascript:ts(&quot;body&quot;,1)'

Porque Blogger tiene reglas respecto al orden en que se colcoan las comillas. Las exteriores osn simples y en las interiores se deben colocar entities como &quot;

Responder
Unknown  

Hola!
Muchas gracias por el tutorial, al fin logré poner la opción de agrandar las letras:P. Tenía el mismo problema que nombro victor, solamente funcionaba si pegaba los enlaces en un widget. Pero viendo tu explicación revise el codigo y cuando pegaba el enlace en la plantilla lo hacia con comillas pero al guardar se transformaba en aquot :0 y no &quot y no funcionaba el enlace... misterios del código.... :)
Gracias otra vez!

Responder
Carol  

Muchas gracias! conseguido a la primera ;)

Responder
Cristo te necesita  

HOla buenas,
buen tuto y un simpler codigo, y no tan extenso como otro que ví x ahí...

Una consulta, es que cómo haces para aumentar un texto determinado donde pones ('nombre',1) sustituyendo el nombre qué va ahí? qué es el ID?
perdon pero no tengo conocimiento de eso y llevo poco editando blog

te lo agradecería si me dijeras

Responder
JMiur  

Sí es lo que dice ahí, se coloca el ID de la etiqueta que quiere ser modificada.

Responder
Cristo te necesita  

Mmmm nunca me explicas q mala onda
es como q si respondieras por responder
será, tendre q preguntar a otros blog de la competencia
creí q me podrias ayudar

Responder
JMiur  

Para comenzar, creo que deberías cambiar el nombre de usuario por alguno más acorde con tu forma de expresarte pero, eso queda a tu criterio.

Segundo. Has preguntado algo que está escrito en al entrada de manera textual:

" ....... sólo lo haga con una parte o con un sector específico, indicando el ID correspondiente:
cambiarFuente('nombre',1)
......... "

Pese a eso, he respondido SI, debes cambiar el nombre por el ID de la etiqueta ¿Había alguna otra pregunta pendiente? NO ¿Qué tipo de respuesta querías? No, no me interesa la respuesta.

Si la ayuda no sirve, lo lamento. Pregunta donde se te venga en ganas. Yo no compito con nadie; sólo te hacía un favor.

De nada.

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