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 saat di scroll ke atas memakai CSS dan Javascript.

Nah bagi kalian yang ingin memasang tombol back to top di pojok kanan bawah blog kalian, dapat 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 dapat 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 isyarat </head>

• Setelah ketemu, masukan script dibawah ini sempurna 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 :

• SEO NGILER - Template Simple Seo Fast Loading Responsive

• Membuat Slider Random Post Responsive

• Cara Praktis Membuat Tabel Di Postingan Blog Dengan Tool

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