Author : UnknownTidak ada komentar
Cara Membuat Progress Loading Bar Blog Seperti Youtube | Kali ini tentunya saya masih membahas tips&trik Blogger. Tidak sengaja saya jalan-jalan ke blognya KompiAjaib kemudian saya menemukan artikel yang cukup menarik ini dan sudah saya coba sendiri. Secara tidak sadar ketika kita membuka halaman Youtube akan terlihat sebuah progress bar dibagian paling atas yang berwarna merah yang bergerak dari kiri ke kanan. Menurut saya itu menarik, apakah sobat ingin memiliki blog dengan progress loading bar seperti Youtube? tenang kini pak Adhy Suryadi punya solusinya.
Berikut adalah screenshot progress loading bar pada youtube yang akan kita masukkan ke blog kita.
Dan dibawah ini adalah screenshot progress loading bar yang telah saya pasang pada blog ini.
Menarik bukan? bagaimanakah cara memasangnya di Blogger? silahkan copy dan paste javascript dibawah ini tepat di atas code </body>
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",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||"#db3131";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>
Panduan Pemasangan
height:"2px"
untuk menentukan ketebalan loading bar.a.bg=a.bg||"#db3131"
untuk warna loading bar, silahkan ganti #db3131
dengan warna yang sobat sukai.Sekian dulu berbagi kali ini semoga bermanfaat bagi para Blogger sekalian. Dapatkan juga Tips&Trik Blogger, SEO dan Komputer menarik lainnya hanya di KalongGanteng.
sumber:kompiajaib.com
Artikel Terkait
Posted On : Sabtu, 20 Desember 2014Time : 09.40