Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

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


Print Friendly and PDFPrintPrint Friendly and PDFPDF

Καλησπέρα στους αναγνώστες του 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

Stumble
Delicious
Technorati
Twitter
Facebook

6 comments:

Unknown είπε...

Εισαι φοβερος φιλε μου νασαι παντα καλα

Notis είπε...

είχα συνδιάσει ένα παρόμοιο και το έχω βάλει στο blog μου με κουμπιά...

Seafarer είπε...

Το πολύ όμορφο Gadget "Font Size Control Widget " δεν λειτοτργει οταν κανω post το επίσης πολύ όμορφο Gadget "ΠΡΟΣΦΑΤΕΣ ΑΝΑΡΤΗΣΕΙΣ ΜΕ ΕΙΚΟΝΙΔΙΟ"
Υπαρχει δυνατοτητα να εχω και τα δυο Gadget ταυτόχρονα;
Ευχαριστώ....reasta

Ανώνυμος είπε...

se emena dn doulevei

Αναστασία είπε...

Είναι υπέροχο!!! Σε ευχαριστώ πολύ!!

Ανώνυμος είπε...

πολύ καλό, ευχαριστώ!

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *