MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Cara membuat Efek Asap Di Blog


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





chimney


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.



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!


1 comments:

Obat Hepatitis Pada Anak mengatakan...

Obat Tradisional Jelly Gamat
Obat Gondok
Obat Benjolan Gusi
Obat Pengering Luka
Obat Benjolan Lidah
Obat pengering Luka Operasi
Obat Pengering Luka

Poskan Komentar