Cara Membuat Efek Asap Di Blog

         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.



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

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!

Share this

Share on FacebookPlus on Google+