Skip to main content

Cara Mudah Membuat Tombol Back To Top Di Blogger

Memasang tombol back to top pada blogger - Dalam membangun blog ada baiknya kamu membuat fitur-fitur yang dapat memudahkan viewer kamu menjelajahi blog kamu. Salah satu fitur yang bisa kamu pasang adalah fitur back to top.

Lalu apa sih tombol back to top itu?

Tombol back to top merupakan tombol yang dapat memudahkan viewer kamu untuk kembali ke paling atas halaman kamu dalam sekali klik. Tombol Back To Top biasanya berada di pojok bawah kanan layar hp.


Memasang back to top di blogger.com
Tombol back to top

Kelebihan dari memasang tombol back to top:

1. Memudahkan viewer kembali bagian paling atas artikel.
2. Blog jadi terlihat lebih profesional.
3. Blog menjadi lebih keren.

Ketika kamu memasang widget back to top, maka kamu akan mendapatkan kelebihan di atas dan bersiaplah melihat perubahan keren dari blog kamu.

Cara membuat tombol back to top di blog.

Coba kamu cek terlebih dahulu  apakah di template yang kamu gunakan sudah terpasang kode seperti di bawah 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>

Jika kamu belum ada kode di atas pada template kamu, silahkan kamu masukkan salah satu kode di atas ke dalam template kamu dengan mengikuti cara di bawah ini.

1. Masuk ke akun blog kamu kemudian klik template kemudian klik edit html.
2. Klik kode apapun di dalam kotak edit html, kemudian tekan ctrl+f.
3. Kemudian cari kode </head>.
4. Kemudian copy salah satu kode pada kotak di atas, kemudian paste tepat di atas </head>.
5. Jika sudah klik save.

Nah jika kamu sudah memasang salah satu kode di atas ke dalam template kamu, silahkan lanjutkan ke tahap berikutnya.

1. Klik layout atau tata letak.
2. Kemudian klik add gadget di sidebar kanan ataupun kiri (jika ada).
3. Pilih yang "Javascript/HTML".
4. Copy kode berikut dan pastekan di form javascript/HTML yang tadi kamu klik.

<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="http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png" />
<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>

5. Jika sudah tinggal kamu klik save.

Note: Kode yang berwarna merah bisa kamu ganti dengan gambar back to top punya kamu sendiri.

Nah silahkan buka blog kamu dan lihat apakah tombol back to top berhasil terpasang ataupun tidak. Sekian artikel dari saya tentang tutorial menambah widget back to top pada blogspot. Jika kamu ada kesulitan ataupun kesalahan dalam mengikuti tutorial, silahkan bertanya pada kolom komentar ataupun menghubungi admin melalui halaman contact.

Sampai jumpa lagi pada lain artikel, hanya di amtread.com.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar