ZFaqih-Share

Akhirnya postingan kedua saya di tahun 2018 dan setelah tiga tahun hiatus, kali ini saya akan membagikan Tutorial Cara Membuat Tombol Back to Top sederhana. Postingan terakhir saya adalah Cara Membuat Social Media Button untuk Blogger, tutorial cara membuat Social Media Button dengan Back to Top Button caranya hampir sama.

Buat yang belum tahu Tombol Back to Top atau Tombol kembali keatas seperti namanya apabila anda sedang di halaman blog lalu scroll sampai mentok kebawah footer cara untuk kembali ke header dengan cepat adalah dengan menggunakan Tombol Back to Top ini karena apabila anda menekan tombol ini maka halaman blog akan otomatis kembali ke atas. Kurang lebih inilah penjelasan singkat Tombol Back to  Top.

Untuk contoh bisa dilihat di blog saya pada pojok kanan bawah dan untuk demo nya silahkan scrol blog saya paling bawah kemudian klik tombol back to top nya yaa...

Kita mulai Tutorialnya :

Langkah Pertama 1):

-Tambahkan syntax HTML dibawah ini copy dan paste dan letakkan diatas tag <div class='fleft'> atau <div class='footer'> atau paling bawah blogger


Langkah Kedua 2):

-Tambahkan syntax CSS agar tombol back to top terlihat bagus, Tambahkan syntax CSS copy dan paste lalu letakkan di bawah tag <b:skin><![CDATA[


Langkah Ketiga 3) :

-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian padding, font-size dan juga width nya sesuai selera.

Mungkin sekian dari saya, Semoga postingan ini bisa bermanfaat untuk teman-teman.
Untuk tombol back to top ini saya ambil dari salah satu Template milik Djogzs karena cukup mudah dan sederhana tanpa menggunakan Javascript yang cukup rumit untuk pemula.
Tutorial Tombol Back to Top yang lain bisa dilihat disini

Apabila mengalami kesulitan bisa langsung ditanyakan di kolom komentar.
Sekian dan Terimakasih.