67

Aumentar / Disminuir tamaño del texto en las entradas

Vamos a ver mediante el uso de un script creado por Clau de Gothic Darkness como añadir unos botones debajo del título de cada entrada que permitan el aumentar o disminuir el texto de las entradas, para facilitar su lectura.

Aumentar/Disminuir texto

[1] En primer lugar tendremos que añadir un script antes de la etiqueta </head> de nuestra plantilla:
<!-- Script Aumentar/Diminuir Fonte by http://www.mundodarkness.com/ -->
<script type='text/javascript'>
//<![CDATA[
function fontMais(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}
}
function fontMenos(){
var obj = document.getElementById("textoFonte");
if (obj.style.fontSize==""){obj.style.fontSize="12px"};
if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}
else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}
else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}
else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}
else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}
}
//]]>
</script>
<!-- Fim Script Aumentar/Diminuir Fonte by http://www.mundodarkness.com/ -->

[2] Guardamos los cambios.

[3] Marcamos entonces la opción de "Expandir las plantillas de artilugios" para localizar la siguiente etiqueta:

<div class='post-header-line-1'>

Justo debajo de esa etiqueta, añadimos el código para mostrar los botones de aumentar y disminuir el texto debajo del título de las entradas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a alt='Aumentar fuente' href='javascript:fontMais()'><img src='http://img405.imageshack.us/img405/2006/fontmais.gif'/></a>
<a alt='Disminuir fuente' href='javascript:fontMenos()'><img src='http://img707.imageshack.us/img707/359/fontmenos.gif'/></a></b:if>

Nota:
En el caso de que esa etiqueta se muestre en la plantilla con barra de cierre al final:
<div class='post-header-line-1'/>
tendremos que retirar la barra y cerrar con un </div>, es decir, de esta manera:
<div class='post-header-line-1'>
<--- Aquí el código para mostrar los botones --->
</div>

[4] Localizamos ahora esta parte del código de la plantilla:

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

Y añadimos el código destacado en negrita tal como vemos en el ejemplo:

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

[5] Guardamos los cambios y comprobamos nuestro blog, si todo ha ido bien, ya tendremos los botones para aumentar y disminuir el texto funcionando en cada entrada.

Modificaciones:
Para utilizar nuestros propios botones, cambiamos en este mismo código la url de las imágenes por la de las nuestras, (destacadas en color verde).


ARTICULO ORIGINAL:Gothic Darkness

Nota traducida de la autora original:
Si desea publicar este script en su blog, no lo dude, pero sea consecuente, no plagie su tutorial y de los créditos de la publicación original, lo que indica un enlace en su artículo al publicado en Gothic Darkness.

Entradas Relacionadas:

67 comentarios:


ANRAFERA

Muy bueno. Gracias. Saludos

Keymer Fernandez

Hola Rosa, hice todo correctamente pero en el blog en las entradas no me sale el A+ A- que te sale a ti. Que habré hecho mal?

Saludos.

Rosa

Keymer Fernandez Es que yo no dije saldrían como las mias... de ahí que al final indico como usar cada uno sus propios iconos...
Salen los de la entrada original, yo cambié en mi caso por estos que me gustaban más.

Lisett

rosita! disculpa la molestia, mira como tu misma dices, primero busque en tu blog, pero no encontre lo que buscaba.
Mira he hecho un foro, y queria poner algo similiar a lo que ponen en : http://www.crepusculo-es.com/ en la parte derecha donde dice "la web" para que los usuarios puedan entrar al foro que ellos tienen.

Como podria hacer ese widget para mi blog? es decir colocar una casilla para que las chicas del blog entren rapidamente a mmi foro.

Mi blog es:
http://despuesdeamanecer.blogspot.com/

y la pag de mi foro es:
http://despuesdeamanecer.foroactivo.com/

Muy agradecida por leerme y por intentar darme una solucion.

GRacias otra vez,

Lisett

Rosa

Lisett Esa web que me muestras tiene dominio propio, lo cual le permite hacer ese tipo de cosas que en Blogger es imposible...
Lo más que puede hacerse en Blogger es añadir un enlace al foro.

Rosa

H He suprimido tu comentario por incluir un enlace directo.
No se porque no se ven tus seguidores, a no ser que esés utilizando Scriptaculous en la plantilla:
http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

Pilar

Que torpe soy, lo he intentado y no hay modo. Al final me dice que está mal y no se puede guardar, seguiré intentandolo porque mientras más lo pienso más lo quiero, ainsss.

Lisett

Gracias Rosita por responder.. ya sospechaba algo asi.. de todas maneras gracias :)

Nav´z

Muchas gracias, me a servido de mucho

Carlos Fernández

Hola, qué tal. He seguido todo el proceso y en principio parece ser que estaba todo bien. Pero me he dado cuenta de que al hacer visibles los iconos de expandir y disminuir la letra en la página general, y no en las entradas, cuando pincho en hacer más grande la letra de una entrada que no sea la primera que aparece, lo único que aumenta es la letra de la primera entrada y no de la que intento aumentar. No sé si me he explicado bien. Por qué pasa esto.
Ya que estoy te pregunto por otro asunto: ¿en la nueva versión de edición de blogger ha desaparecido la opción de añadir titulillo a las imágenes que sí vi hace unos días?
Muchas gracias por tus enseñanzas, son muy útiles.

Pilar

Hay Señor!!!

No hay modo Rosa, entre otras razones porque no encuentro la parte de

div class='poste-body entry-content



¿puede mi plantilla no tener este texto?

Ya sé que andas muy liada pero si se te ocurre cómo apañarlo, te lo agradeceré muchiiiisimo.

Descripcion

muchas gracias,muy buen blog,me ha servido de mucho todo,saludos.
gdi

Kike Hernández

Coincido con Carlos Fernandez #11. A mi me pasa lo mismo, si haces que los botones se muestren en la pagina principal, al hacer clic en los botones de ampliar/disminuir de cualquier entrada, solo se amplía el texto de la ultima entrada publicada.
Gracias de antemano y enhorabuena por este Blog.

Pili

hola Rosa, una pregunta: ¿cómo has puesto los gadjet de recomendados, destacados...? ¿los podría poner, y con la flechita para ocultarlos? Gracias por tu atención y tu ayuda.
Un saludo, y hasta pronto.

FT

mu bueno

DeSfAuSeR

grax rosa quedo perfecto :D

Rosa

Carlos Fernández Si, mis disculpas... :S No me di cuenta de que al añadir el div en el HTML de la plantilla eso sería así, he retirado esa parte de la entrada y so podrán mostrarse de esta forma en las páginas de cada entrada.
Para hacerlo en la principal y que afecte a cada entrada concreta, el código del pasp [4] debería añadirse manualmente en cada entrada, incluyendo el contenido de la misma dentro de ese div.

Rosa

PilarTu plantilla es una Mína, así que ha de estar el código... localiza mejor el <data:post.body/> y parte de ahí para buscar esa línea... ha de estar antes...

Por cierto... ¿Estás haciéndolo con las plantillas de artilugios expandidas supongo?... si no, imposible encontrar lo que necesitas...

Rosa

Kike Hernández Si, es cierto, error mío, no debí incluirlo en la entrada o debí completar la información, se me pasó, lo siento... en un comentario anterior respondo como se debería hacer...

Rosa

Pili El de "Recomendados" el el gadget "Links" de Blogger, el de "Destacados" ya es distinto, pues es código y enlaces "a mano" en un gadget HTML... no obstante, si, se pueden expandir y contraer como los demás...

Mateo

Rosa te dejo este comentario para que sepas que te enlaze en mi blog, quizas no alcanze para agradecerte todas las ayudas que me diste y me vas a seguir dando pero algo es algo.
besos

Ceci.-

Hola Rosa, tengo un gran problema... me cambié de plantilla, volví a la plantilla minima en mi blog pero me doy con que no puedo agregar ningún elemento de página, esto es así siempre?

