Ver entrada completa. Agrandar y reducir texto

Hay varias formas que podemos agrandar y/o reducir el texto de nuestro blog.

Todas estas formas se pueden hacer agregando un código JavaScript.

Podemos agrandar todo el texto del blog o solamente una parte que elijamos.

Yo voy a poner varios códigos, ustedes eligen el que crean mas conveniente.

Los ejemplos que voy a mostrar tienen una fuente principal de 12px, que viene a ser la que se encuentra en el body del blog.

Podemos verlo en nuestro código CSS de la plantilla buscando:

body {
.......
font-size: 12px;
.......
}

Si no es 12 px, pueden cambiar el tamaño en los siguientes códigos.

Parte 1: (Código JavaScript)

Poner el código arriba de </head>

No hay que poner todos los códigos, como dije antes ustedes elijan solamente uno.

Para todo el texto del blog:

Funcionará en el total del blog, mientras no tengamos en alguna etiqueta un tamaño menor en px, pero lo podemos solucionar cambiando el tamaño en px por un % aproximado.

10px cambiarlo, por ejemplo 85%.

Código 1:

Este código es sencillo, solo cambiara el texto a un tamaño elegido.

El texto se agrandará a 22px y se reduce a 12px. (personalizar a gusto)

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.body.style.fontSize="22px";
}
function reducirtexto(){
document.body.style.fontSize="12px";
}
//]]>
</script>

Código 2:

El texto se va agrandando de a 2px en 2px, hasta un máximo de 5 veces, de la misma forma se va a ir reduciendo.

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Para una parte que elijamos del blog:

Lo que va a agrandar o reducir es el texto de una parte del blog, utilizaremos para ello una ID.

En los ejemplos yo elegí la id main-wrapper.

Si quieren pueden agregar el contenido del texto dentro de una ID.

Ejemplo:

< id="nombreID" >
.... contenido con texto ....
</div>

O bien colocan el ejemplo para que agrande el texto de las entradas.

<div class='post-body entry-content'>
<div id="nombreID">
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>

Cambiar "nombreID" por el mismo que tendra el script.

Código 1 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.getElementById("main-wrapper").style.fontSize="22px";
}
function reducirtexto(){
document.getElementById("main-wrapper").style.fontSize="12px";
}
//]]>
</script>

Código 2 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Agrego otro código que es el que actualmente utilizo en mi blog.

Código 3 con ID:

<script type='text/javascript'>
//<![CDATA[
var newsfont = 12;
function changeFont(id) {

if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
}

function agrandartexto() {
if (newsfont < 30) {
newsfont= newsfont +2;
changeFont('main-wrapper');
}
}

function reducirtexto() {
if (newsfont > 12) {
newsfont= newsfont -2;
changeFont('main-wrapper');
}
}
//]]>
</script>

Si eligieron la opción de las entradas, no olvidar cambiar la ID main-wrapper por la Id que pusieron en el div. (nombreID)

Ya elegido y colocado uno de los códigos, guardar cambios.

Parte 2: (Colocar link o botón)

Lo que vamos a hacer es colocar los link llamando a las 2 funciones, una para agrandar y otra para reducir el texto.

Esta parte es igual para cualquiera de los 5 ejemplos de los códigos JavaScript.

Colocaremos en la parte del blog que quieran, puede ser en un gadget para mostrar en la sidebar, o directamente en las entradas.

Si van a ponerlo en las entradas pueden colocar los link dentro de una condicional, para que se vea unicamente al abrir el post.

Ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ACÁ PONER LOS LINK
</b:if>

Ver entrada similar:

Código de los link:

<a href='javascript:void(0);' onclick='agrandartexto();' title='Agrandar texto...'>Agrandar texto</a>
<a href='javascript:void(0);' onclick='reducirtexto();' title='Reducir texto...'>Reducir texto</a>

Cambiar el texto.

Pueden poner en su lugar una imagen:

<img scr="URL de la imagen"/>

Pueden encontrar imágenes acá: http://www.iconfinder.com

Ver como queda en vista previa, y si todo va bien guardar.

Otra entrada para cambiar el texto: