Cara Membuat Efek Ledakan Pada Cursor di Blog

Cara Membuat Efek Ledakan Pada Cursor di Blog - Cara membuat efek ledakan di blog dapat mempercantik suatu tampilan blog. Efek ini sangat cocok jika di pasang dengan background blog berwarna hitam, karena efek ledakan ini mirip sekali dengan petasan yang biasa di pakai saat malam pergantian tahun (tahun baru) dan efek ini memiliki warna yang berbeda-beda. Akan tetapi, efek ini muncul saat on click atau mouse diklik. Anda penasaran bagaiamana hasilnya, yuk lihat DISINI

Apakah efek ini dapat membuat blog menjadi berat ?

Oh, tentu tidak. efek ini tidak membuat blog Anda menjadi berat, meskipun kode scriptnya dibilang lumayan terlalu banyak.

Okeh, jika Anda ingin memasang efek ini di blog Anda, silahkan ikuti langkah-langkah di bawah ini.

Berikut Cara Membuat Efek Ledakan Pada Cursor di Blog :

1. Login ke blogger.com
2. Pilih Menu Template > Edit HTML
3. Cari kode </head> (gunakan F3 atau Ctrl + F untuk mempermudah pencarian)
4. Copy dan pastekan kode script di bawah ini tepat di atas kode </head>
<script type="text/javascript">
// <![CDATA[
var sparks=75; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c');
007 //                     blue    red     green   purple  cyan    orange  pink

/****************************
*   Clicksplosion Effect    *
* (c) 2012 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {
  var i, j;
  window.onscroll=set_scroll;
  window.onresize=set_width;
  document.onclick=eksplode;
  set_width();
  set_scroll();
  for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
    stars[j]=createDiv('*', 13);
    document.body.appendChild(stars[j]);
  }
}}

function createDiv(char, size) {
  var div, sty;
  div=document.createElement('div');
  sty=div.style;
  sty.font=size+'px monospace';
  sty.position='absolute';
  sty.backgroundColor='transparent';
  sty.visibility='hidden';
  sty.zIndex='101';
  div.appendChild(document.createTextNode(char));
  return (div);
}

065 function bang(N) {
  var i, Z, A=0;
  for (i=sparks*N; i<sparks*(N+1); i++) {
    if (decay[i]) {
      Z=stars[i].style;
      Xpos[i]+=dX[i];
      Ypos[i]+=(dY[i]+=1.25/intensity[N]);
      if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
      else {
        Z.left=Xpos[i]+'px';
        Z.top=Ypos[i]+'px';
     }
     if (decay[i]==15) Z.fontSize='7px';
     else if (decay[i]==7) Z.fontSize='2px';
     else if (decay[i]==1) Z.visibility='hidden';
     decay[i]--;
    }
    else A++;
  }
  if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}
function eksplode(e) {
  var x, y, i, M, Z, N;
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
  N=++count%bangs;
  M=Math.floor(Math.random()*3*colours.length);
  intensity[N]=5+Math.random()*4;
  for (i=N*sparks; i<(N+1)*sparks; i++) {
    Xpos[i]=x;
    Ypos[i]=y-5;
    dY[i]=(Math.random()-0.5)*intensity[N];
    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
    decay[i]=16+Math.floor(Math.random()*16);
    Z=stars[i].style;
    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
    else if (M<2*colours.length) Z.color=colours[count%colours.length];
    else Z.color=colours[i%colours.length];
    Z.fontSize='13px';
    Z.visibility='visible';
  }
  clearTimeout(timers[N]);
  bang(N);
}

function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-7;
  shigh=sh_min-7;
}

function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
// ]]>
</script>
5. Klik Save Template.

Selesai !!


Demikianlah tutorial blog yang bisa saya bagikan mengenai Efek pada blog. Jika ada kesahan dalam bentuk apapun yang terdapat di blog ini, saya mohon maaf yang sebesar-besarny.
Terima kasih.


Subscribe to receive free email updates:

11 Responses to "Cara Membuat Efek Ledakan Pada Cursor di Blog"

  1. trick baru nih, thx tutornya.. :D

    come back..

    ReplyDelete
  2. kalau ledakan seperti malam tahun baru memang cocoknya background hitam ya, terima kasih infonya nambah pengetahuan saya nih caranya...

    ReplyDelete
  3. untuk template cocok kali yah,tapi enggak lah nanti jadi keramaian :)
    makasih infonya sob.

    ReplyDelete
  4. oke sob, nant di coba kaya apa mantabnya... ehehehe :)


    thanks

    ReplyDelete
  5. yuk gan, bagi yang mau download Games atau FILM terbaru dan asyik2... ke blog saya aja okkeh

    ReplyDelete
  6. kunjungi juga blog saya ya sob http://sindiran2013.blogspot.com/

    ReplyDelete
  7. mantab gan.. senang bisa berkunjung kesini, semoga bermanfaat .salam kenal, kunjungan baliknya ditunggu

    www.produsensusukambingbubuk.com
    susu kambing etawa sari madu utama susu kambing global mandiri sejahtera susu kambing etawa

    ReplyDelete
  8. pas diatasnya kan?
    apa dispasi>
    binggung ni gan

    ReplyDelete