Κάντε Οποιοδήποτε 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("HTML4"); // 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><style> .bs_sticking {background: transparent !important; position:fixed !important;
top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);margin-top: 0; position:relative\9 !important;} </style>
Αντικαταστήστε το HTML4 με το ID του widget σας, επιλέξτε
Αποθήκευση προτύπου και το συγκεκριμένο widget έχει γίνει, πλέον, sticky.