Cara Membuat Tombol Back To Top Yang Keren Di Blog

tombol back to top merupakan fitur untuk memudahkan para pengunjung blog untuk kembali ke bagian atas blog / artikel.

tombol ini akan lebih efektif jika anda menggunakannya pada blog atau website yang memiliki artikel yang panjang atau komentar yang banyak sehingga pembaca atau pengunjung blog anda tidak perlu mengscroll atau menggeser ke atas secara manual, hanya cukup dengan mengklik tombol back to top maka mereka akan langsung kembali ke bagian atas secara otomatis.

Memasang tombol back to top memang sudah bukan hal ane lagi, dikarenakan telah banyak designer template yang telah menambahkan fitur ini ke dalam template buatannya, salah satunya template viomagz buatang mas sugeng ini.

meskipun begitu, mungkin saja template yang anda gunakan tidak mendukung fitur ini, nah untuk itulah saya akan membagikan tutorial cara memasang atau membuat tombol back to top diblogger.

Tombol back to top ini memiliki desain yang cukup sederhana namun keren karna menggunakan icon font awesome sehingga tidak akan mengurangi kecepatan loading blog anda.

ketika seseorang melakukan scroll atau menggulir halaman blog  ke bawah, maka tombol back to top akan muncul secara otomatis pada bagian pojok bawah sebelah kanan blog.

selain itu tombol back to top ini dilengkapi dengan efek smooth scroll sehingga ketika anda mengklik tombol ini maka akan melakukan scroll ke atas dengan efek scroll halus.

jika anda tertarik untuk mencobanya, silahkan simak tutorial beriku ini

Cara Membuat Tombol Back To Top Yang Keren Di Blogger

   Demo 

1.  silahkan login terlebih dahulu akun blogger anda
2. kemudian pada menu dasbord klick tema > edit html
3. Letakkan script css dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Back to top button by b-ngeblog.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. Setelah itu tambahkan script di bawah ini tepat sebelum code </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. Terakhir klick simpan tema

Penutup

itulah tadi tutorial cara membuat tombol back to top yang keren di blog, semoga artikel ini bermanfaat bagi anda.

dan jika anda memiliki pertanyaan, saran ataupun kritik mengenai artikel ini silahkan ajukan pada kolom komentar di bawah atau dengan mengajukannya pada halaman contact.

Akhir Kata
see you next time and thanks to caramanual.com

Share this post

Berlangganan update artikel terbaru via email: