Cara Memasang Tombol Back To Top Dengan Progress Scroll
Saat sebuah blog mempublikasi artikel yang cukup panjang, maka sebuah kemudahan untuk kembali ke halaman atas harus diberikan kepada pembaca. Oleh karena itu saat ini hampir semua pembuat template blog selalu menyisipkan fitur back to top.
Nah dalam tutorial blogger kali ini, saya ingin berbagi cara memasang sebuah tombol back to top yang dilengkapi dengan progress scroll menurut panjang pendek artikel dalam sebuah halaman.
Cara Memasang Tombol Back To Top Dengan Progress Scroll
Berikut ini adalah beberapa yang harus anda lakukan dalam pemasangan tombol back to top dengan progres scroll.
- Buka Dashboard Blogger
- Pilih Tema
- Pilih Edit HTML
Letakan kode dibawah ini 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>Kemudian letakan 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>Klik simpan dan lihat hasilnya.
Apabila di blog anda sudah terpasang kode pemanggil font awesome, maka secara otomatis tombol back to top dengan progress scroll ini akan terpasang dengan baik.
Namun apabila setalah pemasangan kode back to top ini selesai, lalu tombolnya tidak tampil, maka mungkin blog anda belum memasang kode pemanggil font awesome.
Solusinya, cari dan letakan kode di bawah ini sebelum </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>Apabila dalam template anda sudah terpasang tombol back to top, sebaiknya kode tombol tersebut di hapus agar tidak bertabrakan dengan kode back to top dengan progress scroll.
Sebagai contoh pada tamplate viomagz yang saya gunakan, apabila kode back top top dengan progress scroll ini ingin di pasang, maka saya harus menghapus kode css dan HTML di bawah ini.
CSS
/* Back to top */ #back-to-top { background:$(backtp.background.color); color:$(backtp.color); padding:6px 6px; font-size:24px; border-radius: 30px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30); } .back-to-top { position: fixed !important; position: absolute; bottom: 25px; right: 20px; z-index: 998; }
HTML
<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</a>
</div>Penghapusan ini bertujuan untuk menghindari tombol back to top dengan progress scroll yang tumpang tindih dengan tombol back to top bawaan template viomagz.
Tentunya kode back to top untuk setiap template berbeda-beda. Oleh karena itu silahkan anda mencoba memasang tombol back to top dengan progress dan scroll tersebut sebaik mungkin.
Nah itulah tutorial blogger tentang cara memasang tombol back to top dengan progress scroll.
Semoga bermanfaat.
Referensi: arlinacode.com
Posting Komentar