Cara Menambahkan Tombol Kembali ke Atas di Blog

Wah. Ada ornamen gres 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 jikalau Anda mengekliknya. Saat Anda mengekliknya Anda akan kembali ke bab atas halaman konten saya.

Di jaman sekarang seharusnya template-template yang dibuat oleh designer template sudah ada tombol ini...

...agar ketika pengguna mengganti template tidak kebingungan wacana bagaimana cara menambahkan tombol kembali ke atas.

Namun jikalau belum, ada banyak cara menambahkan tombol kembali ke atas atau back to top button ini di blog.

Dan yang paling banyak dibagikan kepada para blogger yakni 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 jangan-jangan script tersebut mampu membuat tampilan atau load blognya semakin lambat...

...atau jangan-jangan nanti scriptnya tidak jalan, atau pasti script itu sudah ditambahi link ke web macam-macam.

Pikiran itu akan berkecamuk di pikiran mereka dikala ingin menambahkan widget dengan html/javascript.

Namun damai saja script di bawah ini telah diuji dan berhasil. AMIN. :D

Oke. untuk menambahkan tombol back to top, caranya antara lain....

Melalui Widget

Lakukan ibarat menambahkan widget di halaman Tata letak lalu Tambahkan Gadget dan pilih HTML/JavaScript.

Salinlah script di bawah ini dan masukkan ke widget HTML/Javascript tadi.

Tidak usah diberi judul widget supaya tampilan halaman blog Anda tidak aneh.



Perhatikan pada goresan pena ## -->PASTE ALAMAT URL GAMBAR ANDA<-- ##

Anda mampu mengganti teks tersebut dengan alamat URL gambar tombol back to top yang sesuai dengan selera Anda.

Cari gambarnya di mana?

Anda mampu mencari di google atau di kawasan mana pun yang Anda mau.

Yang penting Anda mampu klik kanan gambar --> buka gambar di tab gres --> salin alamat URL gambar yang tertera di address kafe --> masukkan ke script di atas.

Jika cara pertama gagal....

Melalui Edit Template HTML

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

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

Atau ibarat 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) arahan </head>
- Salin salah satu arahan tersebut dan tempel di atas arahan </head>
- Simpan template

2. Setelah template Anda tersimpan --> klik halaman tata letak
3. Klik "Tambahkan Gadget" terserah di mana Anda mau meletakkannya, alasannya pada hasilnya widget ini terlihat di kawasan yang sesuai dengan yang ditulis di script javascriptnya.. bukan kawasan Anda meletakkan widget.
4. Pilih "Javascript/HTML"
5. Salin dan tempel arahan 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, Anda mampu bertanya melalui komentar di bawah.

Terima kasih.

Tweet