Entonces, al querer volver a mi plantilla anterior, no puedo!!! no se como cargarla nuevamente porque en la pestaña "PLANTILLA" en "edición de HTML" solo me aparece el código de la plantilla mínima y yo no se como poner la anterior. Me quiero morir si perdí todo lo que tenía en mi blog :(( que hago? como se hace por favor podrías indicarme???

Ceci.-

Rosa, ya pude por lo menos volver a mi plantilla anterior, pero esta tiene un error que nadie parece conocer.

Se me duplican las entradas. Es decir, se muestran unas 6 entradas, luego de la última, vuelve a comenzar la primera, osea, se repiten. Y esto es muy molesto.....tendrá solución?

Mi única solución es volver a la plantilla mínima, pero cuando lo hago si bien se soluciona este problema, no puedo agregar ningún elemento de página al costado del blog...Esto es así?

Rosa

Ceci.- Tranquila, creo que podrás solucionarlo...
Antes que nada, te recomiendo que cuando vayas a probar una nueva plantilla, a hacer algún cambio grande o algo de esto, incluso siempre y cada cierto tiempo, te descargues una copia de tu plantillal PC, así ante cualquier problema vuelves a cargarla y listo:

http://elescaparatederosa.blogspot.com/2007/08/guardar-plantilla.html

Ahora veamos como solucionar las entradas duplicadas...
Ve a Edición HTML (no hace falta expandir artilugios) y localiza esta línea:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Debajo o cerca de esa línea has de tener otra igual pero con distinta id, algo así:

<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>

Borra la segunda, es decir, la que no tenga id=Blog1.

Anibal

Hola Rosa, hace tiempo que no escribía, pero esta vez no encuentro solución por mi cuenta pese a que he intentado ya bastante.

Mi duda básicamente es cómo agregas un gadget enmedio de las entradas y los comentarios, ya que por más que he intentado siempre consigo que se vean al final de los comentarios y no al principio de ellos.

Muchas gracias por tu ayuda y disculpa mi consulta :)

Ceci.-

:D :D :D Rosa asi era!!!!!!!!! Mil gracias por tu ayuda!!! Fuiste la única que me lo solucionó de muchas páginas de ayuda para bloggers en las que había preguntado :P

manel

Hola Rosa.
Soy un seguidor de tu blog, y gracias a tus publicaciones voy dándole forma al diseño de mi espacio.
Gracias por todo.

SHORELESS

ROSA AYUDA VE A MI BLOGER LE COLOQUE ESE FONDO DE IAMGEN
PERO SIMPRE ME QUEDA ESE CUDRITO AZUL AL LADO DE LA IMAGEN DE HALO Y DESE QUE LA IMAGEN SE ALRGUE COMO EL TUYO ADEMAS DESEO EL COLOR HEXADECIMAL DE HALO EL AZUL METALICO SALUDOS

.:: Clau ::.

@Rosa
Rosa, gracias por la citacion a Gothic Darkness ...
Después de mucho la cabeza destrozada, finalmente logró crear este script y me siento feliz de ayudar.
Lo siento por el mal español, porque no hablo español, pero nada que google no ayuda.(rs)
Su blog es excelente, ya me ha ayudado en alguna ocasión.
Cuando se necesita, estaré disponible. Gracias de nuevo.
besos
.::Clau::.

Rosa

AnibalUn gadget "normal" es decir, de los que Blogger proporciona, no puede añadirse ahí directamente.

Rosa

manelGracias a ti por estar. :D

Rosa

.:: Clau ::.Gracias a ti por compartir tu fantástico trabajo! :D

SHORELESS

ROSA QUITE A IMAGEN DE FONDO PERO ME PREGUNTABA SI LA IMAGEN DE HALO QUE TENGO EN MI CABESERASE PUEDE ALRGAR PARA CUBRIR EL RECUADRO AZUL COMO EL TUYO YA QUE TIENES UNA CABESERA ANCHA Y MI BLOGER SOLO TIENE LA MITAD DE ESE TAMAÑO ME PREGUNTABA DE PASO SI SE PUEDE AMPLIAR EL ANCHO DEL BLOGER Y DE LA BARRA LATERAL EN MI PLANTILLA ASI COMO SE PUEDE EN LAS NUEVAS
SALUDOS
ATT:
SHORELESS
SHORELESSPRODUCTIONS@HOTMAIL.COM
HTTP://SHORELESSPRODUCTIONS.BLOGSPOT.COM/
http://www.facebook.com/SHORELESS

Rosa

SHORELESS Vuelvo a repetirte que tu diseño es en porcentajes, con lo cual si pones una ancha en algunas pantallas se verá cortada... para hacer todo eso que dices es mejor escojas otro diseño... y yo ayudo en las dudas que van surgiendo en las entradas que publico y alguna cosa más, pero no puedo diseñar para cada uno...

F!X

Hola sabia Rosa, tengo una consulta:
Se puede editar el diseño del gadget "bloglist" y hacerlo de 2 o 3 columnas?
Cualquier respuesta sera agradecida.
¡Saludos!

Rosa

F!X Jimur te ha contestado en Vagabundia.

F!X

@Rosa
Gracias por el aviso, Rosa!!!
Son mis dos blogs de cabecera, estoy con el problema de tener muchos blogs en mi blogroll, los quiero ver a todos, pero no quiero tenerlos en una columna kilometrica. Lo malo es que si lo coloco en al pie sigue siendo una sola columna.
Imagino que no debo ser el unico loco con ese drama jaja.
Una vez mas, gracias por el aviso :D

Rosa

F!X ¡De nada! La verdad es que lo vi por casualidad revisando la ultima entrada de Jmiur :D

Luis Kasanova

Me funionó perfectamente!!!

Gracias Rosa!!! :)

4ever

Gracias Rosa!! me ha salido a la primera.

lo que entiendo es que en la pagina principal No sale pero Si en las entradas ?¿

asi es como me sale a mi:

en la pagina principal no me sale pero si una vez entras en las entradas.

es asi como debe salir?

Muchas Gracias

Rosa

4ever Así es como debe ser si, ya que el código está preparado para funcionar con cada entrada individual, por si se usase el "leer más" por eemplo...

Eligor!

