Cara Membuat Smooth Back To Top Ala Ignil di Blogger
Saat ini hampir semua pembuat template sudah memasang fitur back to top pada template yang mereka buat. Namun tidak jarang juga ada template yang meski sudah memiliki fitur back to top, namun tampilannya masih terasa kaku.
Nah di kesempatan kali ini, saya akan berbagi sebuah cara memasang fitur back to top yang smooth saat tampil atau menghilang ala mbak ignil.
Cara Memasang Back To Top Smooth di Blogger
Berikut ini adalah langkah-langkah yang harus Anda lakukan dalam pemasangan fitur back to top smooth buatan mbak Ignil.
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Cari dan letakan kode di bawah ini sebelum <head>
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jika sudah ada, skip kode tersebut dan langusung pasang kode di bawah ini sebelum kode </style>
/* Back To Top by igniel.com */
.ignielToTop {visibility:hidden; width:50px; height:50px; position:fixed; bottom:50px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; opacity:0; -webkit-transform:translateZ(0); transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop:hover {opacity: 1; background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop.show {visibility:visible; bottom:20px; opacity:1;}
Selanjutnya, letakam kode di bawah ini sebelum </body>
<div class='ignielToTop'/>
<script>
$(document).scroll(function() {
return $(document).scrollTop() > 300 ? $('.ignielToTop').addClass('show') : $('.ignielToTop').removeClass('show')
}), $('.ignielToTop').click(function() {
return $('html,body').animate({
scrollTop: '0'
});
});
</script>
Klik simpan dan lihat hasilnya.
Sebelum Anda memasang fitur back to top smooth di blog Anda, sebaiknya backup dulu template blog Anda untuk mnghindari error ketika ada kesalahan dalam pemasangan.
Semoga bermnafaat.
Referensi: ignil.com
Posting Komentar