Cara Membuat Tombol Back to Top di Blogger

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


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.

3 Komentar untuk "Cara Membuat Tombol Back to Top di Blogger"

  1. Keren-keren nih cara-cara penyettingan halaman blog biar lebih tampil menarik

    BalasHapus
  2. kalau ganti warna back to top nya bisa gak kak?

    BalasHapus
  3. bagus berfungsi terima kasih ilmunya..

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel