Add Floating "Back to Top" Icon Button in Blogger.

Ένα κινούμενο εικονίδιο με εφέ κάθετης κύλισης, για να επιστρέψουμε στην κορυφή της σελίδας.

Πολλές φορές στα templates που βρίσκουμε, έχουν ενσωματομένο το "Back to top" στο τέλος της σελίδας, για να στέλνουμε τους αναγνώστες στο πάνω μέρος.
Αυτό προϋποθέτει βέβαια ότι ο συγκεκριμένος χρήστης πρέπει να κατέβει ως στο τέλος της σελίδας.
Εδώ σας δίνουμε ένα widget "ανσασέρ", πλεονέκτημα του οποίου είναι να μεταφέρει τον αναγνώστη από το τέλος στη αρχή από οποιοδήποτε σημείο της σελίδας.

Για να το περάσετε θα κάνετε τα εξής απλά βήματα:



1. Θα κάνετε Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Στοιχεία Σελίδας --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript, θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα.

<!--Floating-Back-to-Top-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<script type="text/JavaScript">
var topMargin = 730
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; right:5px; top:10px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="http://i55.tinypic.com/2960i77.jpg" height="25" /></a></div>
<!--Floating-Back-to-Top-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Δείτε το στην πράξη...

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!