Κάντε Οποιοδήποτε Widget Κινούμενο -Sticky- Εύκολα! Blogger

Αν θέλετε κάποιο, οποιοδήποτε, widget/gadget να «ακολουθεί» τον επισκέπτη του blogger σας κατά το scroll down της σελίδας, δηλαδή να το κάνετε sticky, εύκολα, ακολουθήστε τα παρακάτω απλά βήματα.

ΣΗΜ: Τα sticky widgets τοποθετούνται -συνήθως- στη side bar και οπωσδήποτε τελευταία στη σειρά, ώστε να μην καλύπτουν κάποια άλλα κατά το scroll down.

 Αρχικά 

Eιδικά αν δεν υπάρχει σχετική εμπειρία- κάνετε ► buckup του προτύπου ◄

για κάθε ενδεχόμενο λάθους που πιθανόν να συμβεί.

Επιλέξτε το widget, βρείτε το ID του (στο παράδειγμα είναι HTML5) με κλικ στο  1  ...

...μετά στο  2  και κρατώντας πατημένο το αριστερό button σύρετε δεξιά έως το τέλος.

Ανοίξτε το Blogger σας,

επιλέξτε Πρότυπο ► Επεξεργασία HTML

πατήστε ταυτόχρονα Ctrl+F γαι να εμφανισθεί η γραμμή αναζήτησης,
επικολλήστε το tag:

</body>

..."χτυπήστε" Enter
για να μεταφερθείτε στο πεδίο που βρίσκεται και ακριβώς από επάνω
επικολλήστε τον παρακάτω κώδικα:

<script>
//<![CDATA[
bs_makeSticky("HTML5"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

       Αντικαταστήστε το HTML5 με το ID του widget σας, επιλέξτε

       Αποθήκευση προτύπου και το συγκεκριμένο widget έχει γίνει, πλέον, sticky.