Cara Membuat Tombol Back to Top di Blog Keren - 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.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Letakkan kode css ini sebelum kode
4. Kemudian tambahkan kode ini sebelum kode
5. Klik Simpan tema
Itulah artikel mengenai cara membuat tombol back to top di blogger, semoga bermanfaat.
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.
Cara Membuat Tombol Back to Top di Blog
Langsung saja jika Anda ingin menambahkan tombol back to top di blogger silahkan ikuti langkah-langkahnya di bawah ini.
2. Klik Tema > Edit HTML
3. Letakkan kode css ini sebelum kode
]]></b:skin> atau </style>.
/* Back to top button jalanpintarr-id.blogspot.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 jalanpintarr-id.blogspot.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>
Itulah artikel mengenai cara membuat tombol back to top di blogger, semoga bermanfaat.