Cara Menambahkan Back to Top Button di Blog dengan Mudah

Wah. Ada ornamen baru nih di sebelah bawah blog saya ini. Itu lah yang dinamakan tombol kembali ke atas atau dalam bahasa inggris disebut back to top button

Bagaimana tombol ini bekerja? Tombol ini bekerja jika Anda mengekliknya. Saat mengekliknya, Anda akan kembali ke bagian atas halaman konten saya.

Di zaman sekarang seharusnya template-template yang dibuat oleh designer template sudah ada tombol ini agar ketika blogger mengganti template tidak kebingungan tentang bagaimana cara menambahkan tombol kembali ke atas.

Namun jika belum, ada banyak cara membuat back to top HTML ini di blog. Dan yang paling banyak dibagikan kepada para blogger adalah dengan memasang script tombol back to top di edit HTML template blog.

Namun beberapa pengguna yang belum paham dengan script HTML, akan sedikit ragu dan berpikir bahwa script tersebut membuat load blognya semakin lambat atau jangan-jangan nanti scriptnya tidak jalan, atau pasti script itu sudah ditambahi link ke website yang macam-macam.

Pikiran itu akan berkecamuk di pikiran mereka saat ingin menambahkan widget dengan HTML/javascript. Namun tenang saja script di bawah ini telah diuji dan berhasil. Oke. untuk menambahkan tombol back to top, caranya seperti ini.

Menambah Back to Top Button melalui Edit Template HTML

1. Pastikan terlebih dahulu di template blog Anda sudah ada kode jquery. Kurang lebih kodenya seperti ini:

<script src='http://ajax.Googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Atau seperti ini,

<script type="text/javascript" src="http://ajax.Googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Kalau belum ada, lakukan langkah ini:
– Template -> Edit HTML
– Cari (tekan Ctrl + F pada keyboard) kode </head>
– Salin salah satu kode tersebut dan tempel di atas kode </head>
– Simpan template

2. Setelah template Anda tersimpan –> klik halaman tata letak
3. Klik “Tambahkan Gadget” terserah di mana Anda mau meletakkannya, karena pada akhirnya widget ini terlihat di tempat yang sesuai dengan yang ditulis di script cssnya.
4. Pilih “Javascript/HTML”
5. Salin dan tempel kode berikut ini:

<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="Ganti alamat URL di sini" height="43" width="43"/>
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Gantilah tampilan tombol “back-to-top” Anda dengan cara mengganti teks Ganti alamat URL di sini dengan alamat URL gambar yang Anda mau.

Dan sesuaikan ukuran gambar dengan mengubah teks berangka 43 dengan ukuran yang pas.

Mudahkan cara pemasangan tombol back to top ke blog? Jika Anda mengalami kesulitan dalam pemasangan tombol back to top di blog, Anda bisa bertanya melalui komentar di bawah.

Dapatkan berita terbaru! Ikuti kami di Google News dan dapatkan kabar terupdate langsung di genggaman.

Bagikan ke media sosial:

Konten Terpopuler: