[How to] Botonitos para agrandar la fuente

A pedido del público, del público de UnServidor, van los pasos para poner unos hermosos (?) botonitos que permitan agrandar y achicar la fuente del texto del post.



Cosas que hacen falta:

1. Saber leer, si no sabe leer pregunte en los comentarios.
2. Saber buscar (pista, prueben ctrl + F ;) ).
3. Saber copiar y pegar.
4. Dos fotitos en algun lugar de la internet, picasa por ejemplo.
   

Antes que nada, si la idea es solo agrandar la fuente se puede hacer desde la parte de diseño de blogger

UnSer, hacé click en Diseño, después en Fuentes y colores, buscá la opción que dice Fuente del texto y dale al botonito que dice: Más grande. Con eso debería alcanzar.

Ahora sí, vamo' a lo que nos importa.

1. Hay que editar la plantilla del blog, así que hacete una copia, que para eso los muchachos le pusieron un link ahí arriba, en Diseño, Edición de HTML. Si no te hiciste un backup y se rompe algo a llorar a la iglesia.
   
2. Click en el checkbox que dice "Expandir plantillas de artilugios" (debería decir widgets, por qué tradujeron widgets).
3. Buscá la parte que dice </b:skin> y justo abajo pegá esto (sin el 4, no tengo ganas de pelearme con el editor de blogger...)
   

4. <script type="text/javascript">
   //<![CDATA[
   function getPostDiv(){
   var divs = document.getElementsByTagName('div');
   var flag = 'false';
   var div = 0;
   for(i=0;i<divs.length && flag == 'false'; i++){
   if(divs[i].className == 'post-body entry-content'){
   div = divs[i];
   flag = 'true';
   }
   }
   return div;
   
   }
   
   function getDivFontSize(div){
   var size = div.style.fontSize;
   size = size.replace("%","");
   if(size == ""){
   size = "110";
   }
   size = parseInt(size);
   return size;
   }
   
   function enlargeFont(){
   var div = getPostDiv();
   var size = getDivFontSize(div);
   size = size + 5;
   size = size + "%";
   div.style.fontSize=size;
   }
   
   
   function reduceFont(){
   var div = getPostDiv();
   var size = getDivFontSize(div);
   size = size - 5;
   size = size + "%";
   div.style.fontSize=size;
   }
   
   //]]>
   </script>

5. Buscá la linea que dice
   

   <div class="post-body entry-content">

   y justo arriba pegá esto otro, sin el 6 rompebolas.
   

6. <b:if cond="data:blog.pageType == "item"">
   
   <div class="post-header-line-1" style="text-align: right;">
   
   <a href="#" onclick="javascript:enlargeFont();"><img src="%3Cspan%20style=%22font-weight:%20bold;%22%3ELaDireccionDeUnaFotitoParaAumentarLaLetra%3C/span%3E" style="border: 0pt none;" width="15" /> </a>
   <a href="#" onclick="javascript:reduceFont();"><img src="%3Cspan%20style=%22font-weight:%20bold;%22%3ELaDireccionDeUnaFotitoParaAchicarLaLetra%3C/span%3E" style="border: 0pt none;" width="15" /></a>
   
   </div>
   
   
   </b:if>

7. Guardá los cambios.

Si todo salió bien deberías tener algo parecido a lo que tengo yo, si todo salió mal cargá la plantilla vieja y todo vuelve a estar como antes.

En lugar de la imagen pueden poner un texto cualquiera.

Otro tema, para que Licha deje de ro.. sufrir porque no puede comentar, hice un nuevo blog solo para arreglar el coso de los comentarios, que anda pa'tras y no sé porque, pasen y comenten por acá, mejor dicho por allá.