#

Cara Buat Efek Asap Diblog

         Kali ini saya posting tentang cara membuat efek asap di blog, efek asap di blog sudah jelas akan merubah blog kita tampak menjadi lebih keren dan unik kan ? Cara nya pun tidak terlalu sulit, Jika anda adalah pemula, anda wajib memperhatikan kode-kode nya, karena jika anda lengah dalam memperhatikan blog nya, bisa saja blog anda malah eror, oke langsung saja kita simak bersama ..

kaya gini sob cara nya :


CARA PERTAMA :

1.   Masuk ke Edit HTML

2.   Cari kode </head>

3.   Copy kode yang berikut ini lalu
      letakkan di atas kode tersebut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script>

<script type="text/javascript">
var SmokeEffect = {
 
imgLocation: "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png", //url to image here
smokeWidth: 80, //standard width
smokeHeight: 55, //standard height
 
//don't touch this:
smokePos: new Array(),
  
makeEffect: function(id, posX, posY) {
//set position from the "parent"
SmokeEffect.smokePos[id] = new Array();
SmokeEffect.smokePos[id]['x'] = posX;
SmokeEffect.smokePos[id]['y'] = posY;
  
//set a random time to start puffing
var time = (Math.floor(Math.random()*3001));
setTimeout("SmokeEffect.animate('" + id + "')", time);
},
 
animate: function(id) {

//create the smoke cloud
var puff = document.createElement("IMG");
$(puff).attr("src", SmokeEffect.imgLocation);
$(puff).attr("alt", "puff");
$(puff).attr("class", "puff");
  
//create a temp id for the cloud so we can delete it later on
var tempId = "puff" + Math.floor(Math.random()*1001);
$(puff).attr("id", tempId);
  
//append the cloud to the body
$(document.body).append($(puff));
  
var objPos = $('#' + id).offset();
  
//do smoke animation
$(puff).css({
top: (objPos['top'] + SmokeEffect.smokePos[id]['y']) + "px",
left: (objPos['left'] + SmokeEffect.smokePos[id]['x']) + "px",
zIndex: 25,
opacity: 0.3
});
$(puff).animate({
width: SmokeEffect.smokeWidth + "px",
height: SmokeEffect.smokeHeight + "px",
marginLeft: "-" + (SmokeEffect.smokeWidth / 2) + "px",
marginTop: "-" + (SmokeEffect.smokeHeight * 1.5) + "px",
opacity: 0.8
},{
duration: 1000
}).animate({
marginTop: "-" + (SmokeEffect.smokeHeight * 3.5) + "px",
opacity: 0.0
},{
duration: 2000
});
  
//create timeout and run the animation again
var time = 1200 + (Math.floor(Math.random()*4501));
  
setTimeout("SmokeEffect.animate('" + id + "')", time);
  
//remove the old one
setTimeout("$('#" + tempId + "').remove()", 4200);
  
}
}
</script>

4.   Cari lagi kode </b:skin>

5.   Copy kode yang berikut ini lalu
      letakkan di atas kode </b:skin> ini,
      terus simpan template anda.

0 comments:

Posting Komentar