Modificar el tamaño de los textos visualizados
Yo uso habitualmente dos ordenadores: uno, de sobremesa, con pantalla de 19" y otro, un miniportátil Asus EeePC con pantalla de 10". Naturalmente, el tamaño de las letras que visualizo en una u otra pantalla son muy distintas. Por eso puede ser interesante disponer en el Blog de un sistema que aumente o disminuya, a voluntad, el tamaño de las letras visualizadas.
Esto es bastante sencillo, y vamos a hablar un poco sobre ello
Por lo que he visto (por Google) podríamos usar tres métodos, aquí los puedes ver, en mi 'blog de pruebas'
Y vamos a empezar por el de más arriba, que es el más simple... y más sencillo.
Consiste en añadir el 'gadget' a la columna lateral, así que vamos primero (en Bogger) a Diseño, y añadimos el gadget HTML/JavaScript, que lo encontrarás enseguida, hacia la mitad de los que te presenta. Y ahí pones:
En 'Título' el que quieras (por ejemplo 'Modificar tamaño del texto')
En 'Contenido', pegas este código
<span style="color:#cc3333;">Tamaño de letra: <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='12px'"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='14px'"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='16px'"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='18px'"><span>18</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='20px'"><span>20</span></a></span>
Esto está hecho para opciones de tamaño de letra entre 10 y 20 px, puedes poner los tamaños (razonables) que quieras.
También, como ves, puedes poner el color del texto 'Tamaño de letra' que te apetezca.
El segundo método consiste en, como ves, poner solo dos botones (iconos) para aumentar o disminuir. Para esto tienes que hacer dos cosas:
En primer lugar, vas a Diseño > Edición de HTML buscas </head> y pegas justo antes de ese </head> lo siguiente:
<!-- cambiar tamaño de fuente -->
<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 < 0) sz=0;
if (sz > 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i < tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>
Ahora añadimos, como antes, un gadget HTML/JavaScript y ponemos:
En Título, por ejemplo, 'Cambiar tamaño del texto'
Y, en Contenido, copiamos este código:
<a href="javascript:ts('body',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQbMbwc1BdB_bYyEU0OWW9yeiu-_nIRwIVi3queSaiCGGbvScoAJg_hSRCIxB1WI9D3h6JuDgXAlt2LFJek9LioeJyNJZjNvbmj1nDk5z9ZS523v8w-k9MRaafAE80Oi-TvShcJKsRy6pH/h120/fontMas.gif"/></a> <a href="javascript:ts('body',-1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezzkJcXIb07JPn5-f9NzONYn8w7hhZ-AitIkhqHJx0Tdt5MEcZOtsrd6apa4j8py3mv2Xcym5YTnCPRY1a_8OaHXhrJv9sz_psY6SypOYZLYGDz8uamDx3XLh9ZvgkxYH0sAg0uQkcZ8t/h120/fontMenos.gif"/></a>
NOTA: en <img scr="... hay que poner la URL de las imágenes (iconos) que quieres meter. Lo puedes hacer o bien buscándolos por Google o bien, como he hecho yo, usar los tuyos propios, que lo mejor es 'subirlos', con añadir imagen, a Blogger (a tu blog) y, sin necesidad de añadirlos, copiar su URL.
(Un comentario: este método, al 'tocar' la plantilla, me parece que condiciona el funcionamiento de los otros)
Y el tercer método consiste en poder cambiar no solo el tamaño de la letra, sino también visualizarlo con otro tipo de fuente. También se hace añadiendo el gadget HTML/JavaScript y ponemos como siempre
Título: Ver texto con otro tamaño o tipo de letra
Contenido, este código:
<script>
function go1(){if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none"){document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value}}
function go2(){if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none"){document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value}}
</script>
<form id="forma" name="selecter2" method="posts">
<select onchange="go2()" style="font-family:Arial;font-size:10pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option selected value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:Arial;font-size:10pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="22px"/>22
</select>
</form>
function go1(){if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none"){document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value}}
function go2(){if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none"){document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value}}
</script>
<form id="forma" name="selecter2" method="posts">
<select onchange="go2()" style="font-family:Arial;font-size:10pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option selected value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:Arial;font-size:10pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="22px"/>22
</select>
</form>
Como ves, son distintas opciones para lo mismo. Elige a tu gusto.
Por cierto: este efecto de cambiar el tamaño de visualización, quizás por condicionantes de la Hoja de Estilos de Blogger, solo se aplica al tamaño de letra 'Normal'.
Quiero decir que las marcadas como 'Pequeñas' se siguen viendo pequeñas. Es una razón para, si te gusta cambiar el tamaño de algún párrafo, procurar usar, en él, el tipo de letra Georgia (o Times) que ya se ven, de por si, y en tamaño 'Normal', más pequeñas que la Verdana, Arial, etc.
Imprimir el artículo/crear PDF
Volver al Indice del Blog
Etiquetas: Perfeccionamientos y Trucos
entrada de Julio Bengoa ('aka' doc) @ 2/27/2014 05:25:00 p. m.
0 comentarios
