New Font Size Controller for Blogger

New Font Size Controller for Blogger | https://tipsandtricksfor.blogspot.com/2011/05/new-font-size-controller-for-blogger_14.html

Hhh.... Finally, after a Blogger ERROR, we can write a new post. OK, now we will learn about New Font Size Controller for Blogger. Maybe you have tried How To Add Text Resizer In Blog. The function of this New Blogger Font Size controller is the same with Text Resizer. It's to change the font size of your blog. OK, to know the steps, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates"
4. Copy the code below, and paste above </head>

<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: 97%;
height: 26px;
background: url(http://1.bp.blogspot.com/-uJtP4Udla1s/Tc5VAzHAJSI/AAAAAAAAAZA/ou62rfIOdiA/s1600/slider-bg.gif) no-repeat right top;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #708B95;
margin-top:40px;
}
div.slider div.knob {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBXocPmk5m0yrdrcBs0RZkzNJsCoBMddo6fDPvTyagU-WeGQjIR0yECbmdibRaWlXU9faflC3lzKTjfgIuoUUOG2Z4ysRCQ16DuTtRebwQqoYbJ4tgouxgOs-UAnMJOr_kPTVHFwxpyFQ/s400/allblogtools-pin.png) no-repeat;
width: 32px;
height: 47px;
margin:-35px 0 0 0;
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

5. Find this code, (maybe different in some templates)

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

6. Add some code, so the code will be like this

<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>

7. Then, click SAVE TEMPLATE
8. Now, go to Deisgn --> Page Elements --> Add Gadget
9. Choose "HTML/Java Script", and add the code below

<div id="myElement" class="slider"><div class="knob">/div></div>

10. Click SAVE

Loading Related Posts