Cara Membuat Tombol Back to Top atau Kembali ke Atas di Blogger

Cara Membuat Tombol Back to Top atau Kembali ke Atas di Blogger

BERIKUT ini Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger. Demonya Anda bisa lihat di blog saya.

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.

Pasang Kode CSS
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;}

Pasang Kode HTML
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>

Pasang Kode JavaScipt
Simpan di atas kode

<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'/>

SEMOGA BERMANFAAT!!