Actualiza y mira excelentes tutoriales para que tenga una computadora mejor actualizada y seas la envidia de tus amigos. si vais a descargar algún programas y te pide contraseña al descomprimir es "jhonpcs"

Anuncio

Cambiar el tamaño de la letra del blog

Si tu blog es de noticias, historias, textos, novelas, etc. (en resumidas cuentas, es un blog en el que se tiene que leer) es bastante eficaz y cómodo que el visitante pueda cambiar el tamaño de la fuente para que pueda leer bien el texto.
Si quieres ponerlo en tu blog, sigue los siguientes pasos:

Primero, entra en "Diseño", "Edición de HTML" y sin expandir artilugios pega antes de </head> el siguiente código:



<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>

Puedes modificarlo a tu gusto cambiando el valor de width: 220px para que la barra sea más grande o más pequeña. Cambia también el valor de height: 16px para que la barra sea más grande o más pequeña. Cambiando el valor de background: #eee puedes modificar el color de la barra.

En la zona de código de más abajo, cambiando el valor de background: #0080FF puedes cambiar el color del selector. Modificando el valor de width: 16px puedes cambiar el ancho del selector y cambiando el valor de height: 16px puedes modificar la altura del selector

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>

Para finalizar, entra en "Diseño", "Elementos de la página", añades un nuevo gadget de HTML/Javascript y pegas 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>

Puedes cambiar este texto "Mueve la barra hacia los lados para cambiar el tamaño de la letra." por el texto que quieras mostrar.

Con esto que hemos hecho, solo varía el tamaño de la letra de las entradas, pero no el de la letra de las otras partes del blog (sidebar, cabecera...).

Si deseas que también cambie el tamaño de la letra de todo el blog, 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 -->

De esta manera:

<div id='fontSize'>
<div id='content-wrapper'>
<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:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='HTML3' locked='false' title='Contador de visitas' type='HTML'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
<b:widget id='Text1' locked='false' title='Red de Blogs' type='Text'/>
<b:widget id='Gadget2' locked='false' title='Comentarios' type='Gadget'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div>
<!-- end content-wrapper -->

Espero te aya Funcionado no olvides compartir con tus amigos

Share:

Anuncio

Entradas populares

Archivo del blog