Tutorial Membuat Tombol Back To Top Melayang di Blogspot

Assalammualaikum warohmatullahi wabarokatuh.

Mumpung lagi semangat update blog Yuk, Ngeblog, aku mau berbagi cara membuat tombol BACK TO TOP melayang. Kaya apa sih? Itu lo tombol di ujung bawah yang kalau diklik bisa langsung bikin kita scroll up ke bagian atas blog.

Fungsinya apa? Untuk memudahkan pengunjung yang lagi blogwalking ke blog kita, begitu sampai di ujung bawah, kadang kan malas ya scrolling ke atas.. nah, dengan adanya tombol back to top tersebut, pengunjung tinggal klik tombolnya, dan otomatis akan naik ke atas hanya dalam hitungan detik saja.

Caranya mudah banget kok.

Pertama-tama, cek dulu apakah di template blog cupuers sudah memiliki script seperti ini:

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’/>

Cara nyarinya tinggal masuk ke theme – edit html, lalu tekan CTRL + F untuk melakukan pencarian kode tersebut di atas </head>.

Jika di atas </head>, belum ditemukan kode script di atas. Langsung copas saja kode tersebut dan letakkan di atas </head>, nanti jadinya akan seperti ini ya, Cupuers.

Setelah script tersebut terpasang dengan benar. Jangan lupa klik save/ simpan.

Kini saatnya kita ke bagian layout/ tata letak. Klik add a gadget/ tambahkan gadget di bagian sidebar. Pilih yang html.

Lalu copy pastekan kode di bawah ini ke dalam box:

jQuery(‘.mbw-back-to-top’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Kode yang berwarna merah merupakan sumber gambar tombol BACK TO TOP. Bisa diganti sesuai gambar yang Cupuers mau.

Bahkan jika Cupuers punya kreasi gambar sendiri bisa lo dipakai. Caranya simpan gambar back to top kreasi Cupuers ke draft postingan di blog. Draft postingannya nggak perlu dipublish ya, cukup diklik save. Copy image address dari gambar tersebut, lalu copas ke bagian yang merah itu.