Tips / Cara Memasang Tombol "Back to Top" di Blog

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.

sumber :klikmunadi