Cara Membuat Progress Loading Bar Blog Seperti Youtube

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.  
 Progress Loading Bar Blog Seperti Youtube

Dan dibawah ini adalah screenshot progress loading bar yang telah saya pasang pada blog ini.
Cara Membuat Progress Loading Bar Blog Seperti Youtube


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
SHARE TO :
| | Template Created By : Binkbenks | CopyRigt By : Online oke | |
close
Banner iklan disini
> [Tutup]