Cara Membuat Tombol Back to Top di Blogger

Memasang tombol back to top atau tombol kembali ke atas memang sudah bukan hal yang aneh lagi, kebanyakan dari desainer template atau pembuat template sudah menambahkan fitur tombol back to top ini ke dalam template yang dibuatnya.

Mungkin beberapa diantara kalian masih ada yang belum memasang widget tombol back to top ini di blog, kali ini saya akan mencoba membuat tombol back to top untuk di pasang pada blogger.

Tombol back to top ini memiliki desain yang sederhana namun keren dengan tambahan font awesome.

Tombol ini akan muncul ketika seseorang melakukan scroll atau menggulir halaman blog Anda ke bawah, setelah itu akan muncul tombol back to top di bagian pojok bawah sebelah kanan.

Menggunakan tombol back to top di blogger akan membantu pembaca untuk lebih mudah kembali ke bagian atas blogspot.

Akan lebih efektif jika Anda gunakan pada blog atau website yang memiliki artikel yang panjang atau komentar yang banyak sehingga pembaca atau pengunjung blog tidak melakukan scroll atau menggeser lagi ke atas, hanya cukup dengan satu klik tombol back to top mereka akan langsung kembali ke bagian atas secara otomatis.

Tombol ini juga di lengkapi efek smooth scroll jadi ketika tombol back to top di klik kemudian akan melakukan scroll ke atas dengan efek scroll halus.

Langsung saja jika Anda ingin menambahkan tombol back to top di blogger silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Tombol Back to Top di Blog

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Letakkan kode css ini sebelum kode ]]></b:skin> atau </style>

/* Back to top button caramanual.com */
.scroll-top-wrapper {
    position: fixed;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
 text-align: center;
 z-index: 99999999;
    background-color: #777777;
 color: #eeeeee;
 width: 50px;
 height: 48px;
 line-height: 48px;
 right: 30px;
 bottom: 30px;
 padding-top: 2px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
 background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
 opacity: 1.0;
}
.scroll-top-wrapper i.fa {
 line-height: inherit;
}

4. Kemudian tambahkan kode ini sebelum kode </body>

<!-- Back to top button caramanual.com -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
 $(document).on( 'scroll', function(){
  if ($(window).scrollTop() > 100) {
   $('.scroll-top-wrapper').addClass('show');
  } else {
   $('.scroll-top-wrapper').removeClass('show');
  }
 });
 $('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
 verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
 element = $('body');
 offset = element.offset();
 offsetTop = offset.top;
 $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>

5. Klik Simpan tema

Itulah artikel mengenai cara membuat tombol back to top di blogger, semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini