Tujuan membuat tombol back to top dalam blog adalah agar para pengunjung blog merasa lebih mudah untuk kembali ke bagian atas blog kita. Walau mereka bisa kembali ke bagian atas blog dengan cara menggulung scrool namun dengan adanya tombol back to top ini akan lebih mempermudah, yaitu cukup dengan satu klik saja, maka mereka langsung di bawa ke bagian atas blog kita.
Untuk membuat tombol yang kita maksud, kita hanya membutuhkan kode berikut:
<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/AVvXsEhkgJtD2HsIBVRiS_cgFB4Bn-HYvPji0a-i-7bUaWE8WjyZmon0tsrDTGv0euwI18D6Az8vmnqx9Fa3s-5-VtWW_zvpoxcIH8Ar3W6GI9qzLcZAvylBQ7InKCwnyTpt5aukroHHP8sz-ys5/" height="25"/></a></div>
Cara memasangnya seperti biasa, login ke blogger >> Tata letak dan Tambah Gadget HTML. bagi teman-teman yang ingin mengganti gambar back to top, maka bisa diganti link yang berwarna seperti ini. tampilan dari link gambar di atas adalah seperti berikut ini:
Di atas adalah kode dan langkah-langkah untuk memasang tombol back to top yang letakknya mengikuti gerakan scroll browser, selanjutnya bagi teman-teman yang ingin memasang tombol back to top melayang/berada di kanan slalu (bisa diatur letaknya, NB ==> kode yg tlah saya sediakan di bawah ini sudah diatur untk tampil di bagian kanan bawah), maka tman2 bisa memperaktekkannya melaui langkah-langkah berikut:
Login ke blogger >> Tata Letak >> Edit HTML
Kemudian letakkan kode berikut tepat di bawah kode </Body>
<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkgJtD2HsIBVRiS_cgFB4Bn-HYvPji0a-i-7bUaWE8WjyZmon0tsrDTGv0euwI18D6Az8vmnqx9Fa3s-5-VtWW_zvpoxcIH8Ar3W6GI9qzLcZAvylBQ7InKCwnyTpt5aukroHHP8sz-ys5/'/></a>
Tampilan:
Simpan hasil kerjaan anda!
Nb:
Teman-teman juga bisa memilih beberapa gambar back to top berikut ini
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1prYJc1hu2I1ep4a0K80chMmTjcXxz2ixiSH_YM21pMpTB7O4eCHIKqAOoAAJktsXLU3uJAsPZrDvQTyFrBZCX0LEWbYjXDxz90nnt0-OYTkMtHzp-7pKnEv7AZcyi6-UDyIBk2mtIGW/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBB6EFQGNVmqtR8SX2o_lrgRMSdGxKMzt7xGE9FyFCjlkA7qKyG-ZGqTjI0U11H-CzU9OZiwept-qFbUAL50LjwqlAzZB5NZjtzotqF6sN0fWn52pNRJXDM6XyQbizZ6vkeEHhaAnX61-s/
sumber :
caturpuji.blogspot.com
Cara ke 2 >>>
Tombol 'Back to Top' atau 'Kembali ke Atas' merupakan sebuah tombol yang jika diklik akan membawa kita menuju ke bagian atas suatu halaman pada blog. Tombol ini berguna untuk memudahkan pengunjung saat ingin kembali ke bagian atas halaman blog setelah selesai membaca artikel. Terlebih lagi bila isi posting terlalu panjang. Jadi, pengunjung tidak perlu repot-repot mengeklik
scroll bar atau memutar
scrollpada
mouse untuk kembali lagi ke bagian atas halaman.
Letak tombol ini berada di pojok kanan bawah layar monitor dan melayang. Untuk memasang tombol ini, Anda dapat menyimak langkah-langkahnya di bawah ini.
1. Masuk ke akun
Blogger Anda.
2. Klik
Rancangan >
Elemen Laman >
Tambah Gadget.
3. Pilih
HTML/JavaScript.
4.
Copy dan
paste kode di bawah ini di kolom
Konten.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="
Kembali ke Atas"><img src="
http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png" /></a>
- Anda dapat mengganti Kembali ke Atas dengan judul yang Anda inginkan.
- Bila ingin menggunakan gambar Anda sendiri, silakan ganti http://i1119.photobucket.com/albums/k636/klikmunadi/Up.png dengan url gambar Anda.
5. Klik tombol
SIMPAN.
6. Pindahkan elemen ke posisi paling bawah.
7. Klik tombol
SIMPAN.
8. Selesai.
