Tombol Back To Top Versi Mobile

Sudah kita ketahui bahwa fungsi dari tombol back to top ini adalah untuk memudahkan kita kembali ke halaman paling atas tanpa harus melakukan scroll terlebih dahulu. Tombol back to top ini akan optimal jika kita buka versi desktop, namun kurang optimal pada saat kita buka dengan tampilan versi mobile. Biasanya yang terjadi jika di buka pada versi mobile malah kita akan di arahkan pada reload blog tersebut, baru kita diarahkan ke halaman paling atas, tidak langsung menuju halaman paling atas layaknya dibuka menggunakan desktop.

Kita pasti berharap agar tombol back to top tersebut juga bekerja secara optimal walaupun dibuka dengan menggunakan versi seluler atau mobile. Lantas bagaimana cara membuat cara tombol back to top versi seluler? Langsung saja simak tutorial berikut ini, namun sebelumnya silahkan baca terlebih dahulu cara membuat tombol back to top versi desktop dengan efek bounce (ganti dengan link postingan agan tombol back to top sebelumnya) jika agan belum mencobanya.

1. Terlebih dahulu masuk ke dashboard blogger anda masing – masing.

2. Masuk ke menu “Template”.

3. Back up terlebih dahulu untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit template.

4. Lalu masuk ke “Edit HTML”

5. Jika sudah cari kode </head> gunakan Crtl + F atau tekan F3 untuk mempermudah pencarian. Jika sudah ketemu, letakkan kode berikut tepat diatasnya.

<a id='atas'/>

6. Lanjut, sekarang cari kode <b:include name=’mobile-nextprev’/> dan letakkan kode berikut tepat diatasnya.

<div style='-moz-border-radius: 7px 7px 7px 7px; background: #eeeeee; background: -moz-linear-gradient( center top, white 40%, #cccccc 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) ); border: 1px solid #000000; height: auto; margin: 0px; overflow: auto; padding: 2px; text-align: center; width: auto;'> <b><a href='#atas'>Kembali ke Atas</a></b> </div>

7. Sekarang simpan template anda.

Coba buka blog anda menggunakan mobile, apakah sudah ada tombol back to top-nya atau belum, jika sudah coba tekan, apakah bekerja dengan optimal atau tidak. Nah, itulah tutorial cara membuat tombol back to top versi mobile. Sekian tutorial kali ini, semoga bermanfaat bagi anda.