√ Cara Memasang Progress Scrollbar di Blogger

Cara Memasang Progress Scrollbar di Blogger

11/26/2018

Tips dari Namina kali ini sebenarnya tidak terlalu penting, lain lagi jika tujuan Anda ingin membuat situsnya lebih oke dan terlihat cantik ya boleh saja menggunakan tips ini.

Apa itu Progress Scrollbar? Seperti halnya dengan progress bar waktu kita melakukan copy paste file di komputer atau smartphone, saat proses copy paste biasanya akan menampilkan progress bar dari waktu yang dibutuhkan untuk menyalin file tersebut dari folder yang disalin ke folder lain. Sama halnya dengan Progress Scrollbar di Blogger ini yang akan menampilkan garis horizontal di halaman blog, saat halaman tersebut kita gulirkan akan menampilkan garis horizontal dan panjang dari garis tersebut akan memanjang mengikuti sampai dimana halaman digulirkan.

Cara Memasang Progress Scrollbar di Blogger

Bagi Anda yang tertarik untuk memasangnya bisa ikuti tips di bawah ini.

Buka dasbor Blogger > Klik menu Tema dan Edit HTML > 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>

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

Edit pada bagian yang ditandai untuk mengganti warna, posisi dan tinggi dari Progress Scrollbar.

Klik tombol Simpan tema dan selesai! Untuk melihat hasilnya bisa di cek di blog Anda.

Result

Load Progress Bar

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>