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).*
