New Font Size Controller for Blogger


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

9 comments:


ايجيبت كلينك افضل مراكز التجميل التى تهتم بعملائها وتقدم خدماتها بعناية فائقه فخدماتنا تشمل شد ونحت وتخسيس الجسم وحقن البلازما لنضارة الوجه وازالة شعر الجسم بالليزر وزراعة الشعر.
للاستفسار والتواصل:
01025873723-01550057331
01550057332-01016363128
https://sites.google.com/view/egypt-clinic/home
http://egyptclinic.freeblog.biz/
https://your-riana-m.tumblr.com/
https://www.youtube.com/channel/UCZHUX1YNHuz-XupOpxG1vyQ>

Reply
16/11/19

Post a Comment

:) :( :)) :D =))
Loading Comment Form