Agrandar / Achicar texto de la entrada

TUTORIAL ACHICAR / AGRANDAR
Generalmente este script lo utilizan los Periódicos online, pero es importante colocarlo en todos los Blogs, dándoles la opción a los usuarios de elegir el agrandar o achicar el tamaño de la letra de los artículos.


Recuerden descargar su plantilla antes de realizar algún cambio en la misma.
Para observar un ejemplo de este tutorial, Uds. podrán observar en la esquina superior izquierda de las entradas de este Blog, 3 recuadros con 3 letras: -A, A, +A, que al hacer clic sobre ellas, el tamaño de las letras de los artículos aumentan o disminuyen.


PASOS:

1. Abrimos nuestro administrador de Blogger: www.blogger.com
2. Ir a Diseño/Edición HTML
3. Buscar CTRL + F la siguiente parte del código: </head>
4. Justo antes de </head>, pegamos el siguiente código:
<link href="http://www.geocities.com/internetuide/doctextsizer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/internetuide/doctextsizer.js">

/***********************************************
* Document Text Resizer Script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>

5. Guardamos la Plantilla
6. Buscamos con CTRL + F: ]]></b:skin>, y antes de ]]></b:skin> pegamos el siguiente código:

/* AGRANDAR-ACHICAR LETRA
---------------------------------------------
*/

.contentarea{
font-size: 16px;
}

.smallview .contentarea{ /*CSS for "small font" setting*/
font-size: 10px;
}

.normalview .contentarea{ /*CSS to return page to default setting (with no additional CSS rules added)*/
font-size: 12px;
}

.largeview .contentarea{ /*CSS for "large font" setting*/
font-size: 14px;
}

Guardamos la plantilla.
7. Buscamos con CTRL + F la siguiente parte del código: <div id='main-wrapper'>. Si no lo encontramos vamos reduciendo la búsqueda, por ejemplo buscamos solamente main-wrapper. Insertamos el siguiente código en la Plantilla HTML, después de <div id='main-wrapper'>. Haz clic sobre VER SCRIPT, selecciona el código con CTRL + A, cópialo con CTRL + C y pégalo después de <div id='main-wrapper'>.

VER SCRIPT

8. Guardamos la Plantilla
9. Ir a Configuración > Formato
10. Pegar la siguiente línea en la caja de PLANTILLA DE ENTRADA:
<div class='contentarea'>Aquí va el texto a achicar o agrandar</div>

11. Guardar Configuración
12. Abrir CREAR UNA NUEVA ENTRADA y en Edición de HMTL, les va a aparecer la línea del código anterior, y en lugar de "Aquí va el texto a achicar o agrandar", colocar el texto e imágenes correspondientes a su entrada".

Para los que tienen la opción de Leer más en la plantilla:

El código en CONFIGURACIÓN / FORMATO / PLANTILLA DE ENTRADA les deberá quedar:
<div align="justify"><div class="contentarea">
Colocar aquí resumen de la entrada

<span class="fullpost">
Aquí va el texto secundario que van a expandir al hacer clic con Leer más.
</div></span></div>

 
ir arriba