Cara Menambah Tombol Back To Top Di Blog

Navigasi menu pada blog memegang peranan penting agar blog tampil maksimal di mata pengunjung, termasuk juga tombol Back to top. Apa itu tombol Back to top dan apa fungsi nya pada blog? Tombol Back to top ini merupakan navigasi menu untuk menggulir halaman artikel ke atas pada blog sobat, jadi fungsinya dengan menekan tombol ini pengunjung di blog sobat gak perlu lagi capek-capek harus men-scroll mouse ya untuk kembali ke bagian atas artikel di blog sobat terutama jika artikel di blog sobat sangat panjang. Tombol Back to top ini akan muncul bila artikel di gulir ke bawah dan akan menghilang jika halaman di gulir ke atas. Dengan menambah tombol Back to top ini di blog, tentunya blog sobat akan semakin seo friendly dan baik di mata pengunjung blog.

Nah bagi sobat yang ingin menambahkan tombol Back to top bada templete blog nya, sobat bisa simak langkah-langkah nya berikut ini

Menambah Tombol Back to top di Blog

1. Login ke akun blogger sobat
2. Pilih menu Templete > Edit HTML
3. Masukkan kode di bawah ini diatas kode </head>, tekan CTRL+F untuk pencarian cepat. Namun jika di templete blog sobat sudah ada kode ini sobat bisa skip ke langkah selanjutnya

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

4. Kemudian sobat pindah ke menu Tata Letak > Tambahkan Gedget/Add Gedget pilih HTML/JavaScript lalu copy dan pasti kode berikut ini di widget HTML/JavaScript

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ64TBWRlrsGKWEHPUOm8wJESTDWWHBF1klH-aT6N6sWe5OjZL4GAzRdBqrrqrdqobpHYkt-TUfibQ3oPE3z0c6_wZj-DLZ8rlTu66uKbn12E3hJouA0B09V-ag5TLD__eRnznWkbcB7c/s1600/back-to-top11.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. Lalu klik simpan dan selesai!

Tambahan untuk membuat tombol Back to top dengan efek bounce

Apa itu Efek Bounce? Efek bounce adalah efek memantul dan untuk demo nya bisa di lihat di blog ini. Dan caranya cukup tambahkan kan kode berikut ini masih diatas kode </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Dan ganti kode di widget HTML/JavaScript tadi dengan kode di bawah ini

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdlYB4Y58KrasmUU8dGfXTGG3MIVReR8wsAFzL__8ro8KER73yZrwHmdUhuuYV-1rMc3O7JZeltIKQR5Fi37cOF-l7bEiAKJmRmta8BQVNZCX5dE5dsl0zHTOrToLabsp5ASwrPC4YbQ/s1600/back+to+top+button.png'/></div>

Tulisan yang berwarna biru adalah gambar tombol Back to top, sobat bisa gunakan gambar sobat sendiri sesuai dengan warna templete blog sobat Dan saya juga memberikan beberapa contoh gambar Back to top yang bisa sobat gunakan

Beberapa contoh gambar untuk tombol Back to top

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7hNSK73kTDUq7OwrVB9ky3nhLwzCTzYMQ12LWKPlUQM6JHhyyI_2jctOtZc-8J_UURUhn6jnMJ_7_DKJYTZnw48F1JG-TLac_a1-eNN1HaZ0qr6HQSkUSRL0a39iaH0vVt9PVtdQgQc/s1600/back-to-top1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEils7z2ILuVdMEBWfEzqYz38Td26TNjav81pk9nMJUb1-RJMzBuHA53ogzbht6yW9RLc2g5frzQ1F7IS81pbfmCVmGbJJSxvE7wxe2s2Fka7B6yi4esj8bbERQslzjD028xv-PAIbbQN8g/s1600/back-to-top2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2SH67vgz4ZBkvuIXAUlyNq1Qk5kqKfRC_qbLYm8cC6a-QwnAyUQ-SGKykOo2_y4C3Co4yonIIfxJDqr6aBwMbyVG8vcuHHOZYxVCsQNjSu3TQpIvGJ0sC0XHXRC59CuIet7V974fGQU/s1600/back-to-top3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw58Kf1vdS0Zyh-BrPBfiM-5uMCtGxvyW_6awZR5-_31BrPL60Dz4Q3XL1OjJcKB5AjM-qyPcDx4GIQP4reVtNZ4H5AiKMcIfD5CoVw470ngUO1nuXBFi1IbdzvRPwmM3MoBFRljn59Sk/s1600/back-to-top4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibsestKC96PNIFiIA8GPr0wN6wU_TpuOUEb4_j-HxRQ5Xkle7e933A5JLEcBOOF_Np00dWlGeEjhs_AZDVl6EKERzQbL-sdX9EYU9J86auQcO4oDbkIcTWOoEIdWQZ7aBVIpf9dYJQbw/s1600/back-to-top5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDTtm8Le1ARgSzi9S9ej_XiJp_8wHJ7MNt4bQXz33HcVxVW1AVMEhOuzQz3bWC-OzSFvCDzasf3qgQ6ev53u4QEAYWPFKUvRTeY-RHopHkj5sxS3L4xBLoz2iBpV-QiyX5m5MA2WtMKms/s1600/back-to-top6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nM4kL4uAJ2wDjPyaaCFbb5agCwO8564iNL3cehbNIvYbbIqhQTPtj3_ElaMSKNil95cDCHlo31XoA2NUDrRwz5jeT5WRbQMW8m1-dmnh3_LYuxt9XZa0Y8FP1EzSvFHiTrpql9oxf0U/s1600/back-to-top7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTWa3ZCJsmAZiMIzUjmDzvkx8WOAbFRZUvTg3GasMI2utEvjmQj9ijTw23XGZbBqp6-XKjDuz3bk9YhpOK1lpW2bSLSS2whC06TDSTsEcsDhgu8yQ0pYu7vCG9n7Ti1cjglOtk-xQLdjk/s1600/back-to-top8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChjTyJiInzeCWBl6mC8RklaRdnpvHEGlLK0cpy7sR02Hi4AtMogXyH-dO3j0kSF-A6qhoz2-Z1yRqi6XFbZe78PODP0o96ZW_I5BgGld7rL_tlcmC4tgUNGmmGCPXUkv1UzJS5nalwl8/s1600/back-to-top9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNL_oZ8YX0-qxh_JzD37-As_7icUo2lpQ2FcmAy2IBIXhvBV0svVEkp9Bkv7u_G1A_lbwSuuVVE7PZ7qLKjYqnl5EfRxbqBrPh0rLMXZvhYfsLTfyWVAEiFblltuMRGHXyi2VeD8f7rc/s1600/back-to-top10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ64TBWRlrsGKWEHPUOm8wJESTDWWHBF1klH-aT6N6sWe5OjZL4GAzRdBqrrqrdqobpHYkt-TUfibQ3oPE3z0c6_wZj-DLZ8rlTu66uKbn12E3hJouA0B09V-ag5TLD__eRnznWkbcB7c/s1600/back-to-top11.png

Oke sekian dari saya, semoga bermanfaat
Keep Enjoy!