Auto Scroll Widget στο blog σας

1
Η κύρια ιδέα του 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://1.bp.blogspot.com/-gpimEvetJGo/Wcu2gRFCkiI/AAAAAAAACwA/KIlNSQEG8t0JCw7nwC0cjChy8huaE_TdACLcBGAs/s1600/play.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://3.bp.blogspot.com/-y7CTiiR2aBU/Wcu4H7AkmtI/AAAAAAAACwM/8mmry5ttOPgCOwJIKIpNM2n_ZyIr95ZngCLcBGAs/s1600/pause.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 Σχόλια
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Δημοσίευση σχολίου
To Top