petrussiahaan.com - Cara Memasang Progress Scrollbar pada Blog - Jika Anda ingin meningkatkan tampilan dan fungsionalitas blog Anda di Blogger, salah satu hal yang bisa Anda lakukan adalah memasang progress scrollbar. Progress scrollbar adalah elemen desain yang menunjukkan sejauh mana pengguna telah menggulir halaman.
Ini adalah fitur yang populer dan bisa memberikan pengalaman pengguna yang lebih baik. Dalam artikel ini, kami akan membahas langkah-langkah untuk Cara Memasang Progress Scrollbar pada Blog.
Cara Mudah Memasang Progress Scrollbar di Blogger
Buka dasbor Bloggeranda kemudian > Klik menu Tema dan Edit HTML > lalu Salin dan Tambahkan kode ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>Salin dan Tambahkan kode ini di bawah kode <body>
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>Selanjutnya tambahkan kode CSS ini sebelum </head>
<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#f39c12;z-index:10}
progress::-moz-progress-bar{background-color:#f39c12;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#f39c12;width:0%;display:block;height:inherit;z-index:10}
</style>Klik tombol Simpan Tema dan selesai! Untuk melihat hasilnya bisa di lihat pada blog Anda.
Load Progress Bar Blogger
Cara kerja dari Load Progress bar adalah menampilkan garis horizontal di atas saat halaman sedang dimuat. Bagi Anda yang hanya ingin memasang Progress bar saat halaman dimuat, bisa tambahkan kode ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"4px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#f39c12";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>Kesimpulan
Memasang progress scrollbar di Blogger dapat meningkatkan tampilan dan fungsionalitas blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah memasang scrollbar yang menarik dan berguna untuk membantu pengguna melihat sejauh mana mereka telah menggulir halaman. Selamat mencoba!
https://www.naminakiky.com/2018/11/cara-memasang-progress-scrollbar-di-blogger.html
