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 :
1. Masuk ke Edit HTML
2. Cari kode </head>
3. Copy kode yang berikut ini lalu
letakkan di atas kode tersebut.
4. Cari lagi kode </b:skin>
5. Copy kode yang berikut ini lalu
letakkan di atas kode </b:skin> ini,
terus simpan template anda.
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