logo blog

Back To Top Smooth Scrolling Pure Javascript

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 :)



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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Back To Top Smooth Scrolling Pure Javascript. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Back To Top Smooth Scrolling Pure Javascript. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon