Cara membuat Efek Asap Di Blog

Kali ini tanpa berbasa-basi lagi, anda langsung saja
lihat contohnya seperti di bawah ini :

Untuk membuat, langkahnya adalah seperti berikut :

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.

.puff {<br /> position: absolute;<br /> width: 0px;<br /> height: 0px;<br /> }

6.  Masuk ke Rancangan -> Tambah Gadget
     pilihlah HTML/JavaScript lalu masukkan
     kode yang ada di bawah ini :

<img src='http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png' alt='chimney' /><br /> <br /> <script type='text/javascript'> SmokeEffect.makeEffect("smokeSpawn", 24, 12); SmokeEffect.makeEffect("smokeSpawn2", 24, 12); </script>

CARA KEDUA :

Rancangan -> Tambah Gadget -> HTML/JavaScript
Masukkan ke dalam kontennya kode berikut ini :

<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>


<style type="text/css">
.puff {
position: absolute;
width: 0px;
height: 0px;
}
</style>
  
<div class="spawn" id="smokeSpawn">
<img alt="chimney" src="http://www.gayadesign.com/wp-content/themes/gdblocked/images/chimney.png" />
</div>
<script type="text/javascript">
SmokeEffect.makeEffect("smokeSpawn", 24, 12);
SmokeEffect.makeEffect("smokeSpawn2", 24, 12);
</script>

Selamat mencoba, good luck!