Cara Memasang Back to Top

Tentu Anda sudah tahu dan tidak asing lagi kan dengan fungsi kegunaan dari rangkaian kode tersebut? Ya, bahwasanya rangkaian kode tersebut dapat digunakan untuk membuat link atau tautan yang fungsinya apabila diklik maka akan mengembalikan kita ke halaman bagian paling atas setelah sebelumnya kita membaca artikel dalam sebuah situs web atau blog, sedangkan saat itu kita sudah berada pada posisi tertentu (misalnya berada di tengah halaman atau di halaman paling bawah). Namun tahukah Anda bahwasanya kode tersebut tidak dapat berfungsi secara

optimal apabila diterapkan dalam template untuk halaman situs web atau blog versi seluler.

Penggunaan kode tersebut untuk membuat tautan ‘Kembali ke Atas’ atau ‘’Back to Top" pada situs web dan blog versi seluler tidak berjalan secara optimal karena ketika tautan diklik maka halaman akan ditayangkan ulang baru kemudian kita akan diarahkan pada halaman bagian paling atas. Ini sangat berbeda dengan apabila kode tersebut diterapkan pada situs web atau blog untuk versi tampilan web, yang akan langsung mengarahkan kita ke halaman bagian atas tanpa terjadi penayangan ulang halaman ketika tautan tersebut diklik. Sehingga akhirnya apabila kode tersebut diterapkan pada halaman versi seluler, maka yang didapatkan bukanlah kemudahan, karena kita tidak langsung diarahkan ke halaman bagian atas seperti halnya ketika kita membuka halaman yang dimaksud dengan menggunakan browser komputer.

Lantas bagaimana caranya agar tautan ‘Back to Top’ pada halaman versi seluler dapat langsung mengarahkan kita ke halaman bagian paling atas ketika tautan tersebut diklik? Agar tautan ‘Back to Top’ untuk halaman versi seluler dapat berfungsi sesuai dengan yang diharapkan, maka Anda dapat menggunakan teknik di bawah ini.

*Untuk Tampilan Sederhana Back To Top dalam blog saya,bisa anda lihat

Caranya :
Login ke dasbor blog anda
Pilih rancangan
Pilih Tambah Gadget
Pilih Html/Java Script
Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
Pastekan kode tadi di Html/java script tadi.
Simpan, dan selesai

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mf2Z7u6Y8_y_AVdNVJ1d0AdPcaBzrZYHGyp13sLfJR2elG1NQ0SP8bPRUEu5TwJOYhy5QGo_-8VYAdCyTY7cNAz1sWxL2gGvd9_KsALW2I9T0RtWu2P7xatv8o6BckKAh2FlwVBY5v5o/s1600/Untitled-2.png'/></a>

*Untuk Tampilan Kedua :

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

#Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
#Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#Enjoy img{border:0}
#Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}