Cara Memasang Tombol Back To Top dengan Progress

Cara Memasang Tombol Back To Top dengan Progress

Kali ini Arlina Code akan berbagi tips Cara Memasang Tombol Back To Top dengan Progress.

Cara Memasang Tombol Back To Top dengan Progress

Tombol Back To Top dengan Progress ini fungsinya sama seperti tombol back to top seperti di tutorial sebelumnya di blog ini, perbedaannya ada satu fungsi lagi yaitu untuk mengetahui sampai dimana halaman digulir dengan menunjukkan animasi garis di tombol back to topnya. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Tombol Back To Top dengan Progress memiliki peranan yang cukup penting bagi sebuah situs dengan konten yang memiliki isi halaman yang panjang, untuk situs yang memiliki banyak informasi pada halamannya akan membuat konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.

Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini :

Cara Memasang Tombol Back To Top dengan Progress


Kode yang akan saya bagikan ini menggunakan ikon dari Fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini sebelum </head> pada Template editor.

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Setelah menambahkan kode Fontawesome silakan tambahkan kode di bawah ini tepat sebelum </head>


Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian tambahkan kode di bawah ini tepat sebelum </head>

<style>
/* Back to top with progress */
@-webkit-keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}}
.arlina-to-top{background:#fff;position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:99em;box-shadow:inset 0 0 0 2px rgb(0 0 0 / 10%);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-15px);transition:all .3s linear}
.arlina-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.arlina-to-top::after{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;color:rgba(0,0,0,0.3);left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;transition:all .3s linear}
.arlina-to-top:hover::after{opacity:0}
.arlina-to-top::before{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;opacity:0;background:black;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;transition:all .3s linear}
.arlina-to-top:hover::before{opacity:1}
.arlina-to-top svg path{fill:none}
.arlina-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}
</style>

Selanjutnya tambahkan kedua kode di bawah ini sebelum </body>

<div class='arlina-to-top'>
   <svg class='progress-circle svg-content' height='100%' viewBox='-1 -1 102 102' width='100%'>
      <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/>
   </svg>
</div>

<script>
//<![CDATA[
// back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".arlina-to-top path"),b=a.getTotalLength();a.style.transition=a.style.WebkitTransition="none",a.style.strokeDasharray=b+" "+b,a.style.strokeDashoffset=b,a.getBoundingClientRect(),a.style.transition=a.style.WebkitTransition="stroke-dashoffset 10ms linear";var c=function(){var c=$(window).scrollTop(),d=$(document).height()-$(window).height();a.style.strokeDashoffset=b-c*b/d};c(),$(window).scroll(c),jQuery(window).on("scroll",function(){jQuery(this).scrollTop()>50?jQuery(".arlina-to-top").addClass("active-progress"):jQuery(".arlina-to-top").removeClass("active-progress")}),jQuery(".arlina-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
//]]>
</script>

Langkah selanjutnya Simpan tema dan lihat hasilnya di blog sobat.


Sekian untuk tips Cara Memasang Tombol Back To Top dengan Progress, semoga bermanfaat dan wassalam.
Load comments