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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger