Cara Membuat Loading Bar di Blog Seperti YouTube

Cara Membuat Loading Bar di Blog Seperti YouTube

Cara Membuat Loading Seperti Pada Progress YouTube di Blog - Sebelum melanjutkan Tutorial kali ini saya sudah pernah juga menerangkan bagaimana cara membuat loading blog dengan animasi di blogger. Pada tutorial kemarin itu saya memberikan Efek background menggunakan animasi flash gambar, Nah Tutorial kali ini saya tidak ikut menyertakan animasi tersebut.

"Sebelumnya, Apakah anda pernah mampir ke situs Youtube ?" Jika itu benar, Saya rasa sewaktu anda membuka halaman baru pasti anda akan melihat garis merah di bar you tube tersebut, Itulah yang akan saya bagikan kepada anda untuk bagaimana cara membuatnya pada blog anda. YouTube progress ini hanya menggunakan kode javascript tanpa CSS yang berbeda dengan tutorial sebelumnya. Nah jika anda tertarik untuk mencoba, anda bisa melihat animasi screen shootnya beserta cara pembuatanya dibawah berikut.

Cara Membuat Loading Blog Seperti Progress Bar YouTube

1. Login Ke akun blogger anda
2. Masuk ke menu Template danPilih Edit HTML
3. Selanjutnya letakkan kode dibawah berikut tepat diatas </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>

Informasi :
height:"2px" (Ketebalan Garis Loading Bar)
a.bg=a.bg||"#db3131" (Warna Garis, Silahkan anda ganti #db3131 dengan warna kesukaan anda)

4. Save template anda dan selesai.
Silahkan anda membuka salah satu halaman blog anda dan perhatikan pada blog bar anda akan terlihat garis merah seperti pada youtube, dan jika muncul berarti anda telah selesai memasangnya pada blog anda. Semoga bermanfaat!

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »