25 May 2016

CARA MEMBUAT EFEK LOADING DI BLOG

Cara Membuat Efek Loading Di Blog - Kali ini saya akan memberikan bagaimana memberi efek loading pada blog yang tentunya blog kalian akan semakin menarik dan indah , serta menambah nilai sendiri khususnya bagi para pembaca .

Langkah yang dibuat sangatlah sederhana, tidak akan memperlambat loading blog namun akan menjadi blog kalian menarik.

untuk efek loading silahkan liat gambar di bawah ini

Dicoba!

nah loadingnya itu garis biru panjang dari kiri ke kanan menarik bukan?
untuk itu mari langsung ke langkah-langkahnya

1.Masuk ke blog
2.pilih Menu Template>Edit HTML
3.lalu cari kode </body> (langkah cepatnya dengan CRTL+F)
4.masukan kode dibawah ini diatas kode </body>


<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||"#112cce";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>

5.Save template dan liat hasilnya tradaaa...

kalian juga bisa mengganti tulisan yang di warna pink
3px   : untuk ketebalan garis loading
#112cce : warna loading 

untuk yang ingin bertanya, memberi kritik dan saran jangan sungkan" silahkan berkomentar :)

0 comments:

Follow us