Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

13
Tgl. 21 Juni 2012

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

Back to Top
<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.
Tombol Back To Top Pada Tampilan Mobile

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.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 13 komentar pada artikel ini ▶
15/07/12 15.28 O

saya berhasil sob .. coba liat deh blog saya ...

Anonim
15/07/12 23.51 O

@GhiieellaaankYap... tadi saya sudah melihat blog Sobat dalam mode tampilan seluler kok. :)

25/07/12 11.35 O

Artikel anda yang membahas mengenai blog versi seluler sangat membantu saya mas, sekarang tampilan seluler blog saya terlihat lebih menarik

25/07/12 11.54 O

@hendraSyukurlah kalau begitu, Sobat.

Kebetulan tadi saya juga langsung berkunjung ke blog Sobat dan membukanya dalam tampilan seluler.

04/05/13 12.36 O

untuk tutor yang ini saya juga sudah menerapkannya mas, terima kasih banyak..

06/05/13 22.52 O

@Aulia MPSama-sama Sobat.

02/06/13 22.41 O

wew
keren tutornya gan
mampir blog ane ya
lihat hasilnya
:)

ane udah "join this blog"
jangan lupa follow back yaa
:D

03/06/13 08.20 O

@Abdul IndoOke, terimakasih Sobat.

04/08/13 02.31 O

Artikel yang mudah di pahami...
Lanjut Gan...

06/08/13 00.56 O

@smartpulsa-88Terimakasih Sobat. Semoga dapat diambil guna dan manfaatnya. :)

08/04/14 23.17 O

nyasar kesini juga ane sob...haha..ini ane lagi cari artikel buat bikin backtop kayak gini. tapi kagak ada yang kayak backtop nya punya facebook ya? jadi tiap klik itu gak ninggalin tanda pagar & dan tag name yang sebelumnya kita sisipkan di head. Wah ane cari kemana-mana kagak ada.
Btw post ane nih #2 di SE Google browser PC ane nih. Tingkan lagi agan semar jd #1. Sukses sama blognya. Hehe.. :)

21/09/15 13.48 O

Kembali bertanya lagi mas hehe, kali ini pada Postingan back to top! Pertanyaannya, jika saya ingin menempatkan tombol nya di footer/atribusi seperti keadaan pada template mas Semar saat ini bagai mana ya? Oh ya, dan juga saya lihat atribusi pada template mas yang sekarang menjadi rata kiri, lalu tombol backtotop menjadi rata kanan dalam satu baris, seperti hal nya pada navbar, bagaimana ya? Maaf nih pertanyaan nya bertele tele, terima kasih mas!

22/09/15 10.32 O

@Denz Ahmad Oh, kalau untuk yang seperti itu sih sebenarnya sangat simple Sob. Sebab membuat back to top seperti ini bisa saja dilakukan dengan menggunakan teknik floating. Sebagai contoh misalnya di bawah ini adalah kode yang saya gunakan untuk membuat back to top

<a href='#atas' style='float:right;'>Ke Atas [ ↑ ]</a>
© <a href='http://eltelu.blogspot.com/'>Eltelu</a><br/>
Design by <a href='https://plus.google.com/u/0/104792963386245109966/about'>Semar Bingung</a>- Powered by <a href='http://www.blogger.com/' target='_blank'>Blogger</a>

Perhatikan bahwa tautan back to top (Ke Atas), copyright, dan atribusi pada rangkaian kode tersebut sebenarnya adalah berurutan. Nah, apabila tidak ditambahkan CSS pada rangkaian kode tersebut, maka secara otomatis letaknya pun akan berurutan dari atas ke bawah.

Akan tetapi karena pada bagian back to top ditambahkan inline CSS: style='float:right;', maka secara otomatis bagian inipun akan ditampilkan pada bagian kanan saat laman ditayangkan. Sementara itu bagian copyright dan atribusi akan tetap terletak pada bagian sebelah kiri.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog