Cambiar el tamaño de la letra con una barra de desplazamiento

3 de junio de 2010 122 comentarios ,
Ya antes vimos dos opciones para cambiar el tamaño de la letra del blog, en cualquiera de los dos se tiene que hacer click en un tamaño para que se aplique la medida de la fuente. En esta opción el cambio del tamaño es gradual y es usando MooTools, una librería Javascript de efectos.

Puedes ver un ejemplo en este blog de pruebas, en la sidebar verás una barra, usa el selector para cambiar el tamaño de la letra, desplazalo hacia la derecha para agrandar el tamaño, y hacia la izquierda para hacerla más pequeña.

Antes de pensar en ponerlo considera que MooTools al igual que otras librerías no es compatible con otros scripts, así que si usas Scriptaculous o jQuery seguramente no funcionará.

Ahora sí, entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
steps: 35, // Tamaño máximo de la letra
range: [8], // El 8 es el tamaño mínimo
onChange: function(value){
font.setStyle(&#39;font-size&#39;, value);
}
}).set(font.getStyle(&#39;font-size&#39;).toInt());

});
</script>

<style type='text/css'>
div.slider {
width: 220px; /* ancho de la barra */
height: 16px; /* alto de la barra */
background: #eee; /* color de la barra */
}
div.slider div.knob {
background: #0080FF; /* color del selector */
width: 16px; /* ancho del selector */
height: 16px; /* alto del selector */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

Luego busca esta parte y agrega lo que está en color rojo:
<div id='fontSize'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
</div>

Por último entra en Diseño | Añadir un gadget | HTML/Javascript y pega esto:
<div id="myElement" class="slider">
<div class="knob"></div>
</div>
<p>Mueve la barra hacia los lados para cambiar el tamaño de la letra.</p>

Con eso el tamaño de la letra de las entradas cambiará desplazando el selector de la barra de un lado a otro. Si deseas que también cambie el tamaño de la letra de todo el blog entonces la primera línea en color rojo deberá ir antes de <div id='content-wrapper'> y la otra parte roja antes de <!-- end content-wrapper -->

Puedes cambiar el aspecto de la barra y el selector modificando lo que se indica en color verde.
Sin duda es un método muy elegante para cambiar el tamaño de la letra del blog que el lector agradecerá.


122 comentarios en:

" Cambiar el tamaño de la letra con una barra de desplazamiento "

  1. ooh, Excelente Potro ;)
    Lo agrege a mi sidebar...
    Saludos mil gracias :D

    ResponderEliminar
  2. Veo que te decidiste por el método anterior, por cierto, el gadget que hace que aparezcan ventanas popup son los de los contadores web.

    ResponderEliminar
  3. mmm, Ise todo bien segui al pie de la letra los pasos, pero, mira mi blog y vee, no me funciona :(
    http://www.carlitocomparte.blogspot.com/
    Saludos

    ResponderEliminar
  4. Es porque tienes jQuery y como mencioné antes, con estas librerías no funcionará.

    ResponderEliminar
  5. Wow! que bonito!! Nunca imaginé que se pudiera hacer algo así o_Ó

    Un pregunta Bro... no entiendo mucho eso de las imcopatibilades ¿cual es el conflicto?

    Un abrazo!!!

    ResponderEliminar
  6. Pues por las funciones entre los distintos scripts, cuando están juntos deja de funcionar uno, es por eso que quienes tengan otras librerías podrá no funcionar o podrá dejar de funcionarle otra cosa.

    Un abrazo!

    ResponderEliminar
  7. Ahhh.. entiendo, leí en muchos de tus post que no eran "compatibles" ,pero no sabía porque... gracias Bro!!!

    Un abrazo!!!

    ResponderEliminar
  8. hola potro:
    perdon que me salga de tema pero quisiera saber que hacer para tener un gadget de "ultimos articulos" como el que tiene tu,
    espero que me puedas ayudar gracias

    ResponderEliminar
  9. Está muy original esta manera de ajustar la fuente.

    Un saludo

    ResponderEliminar
  10. zona lerth, aquí hay una forma sencilla de hacerlo.

    Oloman, sí, aunque es una lástima que no sea compatible con otras librerías.

    ResponderEliminar
  11. Muy bueno lo vi y me puse a jugar jajaja en tu blog de pruebas
    bueno me fascino eso que dice debajo de Ciudad Blogger

    ESTA ciudad no discrimina ni persigue latinos
    eres parte de la gente en contra de la ley de Arizona esa Ley RACISTA MAL PENSADA

    ResponderEliminar
  12. Mas que estar en contra de alguna ley estoy a favor de la igualdad.

    ResponderEliminar
  13. Qué bonito es lo que dices al final, y qué poca gente tiene la sensibilidad e inteligencia suficientes para saber distinguir la diferencia entre una cosa y otra.
    Además de facilitarnos la vida con tus conocimientos sobre todo esto que a tantos nos queda tan lejanos, encima das lecciones de ética humana. "A la vista estaba", evidentemente.
    Un regalo tenerte cerca, Potro.
    gracias.
    Un abrazo

    ResponderEliminar
  14. Gracias Sofía, es para mí el regalo y el placer de tenerlos siempre cerca, no por el número de visitas que pueda tener este o cualquier otro blog, sino porque con comentarios como el tuyo recordamos que no somos computadoras que suben y bajan datos, sino que somos humanos con las mismas necesidades y cada uno con excelentes virtudes.

    Un abrazo.

    ResponderEliminar
  15. Que onda POTRO,pss fijate que necesito tu ayuda,kisiera ver como le hago pa hacer mas ancho el lugar de mi post,por ejemplo kiero poner un chat aqui en un blog,pero el ancho de la entrada no abarca bien fijate en la foto como lo kisiera!
    dCHECATE LA FOTO AQUI

    ResponderEliminar
  16. Para no eliminar por completo la sidebar podrías reducir su ancho a cero. Sería buscando el contenedor de ella, generalmente #sidebar-wrapper y buscar ahí el ancho (width) y cambiar el valor que tenga a 0px
    Luego el contenedor de las entradas, generalmente llamado #main-wrapper cambia su ancho (width) por un valor más alto.

    ResponderEliminar
  17. Eh potro mi blog es http://elrincondemario6.blogspot.com/ podrías echarle una mirada y de paso sigues mi blog

    gracias de todos modos por todas formas garcias por todas las cosas que pones que me hacen inspirarme en muchas otrAs


    UN SALUDO ¡¡¡

    ResponderEliminar
  18. Oie Potro
    tengo una dida en la entrada
    http://ciudadblogger.com/2010/02/yahoo-media-player-reproductor-de-mp3.html

    Lo que apsa esque queria ocultar la musica
    pero el codigo que em distes de
    #etc
    ya no me sirve ise todo lo que dices en el Tuto pero ni aun asis e puede te dejo mi nuevo blog http://wweenvivoenespanol.blogspot.com/

    ResponderEliminar
  19. Debe de seguir sirviendo el código a menos que Yahoo ya haya hecho alguna actualización del script. Pienso que quizá algo estás poniendo de más o de menos, te sugiero que lo intentes otra vez.

    ResponderEliminar
  20. Potro , me sirvio bastante! ahora lo que pasa es que cambie de plantilla y lo borre =P pero me sirvio y mucho ;)

    www.hacks2010.blogspot.com =D

    ResponderEliminar
  21. Potro , tengo un problema . Con respecto al post de "ponder flecha de subir y bajar" o algo asi , no me funciona para ir para abajo :S . Dime que puedo hacer!

    www.hacks2010.blogspot.com

    ResponderEliminar
  22. Cambia #footer-wrapper por #footer
    Con eso ya estará funcionando esa flecha ;)

    ResponderEliminar
  23. muy bueno, lo agregare a mi blog gracias potro ;)
    aprovecho para hacerte una consulta, tal vez tu me puedas ayudar

    Cuando un blog lleva mucho tiempo con un solo nombre y de un momento a otro se cambia este, por ejemplo solovampiros y le adjunto Solovampiros - Latinox
    hay algùn problema afecta al sitio de alguna manera? o hay perdida de visitantes?

    Un saludo

    ResponderEliminar
  24. Si cambias la dirección del blog (URL) sí tendrás problemas pues perderás las visitas, el PageRank que tenías y el posicionamiento en la Web.
    Si sólo cambias de nombre no habrá mucho problema, en pocos días los buscadores actualizarán la información y no pasará a mayores.

    Saludos.

    ResponderEliminar
  25. Gracias Potro tenia mis dudas en cambiarlo

    ResponderEliminar
  26. hola potro queria hacer te una consulta neceito hacer algo y no soy capas y nesesito una manito..estoy empezando a crear un nuevo blog pero no he podido con una modificacion. te dejo una captura con la explicacion de problema por si me puedes ayudar..
    http://i46.tinypic.com/qr0waw.jpg

    te antemano gracias

    ResponderEliminar
  27. ahh se me olvidaba las direccion del blog es http://www.peliculas-online.in/

    ResponderEliminar
  28. Nunca he probado esa plantilla por lo que no sabría decirte cómo funciona. Puedes intentar modificar el tamaño de:
    img_thumb_height = 100;
    img_thumb_width = 100;

    Ese se supone que es el tamaño de las imágenes en miniatura.

    ResponderEliminar
  29. Hola Potro, como siempre, excelente blog.
    Sabes que he tratado de instalar la librería jquery en blogger y no pude de ninguna manera.

    Tal vez este equivocando los pasos, por eso te agradeceré un pequeño tutorial sobre el modo correcto de hacerlo.

    Muchas gracias y un nuevo abrazo desde Uruguay

    ResponderEliminar
  30. Depende de qué quieras agregar, en sí la librería básica sólo se agrega poniendo antes de </head> esto:
    <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>

    A partir de ahí depende de qué plugin quieras agregar pero casi todo es el mismo procedimiento.

    Saludos.

    ResponderEliminar
  31. Exacto, ese detalle, aunque evidente, es el q necesitaba.

    Muchas gracias Potro.

    ResponderEliminar
  32. no le queda ami nueva plantilla esta muy rara

    ResponderEliminar
  33. No sé en cuál blog lo hayas querido poner pero si usas jQuery no te funcionará.

    ResponderEliminar
  34. Hola el potro mi blog es este http://technologicaldata.blogspot.com/ mi duda es que yo implemente la barra de desplazamiento para cambiar el tamaño del texto pero mi problema es con los navegadores con mozilla y google chrome no tengo problemas pero con opera la barra aparece al minimo y con las letras muy pequeñas y con internet explorer la barra aparece al maximo y con la letra del blog muy grande. me gustaria como establecer un tamaño por defecto de la letra y que la barra aparesaca en el lugar correspondiente.

    ResponderEliminar
  35. Hola Felipe,

    Lamentablemente Mootools no tiene una solución para ese problema, pues sucede así con esos navegadores desde hace ya un tiempo y hasta la fecha no aparece algún script o modo para arreglarlo :\

    ResponderEliminar
  36. Hola Potro, sabes que me aparece todo el bloque del segundo paso pero no esta partecita: div id main wrapper, intente hacerlo asi aún pero no pude. Desde ya gracias y saludos!

    ResponderEliminar
  37. En el caso de las plantillas del diseñador hay que buscar este código y agregar lo que está en negrita:

    <div id='fontSize'>
    <div class='column-center-outer'>
    <div class='column-center-inner'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
    </b:section>
    </div>
    </div>
    </div>

    ResponderEliminar
  38. Potro, al final decidí modificar mi plantilla, ya que el problema con los COMENTARIOS no encontré solución alguna, ¿recordás que había un problema con extraer y contraer artilugios?. Bueno, eliminado y puesto ahora una plantilla EXTRA-SIMPLE 2 que me otorga Blogger.

    El tema es que la plantilla es muy simple y tiene códigos que no aparecen ahí, ya que es diferente su estructura.

    Es por eso que EL CÓDIGO SEGUNDO [EL QUE HAY QUE AGREGAR DOS MÁS EN SUS EXTREMOS] no se encuentra en mi plantilla, entonces: ¿QUÉ DEBO BUSCAR PARA COLOCAR ESTE CÓDIGO DE NO TENERLO?.

    Muchas gracias de antemano.

    ResponderEliminar
  39. Mira el comentario anterior al tuyo, ahí está el código de ejemplo para las plantillas nuevas de Blogger.
    Saludos.

    ResponderEliminar
  40. Hola Potro, mil gracias por este post, los que padecemos presbicia galopante sabemos lo frustrante que resulta no poder leer bien los textos de los blogs.
    Ya lo había leído cuando lo publicaste, pero hasta ahora casi no he tenido tiempo de entretenerme en ponerlo.
    Funciona a la perfección.
    No quiero abusar, pero de camino te pregunto cómo podría aumentar los nombres de las páginas estáticas, siempre termino poniendo las cosas muy discretamente en cuanto a colores y demás (qué se le va hacer, tonta que es una, :), así que me gustaría poder darle más visibilidad aumentando el tamaño de la letra, aunque no sé si tendría que cambiar también el tamaño de la barra en sí . Se que es en el artilugio , pero no sé cómo introducir lo del tamaño. Si fueras tan amable, te lo agradecería.
    Un beso enorme, y de nuevo muchísimas gracias por esta ayuda que nos prestas.

    ResponderEliminar
  41. Hola Sofía,

    Entiendo muy bien la frustración de no leer bien los textos pues de tanto tiempo de estar frente a la computadora y con la edad mi vista está cada vez peor.

    Sobre el aumento de esos títulos depende... si quieres hacer que el gadget sólo aumente los títulos de las páginas no es posible, pero si deseas aumentar el título de las páginas aun sin el artilugio entonces sí es posible, pero no sé cuál de las dos opciones sea la que estás buscando.

    ¡Besos!

    ResponderEliminar
  42. :), no consigo enterarme de lo que me preguntas, potro, :), esto no es presbicia esto es dura de mollera, jeje.

    Creo que más o menos me queda claro que si no cambio el tamaño del recuadro no puedo cambiar el tamaño de las letras, ¡no?...por si acaso y no te importa, aquí te dejo el enlace a mi blog (es que ahora estoy logueada con el otro)
    http://sofiaserragiraldez.blogspot.com
    tú míralo si puedes, yo sólo quiero que se vean un poquito más grandes, casi preferiría incluso que el tamaño de ese gadget aumentara un poco, en vertical, ya sabes, porque normalmente si coloco en la sidebar un reproductor de ipernity se lo come (no se bien por qué). Siempre ando enredada con ese gadget, no consigo que me quede bien nunca, no me gusta como "figura", por eso ya le he puesto fondo blanco y le he quitado el borde, pero no consigo quitarle las rayas verticales, pero bueno, eso es igual)
    Si me haces el favor de mirarlo, pues como tú mejor veas, me dejas dicho lo que tengo que hacer para que se vean un poquito más grandes y seguro que así estará bien..:), no soy "delicá", te lo prometo, :D
    Un beso y mil gracias por contestarme tan pronto

    ResponderEliminar
  43. El alto de la barra sí puede modificarse, eso se hace donde dice:
    height: 16px; /* alto de la barra */

    Ahí puedes cambiarlo por otro valor, como por ejemplo 24px
    Al mismo tiempo debes cambiar y agregar el mismo valor donde dice:
    height: 16px; /* alto del selector */

    Aún sigue sin quedarme muy claro lo de los títulos, ¿quieres que los títulos de las entradas sean más grandes, o que los títulos de las páginas estáticas sean más grandes, o que los títulos del menú (donde están las páginas estáticas) sean más grandes?

    ¡Besos!

    ResponderEliminar
  44. :D, qué risa, Potro...yo sólo quiero que los títulos de las páginas estáticas tengan la letra más grandecita. Ya'stá, :), sólo eso, porque es que parecen hormigas pululando por debajo de la cabecera, :D, es hasta antiestético, :)
    Gracias por las otras cosas que me dices, intentaré hacer algo , a ver si soy capaz

    ResponderEliminar
  45. aah!, que me dices lo de las "gafas" (es que le he puesto el nombre de gafas a lo de aumentar la letra.:D..sí, eso sí, pero me gusta como tú lo has puesto, está discreto y así no se confunde con el alto de las barras de los reproductores.
    Disculpa, :)
    Gracias otra vez

    ResponderEliminar
  46. Jajaja, bueno, a ver si ahora sí nos entendimos :P
    Para agrandar el títulos de las páginas estáticas pega antes de </head> lo siguiente:

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style type="text/css">
    h3.post-title {
    font-size: 20px;
    }
    </style>
    </b:if>

    Cambia ese 20px por la medida que deseas. Guarda los cambios y entra a una página estática para ver los cambios.

    Saludos!

    ResponderEliminar
  47. Potro, discúlpame, por favor, me expresé mal. Intentaba referirme a todo el menú, , quiero decir a tal como se ven las páginas estáticas desde la principal, no sé si sigo sin explicarme, tal como se ven todos los letreros juntos, ese gadget donde en mi página aparece: Pagina principal, mis poemarios, sobre mí brevemente, etc..pues todo eso, ese gadget que meto debajo de la cabecera, si hay forma de cambiar en él el tamaño de las letras, imagino que irá en el mismo gadget, ¿no?, pero no sé qué debo añadir.
    Lo que me has puesto funciona a la perfección aunque ahora mismo no lo pretendía, pero lo dejo insertado en la plantilla por si acaso.
    Muchas gracias
    :)))
    buenos días acá.

    ResponderEliminar
  48. Dicen que la tercera es la vencida, así que espero que ahora sí le haya atinado a tu pregunta :D
    Agrega antes de ]]></b:skin> este código:

    #PageList1 li a {font-size: 20px;}

    De igual modo cambia ese 20px por el tamaño que desees.
    Buenas noches acá, me voy a dormir :)
    ¡Besos!

    ResponderEliminar
  49. siiiiiiii!!!!!!...Muchísimas gracias, Potro, YA!!.
    permíteme, es la única forma que se me ocurre de poder expresarte mi agradecimiento por todo lo que haces, por tu generosidad siempre viva:

    El hombre potro

    Y el último potro que corretea en el valle poblado
    de verdes y a veces negros almanaques
    trota junto a las flores
    y salta y brinca cabeceando
    cada brillo de sus ojos,
    cada jerga de sus crines
    desmenuzando en sustancia aérea
    que da vida a las nubes, las cuales,
    agradecidas al darse por nacidas,
    se posan en sus francos flancos,
    y alas que vuelan, el potro
    de castaño, de madera y tierra,
    de pezuñas a cielo,
    culmina su alegría
    izando el paso
    al eco de las montañas que cantan
    a su trote, a su vuelo, a su risa:
    ¡Ha nacido Pegaso, ha nacido Pegaso!

    Sofía Serra, 23 nov 2010

    :)))
    Un abrazo y un beso enorme

    ResponderEliminar
  50. No sé qué decirte, me he quedado atónito.
    ¡Qué talento mujer! ¡Y qué detalle!
    No tienes idea de lo especial que me has hecho sentir y lo agradecido que estoy.
    De verdad, mil gracias.

    ¡Un beso grande!

    ResponderEliminar
  51. Es que tú eres especial, Potro, ¡túuuu!, :)))))
    MMUUUAAA
    y un abrazo muy fuerte

    ResponderEliminar
  52. Qué linda. Nuevamente GRACIAS!!!
    Besos!!!!

    ResponderEliminar
  53. saludos potro... una pregunta... se le podrá cambiar el tamaño si tuviera un objeto flashplayer? o alguna foto? refurmulare mi pregunta...!! puede hacerse que cambie el tamaño de un reproductor de flash player cambiandole alguna variante?

    ResponderEliminar
  54. es q solo cambia la letra y yo necesito q cambie una imagen flash player... podras ayudarme con esto? es q ya me falta poco para terminar mi proyecto pero necesito estos truquitos!! luego te doy el enlace para q veas de lo que te hablo!! y porsupuesto para ofrecerte algo q se que te va a gustar!

    ResponderEliminar
  55. No creo que sea posible ya que todos estos métodos cambian los valores CSS de la plantilla pero un objeto flash no es un estilo CSS sino justamente un objeto.
    Saludos y suerte con el proyecto!

    ResponderEliminar
  56. gracias por tu ayuda en comentarios encontere el codigo para plantilla hechas con el diseñador aunque despues de buscarla de forma personal en toda la plantilla bue .. eso es por no leer los comentario..

    una duda .. me interesaria saber

    en algunos codigos que use aparecen indicaciones como

    xxxcodigo /*esto es para el color de letras */

    como se los pone para que no aparezcan como cartelitos arriba del blog ...????
    a por cierto tambien .. como hago para dejarte codigos en los comentarios??? es que me aparece carteles como codigo no valido DIV y otros por el estilo ...
    a por favor avisame en un comentario en cualquier entrada de mi blog si mi preguntas obtubieron respuestas ...


    http://jugamoscityville.blogspot.com/

    ResponderEliminar
  57. Hola hecgabor,

    No he entendido lo de los cartelitos arriba del blog, ¿me podrías explicar con más detalles?
    Para poder dejar códigos en los comentarios mira esta entrada.

    Saludos.

    ResponderEliminar
  58. como sabras los codigos de detalles como colores .. tamaños y demas van antes de /head bien en algunas instrucciones como la de este post tienes estas opciones para modificar entre otras copmo

    /* ancho de la barra */
    /* alto de la barra */
    /* color de la barra */

    como debo poner estas aclaraciones en mi plantilla de modo que no afecte la visualizacion

    veras en esta imagen

    http://3.bp.blogspot.com/-NrfzBzsaTIQ/TbrQkznLX0I/AAAAAAAAAa0/s6Ont2ZFwgA/s1600/letra.bmp

    veras arriba de la barra de blogger que dice

    /*tamaño de letras */

    a eso es lo que me referia ...

    pues quisiera poner aclaraciones en los codigos que voy agregando

    como
    /*inicio de codigo de barra de dezplazamiento */
    ---codigo .---

    /* fin de codigo de barra de dezplazamiento */

    espero haberme explicado .. gracias ...

    ResponderEliminar
  59. por cierto desmodifique con este codigo mi plantilla ya que en navegadores viejos superpones la columna lateral al cuerpo de la entrada ...

    ResponderEliminar
  60. Ok, ok. Te explico:
    Cuando el comentario de las indicaciones va antes de ]]></b:skin> se pone así:

    /* Comentario */

    Y cuando es un código que va antes de </head> el comentario se pone así:

    <-- Comentario -->

    ResponderEliminar
  61. QUE LASTIMA QUE UTILIZO SCRIPTACULOS, ESTARIA CHULISIMO PARA BI BLOG DIRECTORIO TELEFONICO, AUNQUE NO SE SI FUNCIONARIA PARA LAS LETRAS DE LOS WIDGET DE LISTA DE ENLACES, PERO ESTA CHULISIMOOOOOOOOOOO

    ResponderEliminar
  62. Buen efecto ¿no? pero sí, lamentablemente esa librería de scripts no se lleva bien con las demás.

    ResponderEliminar
  63. no me funciona D: ... y como uso jquery puede que no sea compatible... pero para evitar este problema use el truco de este link http://goo.gl/gg5k1 pero aun asi no me funciono esto de cambiar la letra >.<!

    ResponderEliminar
  64. Pues yo lo veo funcionando perfecto en tu blog, al recorrer la barra se hace más grande el texto de las entradas.

    ResponderEliminar
  65. se!! lo acabo de arreglar el problema era que debajo del /head tenia un codigo que era parte del menu de mi blog, y resulta que al quitar ese codigo, funciona perfecto!... el drama es que ahora mi blog no abre en internet explorer xD

    ResponderEliminar
  66. Hola potro me gustaria cambiar lo azul por una imagen como hago eso..?

    ResponderEliminar
  67. Cambia esto:
    background: #eee; /* color de la barra */

    Por esto:
    background: url(URL de la imagen);

    ResponderEliminar
  68. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  69. No encuentro el segundo apartado el codigo... que hago?

    ResponderEliminar
  70. En el www.pequemundossims.blogspot.com

    ResponderEliminar
  71. Quizá lo tengas así:
    <div class='main' id='main'>

    Fíjate en la cuarta línea (tres después de la primera roja), esa aparece en todas las plantillas, así podrás identificarlo.

    ResponderEliminar
  72. Hola potro cuando voy he puesto la imagen cambia el fondo pero no lo azul..

    Yo quiero que cambie lo azul pero no el fondo..

    ResponderEliminar
  73. Hola potro he puesto el gadget pero no se mueve que hago?

    ResponderEliminar
  74. Recuerda que la barra usa Mootools, y no es compatible con jQuery o Scriptaculous.

    ResponderEliminar
  75. Hay potro veo tantos trucos que me gustan y nomas no me funcionan algunos, me hace falta el codigo <div id='fontSize' pero veo que esta dentro del <body de la entrada, <div class='entry' o tambien tengo <div class='post-body entry-content' ¿Puedo colocarlo en alguna de ellas? :) Saludos

    ResponderEliminar
    Respuestas
    1. Prueba ponerlo alrededor de:
      <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>

      Eliminar
  76. No funciono :( pero gracias de todos modos potro estaré pendiente si luego se podrá de otra forma :) Saludos

    ResponderEliminar
    Respuestas
    1. Habría que ver en cuál blog lo has puesto para saber porqué no te ha funcionado.
      Saludos.

      Eliminar
  77. Hola me encantan tus tutoriales y este es genial! a la segunda por fin me aparecio la barra, esta es la primera vez que pongo un gadget, pero la barra no se mueve no se cambia la letra no se que hacer lol. mi blogg es http://babblingbio.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Mika Reynoso, entré a tu blog pero supongo que ya lo has resuelto porque he probado la barra y funciona perfecto. Cualquier cosa me avisas.
      Saludos!

      Eliminar
  78. ¡Hola!

    Esta muy guapo, me quedare con las ganas de tenerlo.

    Yo no tengo script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/
    Intente hacer esto, pero… Solo he conseguido que me suba y me baje donde dice Entradas antiguas y Página principal xD

    ResponderEliminar
    Respuestas
    1. Usa un parche para tu script de jQuery, así podrás usarlo con este de Mootools.
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  79. Hola Potro, igual no es ésta la entrada, pero quería preguntarte cómo cambiar el tamaño por defecto de la letra que aprece en los post publicados.
    Al publicar, me da la sensación de que la letra de las entradas es más pequeña que en mi plantilla anterior.
    ¿Puede ser?? en caso afrimativo, ¿se puede cambiar???

    Gracias majoooooo

    ResponderEliminar
  80. se me olvidaba...mi plantilla:

    http://design-office-blogtemplate4u.blogspot.com.es/

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Gorka. Debes tener una variable que se llama name="body.font" dentro de ella debe estar un 12px quizá dos veces, cámbialos por el tamaño que quieras.

      Saludos.

      Eliminar
  81. GRACIAS POTRO!!! Lo único es que me afecta a TODAS las letras del blog (enlaces, etc...). Es normal??? Se puede hacer que afecte sólo al texto standar de las entradas???

    Gracias

    ResponderEliminar
    Respuestas
    1. Es normal, porque las entradas no tienen una fuente definida. Si quisieras definir una fuente sólo para las entradas entonces tienes que agregar esa declaración:
      .post-body {
      font-size:13px;
      }

      Eliminar
  82. Qué bien suena eso!!! jeje thanks

    Y dónde agrego ese código??? en qué parte exáctamente de la plantilla???

    gracias

    ResponderEliminar
    Respuestas
    1. Antes de ]]></b:skin> recuerda que todo lo que son estilos van antes de ahí.

      Eliminar
  83. Gracias una vez más Potro!!!! Eres la leche!!! Lo he probado justo antes y tb en la zona de /post/ y funciona en ambas (en el blog de pruebas), Pero da igual en qué parte antes de "b:skin"?????
    Antes de guardar me gustaría que me lo confirmases plis.

    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Da igual, pero tú mismo puedes comprobarlo dando Vista Previa, no hace falta que te lo confirme ;)

      Eliminar
  84. Ok perfeco entonces jeje

    Gracias!!!

    ResponderEliminar
  85. Pregunta podria quitar el sidebar y poner esto encima del juego para ampliar el tamaño como tienen muchas webs de juegos?
    Ejem http://juegossdebobesponja.blogspot.com.es/2011/06/bob-esponja-bomberman.html

    ResponderEliminar
    Respuestas
    1. Podrías ponerlo encima de las entradas, pero no ampliará el juego, sólo el texto. Si deseas hacerlo sólo arrastra el gadget justo arriba de las entradas.

      Eliminar
  86. Ok muchas gracias por tu ayuda, ¿tienes alguna idea como hacerlo para el juego?

    ResponderEliminar
    Respuestas
    1. No admin, a decir verdad nunca he visto algo parecido para los archivos en flash.

      Eliminar
  87. http://es.y8.com/games/bomb_it_4
    Aqui tienes un ejemplo me han dicho algo de xscale e yscale, pero no se

    ResponderEliminar
    Respuestas
    1. Pues veo el ejemplo pero no encuentro en el código fuente cómo funcione. A ver si después con más tiempo veo si encuentro alguno en la red que tenga más indicios de cómo funciona.

      Eliminar
  88. Ok muchas gracias por tu interes

    ResponderEliminar
  89. Me funciona perfecto, pero cuando lo pongo dejan de funcionar otras cosas :(

    ResponderEliminar
    Respuestas
    1. Debe ser porque usa Mootools, el cual es incompatible con otras librerías como jQuery y Scriptaculous.

      Eliminar
  90. Hola potro! Tengo un problema.. Segui todos los pasos pero cuando quiero mover la barra esta bloqueada! Gracias y espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola, ¿en cuál blog lo has puesto? ¿has revisado si usas jQuery o Scriptaculous? ya que ambas librerías de scrips no son compatibles con Mootools :(

      Eliminar
  91. Potro:
    Como puedo solamente cambiar el tamaño de las letras de las PAGINAS y no del texto de las entradas.
    Gracias como siempre.
    este es el blog odontologiacastor.com

    ResponderEliminar
    Respuestas
    1. ¿Te refieres al gadget de Páginas? Si es así entonces se cambia con este código:
      #PageList1 ul li a {
      font-size: 40px;
      }

      Eliminar
  92. Me funciono perfectamente....Gracias

    ResponderEliminar
  93. Si yo que soy la administradora lo pongo en un tamaño concreto, ¿se queda fijo para todos los usuarios que entren a ver el blog, o se vuelve al tamaño original?

    Gracias.

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a la barra? No, el tamaño de la letra que cargará para todos los usuarios será el que tengas configurado en la plantilla, la barra hará que de manera individual cada quién cambie el tamaño según sus necesidades, pero no se establece un tamaño generalizado para todos.

      Eliminar
    2. Hola Potro, seguiré intentandolo, pero por si acaso te dejo el marrón; he conseguido insertar el gadget, la barra deslizante se mueve, pero no cambia el tamaño de las letras, ayuda plis, gracias de antemano y enhorabuena por tu blog, inspiracion para otros futuros globeros, saludos.

      Eliminar
    3. Hola Ramon, ¿en cuál blog lo has puesto?

      Eliminar
  94. Referente al comentario anterior;
    ¿puede ser el causante de que no amplie o reduzca el hecho de qué?
    este elemento no lo encuentro :
    por lo tanto: , no esta agregado al codigo, he intentado ponerlo en varios sitios que coincidian con las dos siguientes lineas del codigo a buscar,

    ,
    pero de ninguna forma me ha funcionado, les dejo la direccion del blog, gracias.
    http://isidorosenelmundo.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Ramon, no había visto este comentario. Por tu tipo de plantilla debes seguir la instrucción del comentario #39
      Saludos.

      Eliminar
    2. Muchas gracia Potro, solucionado, tendria que haber leido el post entero y quizas hubiese visto la solucion al problema, queria comentarte para futuros casos que se te planteen, que una vez que puse los dos codigos que indicas, me salia un error de compilacion, me pedia un div entre las dos ultimas entradas del codigo, casi al final; /script y /body, al meter el div, se soluciono, espero te sirva, un saludo, gracias y seguimos en contacto seguro.

      Eliminar
    3. (este es el segundo coment de hoy, anterior sobre las 21 horas)
      Hola de nuevo Potro, con tu ayuda seguro que se arregla, el problema es que funciona perfectamenta la barra de cambio de fuente, solo en la ultima entrada del blog, en otra entrada me amplia los comentarios y creo que las otras dos que quedan, no hace nada, lo dejo en tus manos, gracias otra vez y las veces que haga falta.

      Eliminar
    4. Hola Ramon, es porque el gadget te cambia la letra siempre y cuando no hayas establecido tú un tamaño dentro de la entrada. En el caso de las otras tienes definido un tamaño de letra para tus párrafos. Por ejemplo, en cada párrafo tienes esto al inicio:
      <span style="font-size: small;">

      Eso indica que ese párrafo tenga un tamaño pequeño de fuente, por lo tanto el gadget respeta esa propiedad y no cambia nada.
      Saludos.

      Eliminar
    5. Hola de nuevo, Potro, ¿sabes alguna solucion al problema?, gracias.

      Eliminar
    6. 2º coment dia 7, Hola de nuevo Potro, creo que me contesto yo mismo, editando cada una de las entradas y borrando todo lo concerniente a (style="font), lo que ocurre es que es muy laborioso, entonces la pregunta para un especialista como tú es, ¿por qué me ha pasado esto?, gracias ooootra vez.

      Eliminar
    7. Hola de nuevo Ramón. Cuando uno redacta una entrada puede cambiar el tamaño de la letra desde las mismas herramientas del editor de entradas, pero si tú no lo hiciste entonces debe ser que ese texto lo copiaste de otro lado, ya sea de otro blog, o de un editor de textos como Word. Cuando eso sucede, al copiarlo se copian también estilos, como tipo de letra, negritas, colores, y también el tamaño de la fuente. Para evitar eso, cada vez que copies el texto de otro lado, al momento de pegarlo en tu entrada hazlo estando en la pestaña HTML y no en Redactar, de esa forma no se incluirán los estilos en tu texto.
      Para las entradas anteriores no queda de otra que eliminar entrada por entrada todas las partes donde tienes declarado un tamaño de fuente para esos textos.

      Buen inicio de semana,

      Eliminar
    8. Hola de nuevo Potro, estas en lo cierto, empecé el blog y creé paginas, en vez de entradas, como no conseguia ponerlo como me gustaba, me hice otro blog y copié de uno al otro, bueno, que ya lo tengo arreglado gracias a ti, enhorabuena por tu blog y que sepas que eres una gran ayuda para los que intentamos tener un blog mas o menos en condiciones, gracias.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger