√ Membuat Efek Progress Loading Blog seperti di Youtube - AdityaTekno

Social Items

Membuat Efek Loading Blog seperti Youtube

Membuat Efek Progress Loading Blog seperti di Youtube - Tutorial blogging kali ini saya akan membahas cara membuat efek loading blog seperti youtube. Nah, kalo anda teliti ketika membuka halaman Youtube, maka anda akan melihat sebuah efek progress loading paling atas situs berwarna merah dari kiri ke kanan.  Dan pasti sudah familiar bagi anda yang sering nonton video di youtube.
Hmm, keren kan? Anda pun bisa membuat efek progress loading seperti itu di Blogger dengan bantuan javascript. Dan caranya pun cukup mudah. Jadi, anda tidak perlu khwatir jika tidak bisa. 

Baik, jika anda minat memasang efek loading ini, untuk mempercantik tampilan blog disaat seseorang membuka artikel di blog anda, maka silahkan memasang efek loading ini. Berikut cara memasangnya adalah sebagai berikut.


Membuat Efek Progress Loading Blog seperti di Youtube

Pertama masuk dulu ke Blogger >> Template >> Edit HTML, setelah itu copy kode di bawah ini dan letakkan di atas kode </body>. Atau melakukan kombinasi Ctrl+F untuk lebih mudah dalam pencarian.
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#df0d0d";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>

Kemudian Klik Simpan Tema. Sangat simple kan caranya. Dan lihat hasilnya.

Script di atas saya dapat dari blog Kompi Ajaib, jadi jangan khawatir lagi untuk di pasang di template anda, karena pasti working dan valid HTML5 juga.

Sekian tutorial kali ini yaitu tentang Cara Membuat Efek Progress Loading Blog seperti di Youtube. Good luck! Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

Membuat Efek Progress Loading Blog seperti di Youtube

Membuat Efek Loading Blog seperti Youtube

Membuat Efek Progress Loading Blog seperti di Youtube - Tutorial blogging kali ini saya akan membahas cara membuat efek loading blog seperti youtube. Nah, kalo anda teliti ketika membuka halaman Youtube, maka anda akan melihat sebuah efek progress loading paling atas situs berwarna merah dari kiri ke kanan.  Dan pasti sudah familiar bagi anda yang sering nonton video di youtube.
Hmm, keren kan? Anda pun bisa membuat efek progress loading seperti itu di Blogger dengan bantuan javascript. Dan caranya pun cukup mudah. Jadi, anda tidak perlu khwatir jika tidak bisa. 

Baik, jika anda minat memasang efek loading ini, untuk mempercantik tampilan blog disaat seseorang membuka artikel di blog anda, maka silahkan memasang efek loading ini. Berikut cara memasangnya adalah sebagai berikut.


Membuat Efek Progress Loading Blog seperti di Youtube

Pertama masuk dulu ke Blogger >> Template >> Edit HTML, setelah itu copy kode di bawah ini dan letakkan di atas kode </body>. Atau melakukan kombinasi Ctrl+F untuk lebih mudah dalam pencarian.
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#df0d0d";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>

Kemudian Klik Simpan Tema. Sangat simple kan caranya. Dan lihat hasilnya.

Script di atas saya dapat dari blog Kompi Ajaib, jadi jangan khawatir lagi untuk di pasang di template anda, karena pasti working dan valid HTML5 juga.

Sekian tutorial kali ini yaitu tentang Cara Membuat Efek Progress Loading Blog seperti di Youtube. Good luck! Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo