Membuat Efek Loading Blog Seperti Youtube (keren)

Cara Membuat Loading Blog Seperti Youtube - Kalau di perhatikan dengan seksama, sebuah garis berwarna merah akan muncul saat kita mengklik sebuah link di Youtube ( perhatikan di bagian atas situsnya).

Bagi Anda yang sering bolak-balik nonton video di Youtube mungkin tidak asing lagi dengan efek loading yang saya maksud.

Membuat Efek Loading Blog Seperti Youtube (keren)

Efek ini tentunya sangat menarik dan familiar di benak Anda. Jadi saat di pasang di Blog, tentu menjadi nilai tambah tersendiri khususnya bagi pembaca.

Saya juga suka gan efek loadingnya, cara memasangnya bagaimana ?

Tenang saja, untuk cara memasangnya tidak rumit kok, cukup dengan mengikuti langkah dibawah ini.

1.Masuk ke Blog Anda terlebih dahulu.
2.Sekarang pilih menu Template>Edit HTML.
3.Lalu cari kode </body> dengan Ctrl+F
4.Masukkan kode di bawah ini tepat di atas kode yang tadi.

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

Note:
,height:"2px" untuk ketebalan dari loading
 b;a.bg=a.bg||"#db3131" ubah kode warna biru sesuai dengan warna loading yang di inginkan.

5.Sekarang cek sendiri Blog sobat. Semakin keren bukan?

Code Source : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html                                                                                                       http://www.madamvia.web.id/2015/03/membuat-progress-loading-blog-youtube.html


Artikel Terkait

Previous
Next Post »

6 komentar

Tulis komentar
Ikhwan Zubir
AUTHOR
May 16, 2016 at 4:01 AM delete

apakah dapat memperlambat loading blog gan ?

Reply
avatar
David Banurea
AUTHOR
May 16, 2016 at 5:06 AM delete

Enggak kok gan, saya juga pakai dan loadingnya biasa saja. Jadi intinya ini tidak memperlambat blog sama sekali.

Reply
avatar
Reno Subarjo
AUTHOR
May 18, 2016 at 1:17 AM delete

Betul gan, tidak memperlambat loading sama sekali.

Terima kasih infonya.

Reply
avatar
David Banurea
AUTHOR
May 18, 2016 at 3:26 AM delete

Sama-sama gan. Terima kasih juga telah membaca postingan saya kali ini. :)



Reply
avatar
Dy Dac
AUTHOR
June 21, 2016 at 4:21 AM delete

Terimakasih infonya..

Reply
avatar

Berikan tanggapan relavan Anda terhadap artikel saya diatas. Nggak usah capek-capek nulis komentar Spam...

...tidak akan dipublish kok! EmoticonEmoticon