Back To Top Smooth Scrolling Pure Javascript

Back To Top Smooth Scrolling Pure Javascript

Cara Memasang Back to Top di Blog Blogspot Dengan Animasi Menggunakan Javascript

Tutorial Cara Membuat Tombol Back To Top Pada Website / Blog. Tutorial kali ini kita akan memasang tombol back to top dengan animasi ketika di scroll ke atas menggunakan CSS dan Javascript.

Nah bagi kalian yang ingin memasang tombol back to top di pojok kanan bawah blog kalian, bisa gunakan tutorial di blog mas tamvan ini :). Back to top ini tidak menggunnakan jQuery jadi tidak terlalu memberatkan loading blog.

Untuk melihat tampilan dari tombol back to top ini, kalian bisa lihat di link berikut ini.
Demo Button Back To Top With Smooth Scrolling

Nah untuk tutorial Cara Pemasangannya ke blog, silahkan ikuti langkah demi langkah dibawah ini..

Membuat Tombol BackTto Top Dengan CSS dan Javascript

  • langkah pertama, login terlebih dahulu ke blogger.com
  • Setelah login kalian masuk ke menu, Template, Edit HTML
  • Setelah berada di Edit HTML, kalian cari kode </head>
  • Setelah ketemu, masukan script dibawah ini tepat di atasnya
    • 
<style type='text/css'>
/*<![CDATA[*/
/*Back To Top*/
.scroll-button{box-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(210,104,211);color:rgb(249,104,211);border-radius:0%;position:fixed}
.scroll-button:hover{filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}
.scroll-button--hidden{filter:alpha(opacity=0);filter:progd:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;visibility:hidden}
/*]]>
</style>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
  • Setelah di pasang. Tinggal Save n Done
  • Cek ke blog kalian dan scroll ke bawah.

Jangan lupa mampir ke tutorial lainnya gan :)

Tutorial Blogger Lainnya :


Cukup sekian dan terima kasih, semoga artikel tentang Membuat tombol back to top dengan Animasi Efect Scroll ini bermanfaat ya :)

Tinggalkan Komentar