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 dikala 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 arahan </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 :
Cukup sekian dan terima kasih, supaya artikel perihal Membuat tombol back to top dengan Animasi Efect Scroll ini bermanfaat ya :)