Font Size Control Widget για τα posts σας

Καλησπέρα στους αναγνώστες του bloggertips.gr.

Σήμερα θα σας δείξω ένα gadget το οποίο θα βοηθήσει τους αναγνώστες του blog σας ώστε να μπορούν να ρυθμίζουν μόνοι τους, απλά και γρήγορα, το μέγεθος της γραμματοσειράς των κειμένων τα οποία δημοσιεύετε.

Το καλό με αυτό το gadget είναι ότι μπαίνει σχετικά εύκολα και το προσθέτετε στο σημείο που εσείς θέλετε.

Πάμε να δούμε τώρα πως θα το προσθέσετε:

Διαδικασία:
1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeuFhy84VnBDyGEhy-UDuTRvoO0QYHgvIpdmj-_Wpj5MN2l9gDVhplyYcmKx-rbOH4vY8QbRf8Bu5aus64ol4LMb2-MDZgaixQddpi37HwR4-Uxn13rQnfUYK3cPK-BzwwJrDDax5EJtQ/) 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/AVvXsEghHLl3FohxVMrNbbFYF9qh84ik5H8CczEPJmkYzqMtSVaFZ3zweWdueGGlhyphenhyphenC3SL3pfHcouNisY1kVVUXdHcA7Fzh4mbKjc69cWtqNUjvVaqieuGJuhsXlztYaTaqrkdxKMWqEBUyZKCY/s400/allblogtools-pin.png) no-repeat;
width: 32px;
height: 47px;
margin:-35px 0 0 0;
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

5. Με Ctrl + F αναζητούμε τον παρακάτω κώδικα:
(αν δε σας το βρίσκει κατευθείαν, αναζητήστε την πρώτη ή τη δεύτερη σειρά και μετά θα βρείτε και τις υπόλοιπες σειρές του κώδικα).

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

6. Πριν από τον παραπάνω κώδικα προσθέτουμε το <span id='fontSize'> και μετά από αυτόν το </span>.

Δηλαδή ο κώδικας τελικά θα είναι έτσι:

<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. Αποθήκευση προτύπου και πάμε να προσθέσουμε το gadgetάκι.

7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript

8. Μέσα στο HTML gadget προσθέτουμε τον παρακάτω κώδικα:

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

9. Πατάμε αποθήκευση και τελειώσαμε!

Πηγές: 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