Cara membuat Efek Asap Di Blog

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.

      Untuk membuat, langkahnya adalah seperti berikut :

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

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.

Read more: http://syamsudinnamaku.blogspot.com/2011/06/cara-membuat-efek-asap-di-blog.html#ixzz1nlWjVvnY

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>

Selamat mencoba, good luck!