Me parece muy bueno este post, ya lo aplicare a mi blog :P, por cierto Rosa, sabras alinear el texto hacia abajo? por que si os fijaras esta asi como para el lado! ;)

(http://jonathan-villavicencio.blogspot.com/)

Saludos! Muchas Gracias ! :)

4ever

Gracias Rosa !!

Rosa

Eligor! ¿De que texto hablas?...:O

Eligor!

Del texto que esta en las entradas del home..!
;)

Rosa

Eligor! Estás usando el "leer más con imagen" y así es como queda el texto con ese efecto añadido... todo seguido, lo siento pero no he encontrado solución a eso.

Eligor!

:(( , tendria que cambiar el script leer mas?

Rosa

Eligor! No veo porque... no se ve tan mal... hasta Gem@ y Vagabundia lo usan así...

Dr

Como hago para disminuir el tamaño de las letras del título de las "paginas"?
Muchas gracias desde ya!

Rosa

DrAquí puedes ver como personalizar esos enlaces:
http://gemablog-.blogspot.com/2010/03/personalizar-los-titulos-en-las-paginas.html

Driwrgy

Oups, he querido aplicar este truqui para aumentar o disminuir el tamaño del texto y me ha desaparecido la aplicación de la minuatura, resumen y opción a leer más... Menudo lío me estoy haciendo...
Besotes y gracias igualmente.
Cris.

Rosa

Driwrgy Eso es porque no está colocado el código en su lugar correcto...

Lionel

Hola Rosa, es la primera vez que comento. Tengo una duda, si ves en mi blog esta entrada veras que las imagenes quedan al lado del autor. ¿como hago para que el autor quede debajo?

Rosa

LionelEn lugar de colocarlo después de la línea que indico en el paso [3], coloca el código antes.

Lionel

Muchas Gracias!!!

Silvia Beatriz Giordano©

Hola Rosa: div class='post-header-line no existe en mi plantilla. Ya subí el scrip pero esa linea (despues de expandir artilugios) no existe. Mi blog: http://escobarlarevistaenlaciudad.blogspot.com
¡dónde pongo el resto? Ayuda!, santa salvadora mía

Rosa

SilviaTrata de localizar entonces algo así:
</h3>
<h2 class="date-header">

Coloca el código después de </h3>

sandivina

Buenas Rosa;
Verás he seguido las isntrucciones al pie de la letra y repasado en varias ocasiones y todo parece estar bien sólo que no se visualiza el efecto en mi blog, es decir, no aparecen los iconos más-menos para aumentar-reducir el tamaño de la fuente...puedes echarme un cable? porque realmente no sé a que es debido...
Gracias de antemano!!

Rosa

sandivina Se ven... solo que en la página individual de cada entrada, como debe ser...

Isaac Chavero

Hola Rosa, despues de istalarlos aparece los íconos, pero:

a veces se produce la acción de aumentar o disminuir y otras veces no se produce la acción de aumentar o dismimuir y Se abre una ventana con el texto: javascript:fontMais0 o una ventana en blanco

Rosa

Isaac Chavero No se porque pueda pasar eso... aquí no he notado nada... quizá algún otro script que interfiera... ni idea :S

malachuca

Hola Rosa, aquí estoy de nuevo. Volví a cambiar la plantilla y he tenido que volver a instalar todo de nuevo. La vez anterior me salió esto a la primera pero ahora me pasa como a Isaac Chavero. Yo creo que el error está en el último paso de la instalación porque en medio del código me encontré un cacho de otro y lo he saltado buscando la secuencia y resulta que había dos data-post-body con la terminación en div, y como daba error lo he borrado, se ha guardado, pero ahí están las Asese publicadas e impetérritas. Por favor, mira ver si lo puedes leer en el código fuente cuando te sobre un milagro de tiempo.

Un cordial saludo

Rosa

malachuca Hay cosas que desde el código fuente no puedo alcanzar a ver... en lo que puedo, lo veo todo correcto, así que no se decirte que podrá ser, aunque sospecho que quizá tenga que ver con un fallo en la colocación debido al "leer más", o que al colocar la nueva plantilla se ha quedado código por ahí de la anterior y eso te ha despistado... no se que decirte más concretamente...

malachuca

voy a repasar el código de leer más pq he visto que ha dejado de funcionar, te digo lo que sea

Silvia Beatriz Giordano©

Hola Rosa: pude solucionar el problema de la disminución del tamaño en los textos. Como tú dijites: eran los subtítulos. ¡¡Gracias Genia!!!

Roman

Holaa
he modificao todo lo que pone arriba pero no me salen los botones de aumentar
Ayuda porrfavor

Rosa

Roman Si has hecho todo tienen que salir... recuerda que no se ven en el home del blog, sino solo al ir a cada entrada.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S