Cara Memasang Progress Scrollbar di Blogger
Snippet Tips BloggerApa 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.
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>
Edit pada bagian yang ditandai untuk mengganti warna dan tinggi dari Load Progress Bar.
Itulah Cara Memasang Progress Scrollbar di Blogger, semoga bermanfaat.