Κινούμενο Widget (“Sticky Sidebar”)

   Κάντε το widget σας να μετακινείτε πάνω κάτω, έτσι ώστε να μη χάνεται ποτέ από τα μάτια σας.
   Στο demo μπορείτε να δείτε το τελευταίο widget, στην δεξιά πλευρά του blog, να κινείτε μόλις κατεβείτε προς τα κάτω στον browser σας.
   Είναι απλό στη χρήση του. Αρκεί να βάλετε το παρακάτω script μέσα στον κώδικα του widget σας.
   Προσοχή όμως γιατί θα κινούνται και όσα widgets βρίσκονται κάτω απ' αυτό που επιλέξατε. Γι αυτό καλό είναι να κάνετε χρήση του script στο τελευταίο widget σας.
   Δείτε πως θα το κάνετε. Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε γράμματα με τη λέξη GADGET με τον κώδικα του gadget σας και πατήστε [Αποθήκευση]. (Μην βάλετε τίτλο στο widgets)

Ο κώδικας:

<script type="text/javascript">
 $(function() {
  var offset = $("#sidebar").offset();
  var topPadding = 15;
  $(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">
GADGET
</div>

   Ρυθμίσεις: Μέσα στον κώδικα υπάρχει το var topPadding = 15; στο οποίο μπορείτε να βάλετε έναν αρνητικό ή θετικό αριθμό της επιλογής σας, έτσι ώστε το κολπάκι να φαίνεται καλύτερα στο δικό σας blog.
   Μην ξεχάσετε να αφαιρέσετε το Continue to article » όλο το λινκ. Κάντε κλικ στο κουμπί "Δημοσίευση". Αυτό ήταν!
   Αυτό ήταν το πολύ απλό κινούμενο Widget (“Sticky Sidebar”) για blogger που μου άρεσε για να την μοιραστώ σήμερα μαζί σας και ελπίζω αυτό το μικρό post θα βοηθήσει όσους ήθελαν αυτού του είδους Widget.

Tetsi Tech