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 aku akan mencoba menciptakan tombol back to top untuk di pasang pada blogger.
Tombol back to top ini mempunyai desain yang sederhana namun keren dengan embel-embel font awesome.
Tombol ini akan muncul saat seseorang melaksanakan scroll atau menggulir halaman blog Anda ke bawah, sehabis itu akan muncul tombol back to top di bab pojok bawah sebelah kanan.
Menggunakan tombol back to top di blogger akan membantu pembaca untuk lebih gampang kembali ke bab atas blogspot.
Akan lebih efektif kalau Anda gunakan pada blog atau website yang mempunyai artikel yang panjang atau komentar yang banyak sehingga pembaca atau pengunjung blog tidak melaksanakan scroll atau menggeser lagi ke atas, hanya cukup dengan satu klik tombol back to top mereka akan pribadi kembali ke bab atas secara otomatis.
Tombol ini juga di lengkapi imbas smooth scroll jadi saat tombol back to top di klik lalu akan melaksanakan scroll ke atas dengan imbas scroll halus.
Langsung saja kalau 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 instruksi css ini sebelum instruksi
]]></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 instruksi ini sebelum instruksi
</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/j4vascript" 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 menciptakan tombol back to top di blogger, biar bermanfaat.
Sumber http://www.caramanual.com
