Cara Membuat Efek Asap Di Blog

Senin, 08 Juli 2013

Cara Membuat Efek Asap Di Blog - Pagi hari ini saya akan berbagi kembali seperti biasa saya akan berbagi tentang blogger juga, postingan yang ini saya akan membahas tentang cara membuat efek asap di blog. Saya kurang begitu tahu apa kelebihan widget asap ini, mungkin kelebihan widget ini hanya membuat blogger menjadi keren saja, sedangkan kekurangannya adalah menggangu saja dalam membaca suatu artikel di blogger tersebut. Apakah anda ingin memasang widget ini juga? ikuti langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Cari kode </head>.
5. Salin kode dibawah ini serta taruh kodenya diatas kode tadi.

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

6. Cari kode ]]></b:skin>
7. Salin kode dibawah ini dan taruh kodenya diatas kode tadi.

.puff {<br /> position: absolute;<br /> width: 0px;<br /> height: 0px;<br /> }

8. Masuk ke dashboard lalu anda pilih tata letak dan anda pilih tambahkan serta anda bisa cari html/javascript.
9. Salin kode dibawah 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>

10. Simpan.