<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.
Semoga berguna dan bermanfaat.