Auto Scroll Widget στο blog σας

Η κύρια ιδέα του widget είναι πολύ απλή. Η σελίδα αρχίζει να κινείται μόνη της, όταν πατηθεί το κουμπί play και η κύλιση σταματά όταν πατηθεί το κουμπί pause.

Η αρχική ταχύτητα κύλισης μπορεί να ρυθμιστεί από τον κώδικα. Μπορούμε όμως να αυξήσουμε ή να μειώσουμε την ταχύτητα κύλισης και στην προβολή του blog μας, όταν πατήσουμε πολλές φορές το play ή το pause αντίστοιχα.
Δείτε demo 1 Δείτε demo 2

Για να το εφαρμόσετε στο blog σας, αρκεί να επικολλήσετε τον παρακάτω κώδικα σε μια από τις εξής περιπτώσεις:
  • Σε ένα widget
    (Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] )
  • Μέσα στο template
    (Επιλέξτε [Πρότυπο] - [επεξεργασία HTML] - Ακριβώς πάνω από το </body> )

<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px}
#abt-scroll a.abt-scroll{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/play-button.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/pause-button.png) no-repeat}
#abt-scroll a:hover{background-color:#1569C7}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Αλλάξτε το 50 με έναν δικό σας αριθμό για να αυξήσετε/μειώσετε την ταχύτητα κύλισης.

1 σχόλιο:

Δικά μου

Larissakid

Χρησιμοποιώ