24/05/2016

Cara Menambahkan Tombol Kembali ke Atas di Blog


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 Anda mengekliknya Anda akan kembali ke bagian 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 tentang bagaimana cara menambahkan tombol kembali ke atas.

Namun jika 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 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 jangan-jangan script tersebut bisa 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 saat ingin menambahkan widget dengan html/javascript.

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

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

Melalui widget


Lakukan seperti 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 tulisan ## -->PASTE ALAMAT URL GAMBAR ANDA<-- ##

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

Cari gambarnya di mana?

Anda bisa mencari di google atau di tempat mana pun yang Anda mau.

Yang penting Anda bisa klik kanan gambar --> buka gambar di tab baru --> salin alamat URL gambar yang tertera di address bar --> masukkan ke script di atas.

Jika cara pertama gagal....

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 javascriptnya.. bukan tempat Anda meletakkan widget.
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" />
<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.

Mudahkan cara pemasangan tombol back to top ke blog?

Jika Anda mengalami kesulitan dalam pemasangan tombol back to top, Anda bisa bertanya melalui komentar di bawah.

Terima kasih.

6 komentar

wah mantap infonya , sangat bermanfaat

Kalau di versi hp bisa keluar kaga?

Hehe.. iya..
Spertinya, kalau web dilihat versi hp di hp tidak bisa keluar dan kalau web dilihat versi website di hp bisa keluar.

Ayo komentar.... :) Bagikan pengalaman Anda!
EmoticonEmoticon