Cara Masang Tombol "Back to Top"

pada kesempatan ini saya coba untuk berbagi Cara Memasang Tombol "Back to Top" atau tombol kembali ke Atas blog (awal).tujuannya adalah mempermudah para pengunjung blog untuk kembali ke bagian atas blog dengan cara satu kali klik saja.

nda usah basa-basi lagi. ikuti langkah-langkah dibawah ini.
1. Login ke blogger > Rancangan >> Elemen Halaman >>> Tambah Gadget >>>> HMTL/Javascript.
    Copy kode dibawah ini dan paste ke dalam HMTL/Javascript.

<script type="text/JavaScript">
var topMargin = 300
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; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21flYxsl6JBCnRmVFzrPS1oCWmYnnw3Ax0IaT6WyMxXrhpukS39V5ab1-jFALlqBF0lPY3j3_BYVah2pxM5IPQK40BoXdzLNlFhxIsAgKo2iVfNl0h52pv8mbC2JBRPxHgV3HICBKLYQZ/" height="25"/></a></div>



2.  selanjutnya >>>> Edit HMTL
     cari kode
     </Body>
     lalu Copy kode berikut lalu Paste tepat di bawah kode diatas 

<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21flYxsl6JBCnRmVFzrPS1oCWmYnnw3Ax0IaT6WyMxXrhpukS39V5ab1-jFALlqBF0lPY3j3_BYVah2pxM5IPQK40BoXdzLNlFhxIsAgKo2iVfNl0h52pv8mbC2JBRPxHgV3HICBKLYQZ/'/></a>

Catatan:
Code yang berwaarna biru dapat diganti apa bila anda mempunyai gambar sendiri. 

 Silahkan Mencoba 



0 komentar:

Posting Komentar

Jika anda berkenan mohon tinggalkan pesan