Cara Membuat Efek Loading Page Youtube di Blogger

Cara Membuat Efek Loading Page Youtube di Blogger - Mungkin untuk anda yang sering menonton video di situs youtube.com, anda sudah tidak asing lagi dengan animasi loading page yang satu ini. Karna animasi loading page ini diadaptasi dari loading page youtube ketika kita hendak membuka sebuah halaman disitus youtube tersebut. Nah, pada kesempatan kali ini, saya akan berbagi tips bagaimana cara memasang widget efek animasi loading page youtube ini di blog anda. Untuk membuat tampilan loading page anda menjadi lebih keren pastinya.

Untuk Demo, anda bisa klik disini.

Baca Juga: Membuat Efek Animasi Preloading di Blogger

Bagaimana, apakah anda tertarik untuk mencoba Membuat Efek Animasi Loading Page Youtube ini diblog anda? Jika anda tertarik dan ingin memasang widget loading page yang satu ini, anda bisa mengikuti langkah-langkahnya dibawah ini :

1. Masuk ke Akun Blogger anda
2. Lalu pilih Template > Edit HTML
3. Selanjutnya cari </body> dan paste kode berikut tepat diatasnya, lalu simpan template.

<script type='text/javascript'>
//<![CDATA[ Loading Youtube !
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||"#c41411";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> 

Atau gunakan kode dibawah ini untuk warna alternatif

<style>#nprogress{pointer-events:none}#nprogress
 
.bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress

 .peg{-ms-transform:rotate(3deg) 
translate(0px,-4px);-webkit-transform:rotate(3deg) 
translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px 
#29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg)

 translate(0px,-4px);width:100px}#nprogress 
.spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress

 .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear 
infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 
2px 
transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style><div

 id='loadMore'/><script 
src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script

 src='http://goo.gl/10Okof'/> 

Dengan bantuan kode Javascript diatas, kita bisa Membuat Efek Loading Page Youtube di Blogger dengan mudah, dan membuat tampilan blog kita menjadi lebih menarik dengan adanya loading page ini diblog anda.

Baiklah mungkin itu saja untuk artikel saya kali ini, jika anda memiliki masalah atau pertanyaan silahkan ajukan saja dibawah ini, sampai jumpa.

Semoga bermainfaat..