Membuat Tombol Back to Top 2

Jika pada tutorial sebelumnya saya pernah membagikan tutorial yang sama yakni tombol top up, kali ini juga masih tentang tombol top up namun dengan gambar yang berbeda pula jadi banyak pilihan warnanya dan gambarnya. Namun jika kamu tidak suka dengan gambar2 yang tersedia, bisa kamu upload sendiri gambar yang kamu suka ke web hosting, dan copy alamat gambarny ke dalam kode javascript-nya. Oke langsung saja tutorialnya dibawah ya sob :

1. Masuk ke Blogger.com

2. Pilih Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.

3. kemudian masukan kode javascipt dibawah ini :

<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="http://i35.tinypic.com/sfia38.jpg" height="25" /></a></div>

*NOTE : Ganti kode yang berwarna biru dengan alamat gambar yang kamu suka, ingat copy address tempat penyimpanan gambarnya !

5. Simpan Template.

Atau jika kamu suka ada beberapa gambar dibawah ini yang bisa kamu coba.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig10ToutSkm0-RN2l8uug0G4E21nMtfRtUYLV9GC2BTp7ulLLBkpsgkCjyfGePLz6GwtKL_nU_tKOSIZ9vP43PjpQAXVhKfsEQ7-hFRsQ_Mkto13Cecg4FbnI-h1vr1cT6r1kMeQL9H0BS/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNT4ssfMagElUWZgzG9zKt7NkFQYvf9I7KQoQJBgzc8sP_l097b9DEUKBPl7F31JXWPwbNJkuhfEZNUW9P0FwAniYP5lHiFGY4zjqKCwTkHc1Rt9S6EBsKqdEhw6EQ5l_UA9mdnve1pLEW/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49DNNNI1XqB63Xzz0Z0Hnerl7RzxcIfAzrtVDvNVI1GCkZ4HAAbZPJDYUg8x1WbGnDMeXioPNVNITkZBQACrbbeMl6hde4TMdMsBM2FLoplip0dtesilX2JGbnI7iVpi5Q96KLM4leTMi/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0zFSZUlCXaxQHwXsOOgXnvBiPLCNVXdHUEmNN0k4l71OqklBYLDCQTpIBCRft7QUCCTlaGUBY1jIV1_Kf18O2xKnH6bs3K_5Cf8_6wwSiCWuYjXw0zemHh0ussi_YpHZ016ZlXCitcZg/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffhjfbjV4dKFep-Lk4ENTYXEp_GYzHbrGH34CGqEjTPt0Gxq3jkAepQtgt3ASwrlu5Fdy0Cv_K233JLdmTXn5RhMALN6uleAJ1JXcWLIpgnmtLaORtKbmaVOwh1XXuIXRpFgn4K-vjqml/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoNF76rIgB6bjM5xUd51i7vznPaLm45Q0GmcVaplwwOAwrDwOFEHv-69OQwjHKkE-ouJJbWL1woNRI4dJnVtq4iGXc1M_tyLmCbx_FnAMTQw6NQc0b3qnha5hOZIKwblPWOdy6DWi3SVQ/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqHcMbJdCYj7jGaWo5NXR6WmZgYO1zVpJSMZA5jRDfJaG7-nsrS3y93n9qvMNLfyGgK_7fiBgDuYxyI9hBzsNXRq3AvHK1DJVgpkMHBnBUp5-kavZJvl60w15STHr3ZGCo5ERbcuLhhDu/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh0sjbIYcLYkF5LcsICTCzVzkTZh_v_YHZbtQPc_SG-P0AvAA3pJcKVxZlbgkfw-daKkhfpMd1pfA4GYw20ri3Itv5nTB0bZ9WAh6TtzgWL2iKnVctvVWkJIaD6JyLETN58Z-76hc8jqo/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hnyAwLRTcDq_8yHj6Od8FO5NXk6SRCayFxgnyR-jPDiuV8QW0TwwvFe-nO9xSOBTrJoPp5y5U6FFj9i9MgYHJhIMQrs_5kH-RadSmPvjr6G9-OaIUVqmoS6D46LqHgmnKtOgcTMUnH0s/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-D_4Yy0Q8ogtFrshthV_H13G29SOG2jdg3s3GRA9jNTMzBfR8jU0fqg3U_lsWEJkTj9wd9G2inCKqxfp2lVAXF9TxD1yuW7As0IYhItaxJHUZieI4_FW7jSJB8m116L9vOGRKYewqpw5/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ZPjNNusWfqQm6M5F1YTQ9D2pdDcWgxFd9FWdBqOnKtcyaoyQvLiO5GjOVsn1MtbYv7ejx1tPbxwdcn7bFmqYbeF24e4wb0yyYS6wnG4HLwFySfh3Lf60jir4caH3QilI9BRJZWGXkMMl/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvRe8OD-ASi133l3ts7a7mUerVpqPavrEqh9WxM3KOfV7bf7AxM4Da5GwXImRWgH18D6CSWGKywJ8tcffXosU_NXSxVLb9ocjkkGwBwJwQwyWyKyZUrMqK7djoYfJUrS1N39JvFC4EeQ-/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZshZNN6JkYCBZ3iCoNU56Aj5B6S16pr9Upvfq3wUNBuDfxjjNZU9okiawj3G8bt7oXpuwhjJnVavZDF5GngbigibWz1dOuqksOrGcT64gfqHLNovMc6Au7se15X08A2N6BlwYfpDk22W0/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6tr-T_ETKvO96XfjcvxN_KFvNdRFjZZyuzuqe1ZY11DPXdpjGWmuD_kGGK6T-X-HqF-T40Ite2crH5_2aeGeqU3V-F97QgSDQ6JkV9S1K1DwRBroe0dxu3YCZcuV9CHfm60myL0hOaKpH/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQ8FjEsanZvEUtI4OAuBcSysRF3Ry_vj7JDby3njnlJiiQJPGohjJn_JDNoEUqjyxULyf2ZCaZuvBgGRE3ou72rgJBNQhBVl3DRPiPm9qhJgHRUAMNBTGV_eUXE4AnIX3WCdKCeLrWWCN/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCaqemiBruZpckd_eMX_6HpY71Zy11uecXBlKnitjtKKPwLOAr0nO9_HI-iFtQ00IhyaxUsTmdyPpfgzkKuaZRJEX9S6AnRvnpjKHwIrNNqpoHdMVCtRieDXbaqxjp3tjMdf0NNfyjsy8G/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdsLF6eom66g8fVTRK2i5eO8Fbf-RZgjTLnMriXjxAePmDG4L_Vg1w85Xwom46EruxD71cE3WFKmU4TAAhqkryHFQpugRqBbbjQJ0Rz8FKZphoqzXqRzNeVBmoBf4ThxeQhtXGmLYMqqwA/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpWrr4oQaiBoU0UCSNpgQjBLB2JHpLpBQbhahLld_2tEhY3Q_gicLgXW35TVtu_KHTGEytniSKjuN3_Jd1BeriI1BFyyZuKRf5dRug5jpZO0bBFiDb1Cfp5XNwLNuhdK3B0QtYqFBOAFY/s400/20.png

Postingan Terkait:

Posted in: Blogger