» » » » » Font Size Control Widget ??a ta posts sa?

Font Size Control Widget ??a ta posts sa?

, , ,
?a??sp??a st??? a?a???ste? t?? bloggertips.gr.


S?�e?a ?a sa? de??? ??a gadget t? ?p??? ?a �????se? t??? a?a???ste? t?? blog sa? ?ste ?a �p????? ?a ???�????? �???? t???, ap?? ?a? ??????a, t? �??e??? t?? ??a��at?se???? t?? ?e?�???? ta ?p??a d?�?s?e?ete.

?? ?a?? �e a?t? t? gadget e??a? ?t? �pa??e? s?et??? e????a ?a? t? p??s??tete st? s?�e?? p?? ese?? ???ete.

??�e ?a d??�e t??a p?? ?a t? p??s??sete:

??ad??as?a:

1. S??des? st? ???a??as�? blogger
2. S?ed?as?
3. ?pe?e??as?a HTML
4. ?e Ctrl + F a?a??t??�e t? </head> ?a? a???�?? p??? ap? a?t? ep???????�e t?? pa?a??t? ??d??a:
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqQ2bCSXkYINR08TiXEREJLnmyhwSo9sajZrC4W3gAv5LI5bB5ubLAg7TGgbwiyFlGjkYVutrV1TQwFdI5aH4wvSWl-9uRzf3LR15qdUrVR0yhlqlrWZQNR2Nq2jwODaAG_mvFIveTM4U/) 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/AVvXsEhAnI2PqBaOC4S0bIRm9RfPbi2Ji-o2OLNSx5MH-rsPcHuDCId7546vywK27Cdpe6wcszyZQrrErLz_r-IPVUOYTO4gnghtmbsU9vz5tHrDN8L1R0Egz6D77-8Ew3uvASDL-Q9nsJV_VuM/s400/allblogtools-pin.png) no-repeat;
width: 32px;
height: 47px;
margin:-35px 0 0 0;
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

5. ?e Ctrl + F a?a??t??�e t?? pa?a??t? ??d??a:
(a? de sa? t? �??s?e? ?ate??e?a?, a?a??t?ste t?? p??t? ? t? de?te?? se??? ?a? �et? ?a �?e?te ?a? t?? ?p????pe? se???? t?? ??d??a).
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

6. ???? ap? t?? pa?ap??? ??d??a p??s??t??�e t? <span id='fontSize'> ?a? �et? ap? a?t?? t? </span>.

???ad? ? ??d??a? te???? ?a e??a? ?ts?:
<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>

6. ?p????e?s? p??t?p?? ?a? p?�e ?a p??s??s??�e t? gadget???.

7. ??�e S?ed?as? > ???s???? gadget > HTML/Javascript

8. ??sa st? HTML gadget p??s??t??�e t?? pa?a??t? ??d??a:
<div id="myElement" class="slider"><div class="knob"></div></div>

9. ?at?�e ap????e?s? ?a? te?e??sa�e!

?????: http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/

Copyrights: http://www.bloggertips.gr/

Post by Secra from Web in Greece

Related Posts