Cambiar tamaño de letra del blog

|

Font sizeDe acuerdo al contenido del blog es al público al que está dirigido y es posible que este público sean adultos mayores o bien tengan dificultades visuales. Así que una buena herramienta es darles la opción de que sean ellos quienes elijan el tamaño del texto del blog y puedan cambiarlo a su gusto. Para ello vamos a usar dos métodos:

El primero es que el lector escoja el tamaño exacto de la letra. Para lograr esto sólo pegamos este código en un elemento HTML/Javascript:
Tamaño de letra: <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;10px&apos;"><span>10</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;12px&apos;"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;14px&apos;"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;16px&apos;"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize=&apos;18px&apos;"><span>18</span></a>

Las opciones de tamaño de la fuente van desde 10 hasta 18 puntos, puedes agregar las que quieras repitiendo la línea correspondiente.

La segunda opción la vi en Vagabundia y se trata de cambiar el tamaño de la letra con dos botónes, uno para aumentar y otro para disminuir.
Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:
<!-- cambiar tamaño de fuente -->
<script type='text/javascript'>
var tgs=new Array(&#39;div&#39;,&#39;td&#39;);
var szs=new Array(&#39;xx-small&#39;,&#39;x-small&#39;,&#39;small&#39;,&#39;medium&#39;,&#39;large&#39;,&#39;x-large&#39;,&#39;xx-large&#39;);
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>

Ahora en un elemento HTML/Javascript pega esto:
<a href="javascript:ts('body',1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/%2Bfont.PNG"/></a>
<a href="javascript:ts('body',-1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/-font.png"/></a>

El resultado serán dos íconos con los que se podrá manipular el tamaño de la fuente de texto, puedes ver el ejemplo funcionando de ambos métodos en este blog de pruebas.
Los íconos puedes cambiarlos por los tuyos si así lo deseas, sólo cambia la URL de la imagen, o bien, puedes usar sólo texto, si este es el caso entonces usa esto:
<a href="javascript:ts('body',1)">Aumentar fuente</a>
<a href="javascript:ts('body',-1)">Disminuir fuente</a>

Este truco hará que cambie el tamaño de la letra de todo el blog, si deseas que sólo cambie la letra de las entradas cambia donde dice body por main.

55 comentarios:

WeS dijo...

muy buena la info aunke no se me habia ocurrido eso de la dificultad para leer...

crees ke la letra de mi blog esta muy pequeña?

saludos !

El Potro™ dijo...

Pues a mí se me dificulta un poco pero creo es por el fondo negro. Aunque no está de más dar esa opción.
Saludos.

cyberbloggero dijo...

jajaja. Lo primero que se me vino a la mente luego de ver el título y todos los códigos del post fue:

" y porque no cambiar el tamaño de la letra desde la configuración de blogger"

Luego que lo leí, me di cuenta que era un completo idiota. jajajaja. Nada que ver con lo que me imaginé. La verdad que esta muy buena la idea. No sabía que se podía hacer ello.


pd: Potro... creo que dentro de un tiempo el blog de prueba va a saturar a blogger de tantas cosas que tiene!!! jajajajaja.

El Potro™ dijo...

Creo que sigues con fiebre brother,jajaja. Hay que pedirle al Dr. Víctor que te dé unos buenos sedantes, jajaja.
Tienes razón, abriré otro blog de pruebas.
Un abrazo.

cyberbloggero dijo...

jajajaja, no... era broma lo de del blog. Todavía tiene para largo rato.

Lo mio no es por la fiebre... es un "Trastorno Blogger-Compulsivo". A veces me sucede que imagino compulsivamente el comentario antes de leer el post. Jajajaja.

El Potro™ dijo...

jajajajajaja esa estubo buena, espero y el delirio de la fiebre te haya dado más palabras para el diccionario (que por cierto seguimos esperando)

cyberbloggero dijo...

Si, es verdad. Creo que es hora de lanzar el Diccionario o mejor dicho " #$%&#$°| "

Bueno, no puedo pone el nombre, lo voy a dejar como intriga para el título del blog. jajaja.


Un abrazo!

El Potro™ dijo...

Sería buen post para conmemorar tu PR y para decirles a los de Adsense -mira de lo que se perdieron!.
Un abrazo.

cyberbloggero dijo...

Jajajaja! Tienes razón. Creo que voy a hacer ese post para conmemorar el nuevo PR!


Un abrazo!

Administradores dijo...

Excelente, muchas gracias!!
Ideal para abuelitos :P


Verónica

Juan Ramon Aristy Mejia dijo...

Pues para decir algo tendre que decir "copy&paste",dire genial pero ya lo dijeron asi que dire excelente y ya lo han dicho.. no pues mas que bueno esta..
pero sigo diciendo lo mismo que otros...hasta si digo me gusto mucho ya lo dijeron primero..
asi que
muchas gracias..pero ya lo han dicho
Saludos y que bueno que hay cosas aqui por aqui.jejeje

El Potro™ dijo...

Jajajajaja, lo importante no es quién lo diga primero, sino que se diga.
Muchas gracias por tus comentarios (sí, ya lo he dicho antes, jaja)

Saludos.

Webcitizen dijo...

está muy bueno el del gadget, para no tocar la plantilla. Lo usé en mi blog pero le hice una pequeña "mejora", cambié los números por imágenes de números con el tamaño al que se verán, o sea al 12 lo cambié por una imagen de un número 12 con la fuente tamaño 12 así el lector previsualiza como se verá la letra y elige la adecuada a su vista

El Potro dijo...

Hola Webcitizen,

Excelente idea, de se modo los lectores tienen un idea más clara de qué tamaño estará la letra =)

Saludos.

@rielCastellanos dijo...

Hola El Potro, fijate que te quiero consultar algo, en que parte de mi plantilla esta el tamano de letra de las entrada s de mi blog (el cuerpo), modifique todos los font-size pero esa parte no se modifica, quisiera hacerlo un poco mas grande directamente desde la plantilla, recuerdo que es Trebuchet 13px modifique todo y nada, gracias, saludos!

Mi Blog: http://blogunah.blogspot.com/

El Potro dijo...

Hola @rielCastellanos,

Busca esta parte de tu plantilla:

body {
background: url(http://3.bp.blogspot.com/_099vFPGteOM/SvG4JcuefYI/AAAAAAAAAZI/OH7kHlBVy3k/S1600-R/bu2dd.jpg);
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Y sustitúyela por esta:

body {
background: url(http://3.bp.blogspot.com/_099vFPGteOM/SvG4JcuefYI/AAAAAAAAAZI/OH7kHlBVy3k/S1600-R/bu2dd.jpg);
margin:0;
color:#333333;
font-family:'Trebuchet';
font-size:13px;
text-align: center;
}

Dale vista previa y fíjate si ya tienes el tamaño deseado.

Saludos.

hrod dijo...

Potrooo Vii este postt y kisiera saber si puedess hacerr uno en dond digas como cambiar el TIPO de letra en los titulos de las entradas de verdad me interesa saberr busk y buske pero no encontree.. porfa si lo puedes hacer te agradeceria un mundoo!!!


Saludos

El Potro dijo...

Hola hrod,

¿Quieres cambiar la letra de los títulos de las entradas sólo tú o deseas que haya una opción como esta para que el usuario pueda cambiar la letra de los títulos?

hrod dijo...

No pss para ke cuando yo o cualkier otro con permisos en mi blog publike(solo con permisos)aparezca en el titulo otro tipo de letraa otro ke no sea ese el normal creo ke es el georgia... pero kiero cambiarlo para ke parezca el : Matura MT Script Capitals.

Saludos.

El Potro dijo...

Lo siento, no se pueden hacer cambios según quien publique la entrada. Los estilos son los mismos para todos los autores.

Saludos.

El cantinero dijo...

Hola potro no abra manera de ponerlo entre las entradas

El Potro dijo...

Hola El cantinero,

Podrías ponerlo debajo de la etiqueta <div class='post-header-line-1'/>
Hay que entrar a Diseño > Edición de HTML y expandir los artilugios para encontrarlo.

Si usas el segundo (ese no sé si funcione dentro de las entradas) pega primero el script donde se indica, y el segundo código debajo de la línea que te mencioné.

Saludos.

El cantinero dijo...

Gracias potro pásate a mi blog porfa esta es la dirección http://comoenlacantina.blogspot.com
es lo que e logrado con tu ayuda
Quiero una critica constructiva jejeje.

hrod dijo...

Bueno confio en ti... mas sin embargo en el balcon de jaime en contre este post :

http://elbalcondejaime.blogspot.com/2009/06/cambiar-la-fuente-del-titulo-de-un-post.html

En el cual podemos cambiar la fuente del titulo del post si adentrarme en la plantilla.. me parecioo fantastico.

Saludos.

El Potro dijo...

Es una buena opción, aunque es posible que los códigos se vean en la pestaña del navegador.

Saludos.

guiye dijo...

Buenas El Potro,
Estoy ultimando el Blog para ya dedicarme sólo a escribir, pero tengo un problema enorme con el tamaño de las distintas fuentes: cabecera, entradas, sidebar(sobretodo), páginas estáticas... El tema es que cuando consigo que algunas tengan un tamaño adecuado las otras se ven demasiado grandes o demasiado pequeñas, etc. Te pediría por favor si pudieras echar un vistazo a ver si sabes como arreglarlo, o si crees que haciendo esto de la eleccion del tamaño podría solucionarse. Mi sitio es : http://espacionba.blogspot.com
Mil gracias y un saludo

El Potro dijo...

Hola guiye,

El tamaño de la letra se cambia desde Diseño > Fuentes y colores, ahí cambias el tamaño de los títulos, cabecera y entradas.

Saludos.

guiye dijo...

El problema me pasa desde que puse el menú para las páginas estáticas que pusiste en otro blog. Cuando voy donde tu dices y cambio el tamaño me lo cambia de todas partes excepto de la sidebar que se queda siempre pequeño casi ilegible. Lo único que hace es hacer más grande el recuadro del título sin aumentar el tamaño de la fuente. A qué puede ser debido?

guiye dijo...

He estado haciendo indagaciones y he observado que hay varias plantillas que contienen una variable para modificar el tamaño de la fuente de la sidebar, pero en la mía no existe esta opcion, sólo hay cabecera y texto en general. Igual la solución sería crear alguna? es que yo no tengo ni papa de html...

El Potro dijo...

Hola guiye,

Según veo el código de tu plantilla sí existe una variable para el texto de la sidebar llamada SidebarFont pero al parecer no aparece dentro de alguna otra parte, quizá lo hayas eliminado por error.
Pero bueno, aun se puede solucionar, busca en tu plantilla esta línea:
.sidebar {

Debajo de ella agrega esto:
font-size: 12px;

Cambia ese valor por el que tú quieras hasta que obtengas el tamaño deseado.

Saludos.

guiye dijo...

Me sigue pasando lo mismo, cuando aumento el número me hace grande el recuadro pero la letra sigue minúscula. Igual sólo me pasa a mí y los demás lo ven mejor, pero es que me está volviendo loco esto!! :(

El Potro dijo...

Pues yo veo las letras de la sidebar igual de grandes que las de la entrada, a menos que te refieras a otra cosa :S

RammsteinLinks dijo...

Hola q tal El Potro! aqui d nuevo molestando yo XD

y aunque la verdad no estoy muy seguro si ya t hice esta pregunta o "solo planie hacerlo" jajaja

mi duda es sobre si se puede aumentar solo el "Titulo de la Entrada" no se si sea mi plantilla o q pero cuando intento aumentarlo desde Diseño > Fuentes y Colores no me deja... o me deja cambiarlo pero tambien se aumenta de tamaño del Sidebar :s

cheque con otro blog q tiene la misma plantilla y el codigo tampoco tiene esa opcion :( o no se si estoy demasiado wey jajaja

ayudame por fa potroo! XD

t dejo mi blog para q por fa lo cheques :D

http://rammsteinlinks.blogspot.com/

Saludos!!

El Potro dijo...

Si no te deja desde ahí entonces hazlo directo en la plantilla. Busca esta parte:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;

Eso que está en negrita es el tamaño de la letra del título de las entradas; modifícalo al tamaño que deseas.

Saludos.

RammsteinLinks dijo...

d echo ya lo habia intentado d esa forma (y ahorita le intente otra vez) y no se modifica :s muevo los porcentajes y sigue igual :( ya le eh intentado y no se deja :s

crees q exista alguna otra forma d moverle el tamaño???

Saludos y disculpa tantas molestias :p

El Potro dijo...

No es ninguna molestia ;)
Intenta no ponerlo en porcentaje, sino en pixeles, por ejemplo 18px

Saludos.

RammsteinLinks dijo...

no, tampoco :( encontre otro blog con la misma plantilla el cual di tiene las letras del titulo d la entrada mas grandes... compare los html y son iguales! :s

ya creo q mejor me voy a resignar y q se queden asi xD

Gracias!

El Potro dijo...

La plantilla que usas es la Mínima Black, con esa he hecho pruebas y se modifica como te he dicho directo en la plantilla, por ejemplo en mi caso cambié 140% por 50px y en seguida se cambió el tamaño.

Veo que en tu caso sigue en 140% no aparece la modificación, como te dije, eso debió haber funcionado.
Cámbialo a pixeles como te expliqué y déjalo así, aunque no veas el cambio para que pueda verificar si es otro el código que no deja que se cambie la letra.

Saludos.

RammsteinLinks dijo...

si es q d echo lo modifique y lo volvi a dejar como estaba XD

bueno ahora ya le cambie a 50px sigue igual pero espero le puedas checar por fa :D

saludos y muchas gracias!

El Potro dijo...

Ummm parece que tienes una modificación en la plantilla que afecta esa área.

Intenta con esto, busca esta parte:
h2 {
margin:1.5em 0 .75em;
font:normal bold 76% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;

Cambia ese 76% por otro como 130%, dale vista previa y fíjate si con eso se soluciona.

Saludos.

RammsteinLinks dijo...

q tal el potro! si funciono pero desafortunadamente tambien aumenta el Sidebar :s

ya mejor asi lo dejo jaja

muchas gracias por tu ayuda y por tu tiempo el potro ;)

El Potro dijo...

Eso es porque dentro de los cambios que supongo que habrás hecho con anterioridad dejaste el mismo estilo para los títulos de la sidebar y de los posts, por eso si cambias uno se refleja en los dos.

La solución...definir otros estilos para la sidebar.

FEPCA dijo...

Hola Potro, una pregunta seguí los pasos, pero supongo que en alguna parte tengo algo para que las imágenes se abran en ventana nueva, el caso es que cuando pinchas en aumentar la letra, se me abre una ventana nueva sin título y no hace nada, es una página en blanco, te agradecería me echaras un cable, es un blog de trabajo y necesito hacerlo. El caso es que en el mío lo hice sin problemas, no se que sucede. Muchas gracias.

El Potro dijo...

Hola FEPCA,

Efectivamente es por un script que tienes que hace que los links externos se abran en otra página. Con ese script en la página no podrá funcionar esta herramienta.

FEPCA dijo...

Gracias por la aclaración, me lo temía.
Un saludo

ale_87cba dijo...

POTRO :) vi en el blog de pruebas de este post que tienes en el margen inferior izquierdo un triangulo decorador naranja quisiera saber como colocarlo

GRACIAS!

ale_87cba dijo...

Mil gracias me quedo genial, solo tengo un problema para cortar la imagen, los programas q tengo (ACDC, paint, power piont, etc) solo me permiten cortar secciones cuadradas y no triangulares tendre que bajarme algun otro como photoshop? o puedo cortarla correctamente con los que tengo?

gracias nuevamente.

El Potro dijo...

En realidad todas las imágenes son cuadradas o rectangulares, lo que sucede es que esa tiene un fondo transparente, por eso la otra mitad no se ve.
Para tener una imagen con fondos transparentes necesitas un programa que pueda guardar las imágenes en formato PNG, como Photoshop.

Saludos.

Onalem! dijo...

En este códigoo de Aumentar fuente y Disminuir fuente quisiera poder agrandar la fuente de esta. ¿Cuál es el código?.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo