<h3>Barrinha com efeito <span>Lupa</span></h3>

Ola amigos[a], Hoje o tutorial é simples, mas de grande utilidade. Adicione no seu blog uma barrinha onde aumenta o tamanho da font. Confesso que textos longos cansa a vista e com essa barrinha será de grande ajuda na leitura de textos longos e coloridos.

Clic e veja o Exemplo

------------------------------------------------------------------------------------- Copie o código abaixo, cole antes de </Head> Dany onde fica </Head>? Na Nova interface do blog, clic em Modelo, Editar Html, Prosseguir. Pressione a tecla Ctrl + F no seu teclado ou pressione o botão F3, na barrinha que surgiu escreva </Head> Observe que o código foi localizado agora copie o código abaixo cole antes de </Head>

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
var el = $('myElement'),
font = $('fontSize');
new Slider(el, el.getElement('.knob'), {
steps: 35, // Tamaño máximo de la letra
range: [8], // El 8 es el tamaño mínimo
onChange: function(value){
font.setStyle('font-size', value);
}
}).set(font.getStyle('font-size').toInt());
});
</script>

<style type='text/css'>
div.slider {
width: 220px; /* ancho de la barra */
height: 16px; /* alto de la barra */
background: url(http://media.tumblr.com/754637c20b22a4964fbc37b2c3e525ee/tumblr_inline_mfnm0pSJgg1qdlkyg.gif)
}
div.slider div.knob {
background: #48D1CC; /* color del selector */
width: 16px; /* ancho del selector */
height: 16px; /* alto del selector */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

Agora procure pelo seguinte trecho no Html do blog.

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

Após ter encontrado o adicione entre o código abaixo.
Veja o exemplo

<div id='fontSize'> </div>

O código deve ficar mais ou menos assim e salve.

------------------------------------------------------------------------------------- Para finalizar copie o código abaixo e cole em HTML/Java Script e salve. Dany onde fica Html/ Java Script? Na Nova interface do blog, clic em Modelo, Layout, Adicionar um Gadget, escolha a opção HTML/Java Script

<img src="http://media.tumblr.com/tumblr_meb634isof1qdlkyg.gif" /> Tamanho da Font <div id="myElement" class="slider">
<div class="knob">
</div>
</div>