Membuat Tombol Back to Top dengan Progress di Blogger

Pada kesempatan kali ini Kombur News ingin berbagi tutorial cara membuat tombol back to top dengan progress di blogger. Tombol back to top dengan progress ini memiliki fungsi yang sama dengan tombol back to top yang lainnya, Hanya saja yang baru ini memiliki tambahan fungsi untuk menunjukkan animasi garis sampai dimana halaman akan digulir. Ini adalah salah satu cara untuk membuat pengguna lebih mudah membaca konten lainnya.

Back to Top

Tombol back to top dengan progress sangat penting untuk situs web yang memiliki banyak halaman informasi, situs web dengan banyak informasi akan membuat konten lain terlewati dan menggulir ke bawah halaman.

Bagi kamu yang ingin memasangnya silakan ikuti tutorial berikut ini :

Cara Memasang Tombol Back to Top dengan Progress di Blogger

Kode yang akan dibagikan 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>

Baca Juga : Cara Buat Daftar Isi (Sitemap) di Halaman Statis Blogger

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%}}
.komburnews-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}
.komburnews-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.komburnews-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}
.komburnews-to-top:hover::after{opacity:0}
.komburnews-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}
.komburnews-to-top:hover::before{opacity:1}
.komburnews-to-top svg path{fill:none}
.komburnews-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 kode berikut ini sebelum </body>

<div class='komburnews-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(".komburnews-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(".komburnews-to-top").addClass("active-progress"):jQuery(".komburnews-to-top").removeClass("active-progress")}),jQuery(".komburnews-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.

Baca Juga : Widget Recent Posts di Sidebar Blogger

Sekian dulu tutorial tentang Cara Membuat Tombol Back to Top dengan Progress di Blogger, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.