Cara Memasang Tombol Back to Top dengan Progress di Blogger

Arsipbiru.com - Selamat datang kembali di Arsipbiru. Pada pertemuan kali ini, saya akan membagikan tutorial bagaimana cara memasang back to top dengan progress. Anda tentu pernah menjumpai suatu website dimana ketika menggulirnya ke bawah secara perlahan, Anda akan melihat suatu tombol back to top yang unik.

Tombol back to top tersebut akan menunjukkan suatu progress untuk mengetahui sampai dimana halaman digulir. Progress tersebut dianimasikan melalui sebuah garis di tombol back to topnya. Hal ini berfungsi sebagai salah satu cara untuk mendorong pengguna menelusuri lebih banyak artikel atau konten yang lainnya dengan mudah.

Tombol back to top merupakan suatu tombol yang berperan cukup penting bagi website dengan konten yang panjang. Dengan adanya tombol back to top, akan memudahkan pengunjung kembali ke informasi paling atas dengan cepat apabila terdapat informasi yang terlewatkan.

Nah, untuk memasang tombol back to top dengan progress di Blogger terbilang cukup mudah. Hanya butuh sedikit barisan kode JavaScript, CSS, dan HTML. Berikut langkah-langkah memasang tombol back to top dengan progress di Blogger. Simak baik-baik, ya.

Cara Memasang Tombol Back to Top dengan Progress di Blogger

1. Pertama, masuk ke akun Blogger masing-masing.

2. Lalu, pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

3. Tombol back to top yang saya bagikan ini menggunakan Fontawesome. Jika blog Anda belum terpasang Fontawesome, silahkan masukkan kode berikut ini di atas kode </head>.

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

4. Selanjutnya, cari kode ]]></b:skin> atau </style> dan masukkan kode berikut ini di atas kode ]]></b:skin> atau </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%}}

.back-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}

.back-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}

.back-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}

.back-to-top:hover::after{opacity:0}

.back-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}

.back-to-top:hover::before{opacity:1}

.back-to-top svg path{fill:none}

.back-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}

5. Selanjutnya, cari kode </body> dan masukkan kode HTML dan JavaScript berikut ini di atas kode </body>.

<div class='back-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>

JavaScript

<script>

//<![CDATA[

// back to top with progress

!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".back-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(".back-to-top").addClass("active-progress"):jQuery(".back-to-top").removeClass("active-progress")}),jQuery(".back-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);

//]]>

</script>

6. Tahap terakhir, simpan Tema dan lihat hasilnya.