Cara Membuat Tombol Back to Top (Kembali ke Atas) di Blogger

Cara Membuat Tombol Back to Top (Kembali ke Atas) di Blogger.
Berikut ini Cara Membuat Tombol Back to Top (Kembali ke Atas). Hasil atau demonya bisa dilihat di Jejak Seru.

Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik atau satu sentuhan (tap).

Berikut cara pemasangannya di blog Anda.

#1. Pasang Kode CSS dibawah ini.
#2. Simpan di atas kode ]]></b:skin>

#myBtn {display:none;position: fixed;bottom: 20px;right:30px;z-index:99;border:none;outline:none;background-color:#357ae8;color: white;cursor: pointer;padding: 15px;border-radius: 10px;font-size:20px}
#myBtn:hover {background-color: #555;}

#3. Pasang Kode HTML dibawah ini.
#4. Simpan di atas kode </body>

<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>

#5. Pasang Kode JavaScript Kembali ke Atas
#6. Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0; // For Chrome, Safari and Opera
    document.documentElement.scrollTop = 0; // For IE and Firefox
}
//]]>
</script>

Link ke Awesome Font
Pastikan di template blog Anda sudah terpasang Link ke Awesome Font di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Demikian Cara Membuat Tombol Back to Top (Kembali ke Atas) di Blogger. Selamat Mencoba!

Berlangganan update artikel terbaru via email: