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