Cara Membuat Tombol Tautan Back To Top Pada Situs Web Atau Blog Versi Mobile

<a href="#">Back to Top</a> 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.

Pertama, seperti biasa ketika kita akan melakukan kustomisasi template, maka dari ‘Beranda Blogger’ buka editor template dengan mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, untuk mempermudah penempatan kode, silakan cari kode </head> kemudian sisipkan kode <a id='atas'/> tepat di atasnya.

Ketiga, cari kode <b:include name='mobile-nextprev'/> dan kemudian sisipkan kode <a href='#atas'>Kembali ke Atas</a> tepat di di atasnya.

Keempat, simpan template Anda.

Namun demikian penggunaan langsung teknik tersebut hanya akan menghasilkan tautan teks rata kiri, sehingga apabila ingin ‘mempercantik’ tampilannya maka Anda dapat menambahkan bingkai pada kode <a href='#atas'>Kembali ke Atas</a> seperti contoh berikut ini.

<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>

Sehingga hasilnya adalah seperti yang tampak pada gambar di bawah ini.

Kemudian untuk melihat demo hasil penerapan teknik tersebut, apabila sekarang Anda membuka halaman ini dengan menggunakan komputer, maka silakan klik di sini. Sedangkan apabila sekarang Anda membuka halaman ini dengan menggunakan hand phone (HP), maka Anda dapat langsung melihatnya di bagian bawah halaman ini.

Semoga berguna dan bermanfaat.

Salam.