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.

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

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Artikel Terkait

• Mengatasi Spam: Cara Mengatur Moderasi Komentar BlogMemiliki banyak komentar terkadang menjadi kebanggaan tersendiri bagi seorang Blogger. Ini menandakan bahwa postingan y
• Ayo Cek Pagerank Blog Kamu Di Sini [Siapa Tahu Naik!]Kalau Anda lagi nyasar ke blog ini dan lagi pengen tahu pagerank blognya, gak usah putar haluan banting setir ke prchec
• 5+1 Mitos Tentang Alexa Rank yang "Malah" Sering Dipercayai Alexa rank adalah sebuah peringkat yang diberikan kepada sebuah situs (blog atau website) berdasarkan banyaknya tr
• Cara Paling Cepat dan Mudah Mengetahui ID Facebook SiapapunBeberapa hari yang lalu, saya merasa sedikit kesulitan ketika mengisi rentetan kode meta tag seo di blog ini. Salah sat