Κάντε το widget σας να μετακινείτε πάνω κάτω, έτσι ώστε να μη χάνεται ποτέ από τα μάτια σας.Πατήστε το κουμπί demo και παρατηρήστε το τελευταίο widget, στην δεξιά πλευρά του blog, να κινείτε μόλις κατεβείτε προς τα κάτω στη σελίδα.
Είναι απλό στη χρήση του. Αρκεί να βάλετε το παρακάτω script μέσα στον κώδικα του widget σας.
Προσοχή όμως γιατί θα κινούνται και όσα widgets βρίσκονται κάτω απ' αυτό που επιλέξατε. Γι αυτό καλό είναι να κάνετε χρήση του script στο τελευταίο widget σας.
Δείτε πως θα το κάνετε
Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 30;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>
<div id="sidebar">
ΚΩΔΙΚΑΣ
</div>
<style>
#stickysidebar {padding: 10px;background-color: antiquewhite;border-radius: 6px;}
</style>
Ρυθμίσεις:
- Αλλάξτε τη λέξη ΚΩΔΙΚΑΣ με τον κώδικα του gadget σας. Μπορείτε να βάλετε μία διαφήμιση από τη linkwise.gr, μία εικόνα ή ένα link.
- Αντικαταστήστε τον αριθμό 30 στο var topPadding = 30; έτσι ώστε το widget να φαίνεται καλύτερα στο δικό σας blog. Μπορείτε να βάλετε έναν θετικό ή αρνητικό αριθμό, ανάλογα με το πόσα pixel θέλετε να απέχει από το επάνω μέρος του browser σας
- Εάν θέλετε να αφαιρέσετε το χρωματιστό πλαίσιο που περιβάλει το widget τότε διαγράψτε το:
<style>
#stickysidebar {padding: 10px;background-color: antiquewhite;border-radius: 6px;}
</style>
Πατήστε [Αποθήκευση] και τελειώσατε. (Μην βάλετε τίτλο στο widgets)
