Welcome to MySide

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

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 di Blogger. Hasil atau demonya bisa dilihat di CB News, kanan bawah.

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 Kembali ke Atas
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'/>

Demikian Cara Membuat Tombol Back to Top - Kembali ke Atas di Blogger. Good Luck! (www.contohblog.com).*


Subscribe to receive free email updates: