Cara Cepat Memasang Tombol Back to Top atau Kembali ke Atas Pada Blog

Assalamualaikum Warahmatullah Wabarakatuh

Kali ini saya akan membahas mengenai cara membuat tombol "back to top" atau kembali ke atas pada suatu blog, tombol ini sedikit berguna bagi pengunjung blog yang ingin kembali ke halaman atas tanpa capek-capek lagi memutar scroll mouse. cara ini sangatlah efektif saat membuka artikel yang agak panjang.

Ok, langsung saja ya,,berikut adalah cara lengkapnya...

• Login terlebih dahulu di Blogger,, Selanjutnya pilih "Tata Letak" Kemudian pada "sidebar" atau dimana tempat anda ingin menempatkan gadget tersebu, pilih "+Tambahkan Gadget" 

• Pilih "HTML/JavaScript", klik tanda "+" atau klik tulisan "HTML/JavaScript" atau juga bisa dengan klik symbol/icon "</>" 

•  Silahkan masukkan script/kode berikut kemudian pilih "Simpan"

<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="https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/back%20to%20top.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>

• Berikut penjelasan script/codenya

.mbw-back-to-top {position: fixed;bottom: 2em;right: 10px;text-decoration: none;padding: 1em;display: none;cursor:pointer;} adalah code untuk mengatur posisi serta model dari icon atau gambar panah keatas yang telah dibuat/didownload.

<img class="mbw-back-to-top"src="https://sites.google.com/site/bahagiaduniadanakhirat1/gambar/back%20to%20top.png" /> adalah code untuk alamat icon atau gambar yang ingin digunakan, anda bisa membuatnya sendiri kemudian mengupload dan memasukkan alamatnya di code ini. banyak sekali gambar/icon yang bisa ditemukan di om google.

var offset = 220; adalah code jarak mulai munculnya icon back to top atau kembali keatas 

var duration = 500; adalah code untuk kecepatan untuk back to top atau kembali ke atas. 

• Selanjutnya adalah masuk ke "Template" > "Edit HTML"

• Kemudian masukkan script/kode berikut tepat diatas code </head>

<script src='https://sites.google.com/site/bahagiaduniadanakhirat1/home/script/jquery.min.js' type='text/javascript'/>

• Sehingga tampilannya seperti ini

• Selanjutnya pilih "Simpan Template"..sekarang silahkan cek blog saudara, kurang lebih seperti ini tampilannya..scroll page menggunakan mouse ke bawah maka akan muncul icon panah keatas dibagian kanan bawah sesuai dengan icon yang telah dibuat sebelumnya.

Itulah cara memasang tombol back to top atau kembali ke atas pada suatu blog, semoga berguna bagi teman-teman sekalian, jika ada yang kurang jelas....silahkan bertanya.

Salam

Artikel Terkait