Membuat Efek Berguguran Di Blog

Pagi semua, gimana MUT kalian pagi ini semoga gak sejelek MUT-ku ya he..he..he. Walau begithu bloging tetep semangat nuw ho..ho..ho. Ok, kali ini aku pengen nge-buka kode JS milik ferdinand (DJ-Site) sory ya xi..xi..xi. Ceritanya gene lho, kemaren sore aku jalan-jalan ke DJ-Site trus baca postingan penunggunya (Ferdinand), trus ada link ke DJ-Note (blog Ferdinand juga) langsung aja meluncur ke TKP. biz tu baca-baca-baca eh..kok ada yang nyantol ya, jadi pengen. Maksud aku Tutorial dia yang "Cara Membuat Efek Hujan Salju Turun Di Blog Anda" dan "Cara Membuat Efek Daun Kering Berguguran Di Blog Anda".

Tar hasilnya seperti di bawah ini :

Tutorial versi aku kali ini gak pakek JS-Hosting seperti yang ferdinand (DJ-Note) lakuin, tapi dengan kode JS-aslinya dan di modiv sendiri pakek image pilihan kamu. Langsung aja ya

1. Masih seperti biasa Log-In dulu dengan ID masing-masing

2. Lalu masuk ke “Rancangan/Tata Letak” Trus “Elemen Laman”

3. Kemudian “Tambah Gadget” dan pilih “HTML/JavaScrip”

4. Kalo sudah masukkan kode dibawah ini :

Tapi sebelumnya baca Ket :

• Url image yang warna merah ntu bisa kamu ganti dengan Url image kamu sendiri, atau dengan Url dibawah ini Klik "Show" untuk menampilkan :
  

Kode Icon Disini >>

http://lh6.ggpht.com/_ILzML2joCeU/TL1NyXrf7AI/AAAAAAAAABQ/lM5KtqtTQVk/73979.gif

http://lh4.ggpht.com/_ILzML2joCeU/TME8peORPII/AAAAAAAAACk/_2s_lg4okb8/46henkui.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMIp5SODVRI/AAAAAAAAAC4/VENSAcXoJeI/2221252gg044n4u8v.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKjosExrkI/AAAAAAAAADk/N3Kj1AFrsWk/dj2ydyxl.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMOpUh5K2HI/AAAAAAAAAGk/2kzgEre7z4U/sakura.png

http://lh5.ggpht.com/_ILzML2joCeU/TMOpUsvX8xI/AAAAAAAAAGo/a_9eYg2AlQo/daun.png

http://lh4.ggpht.com/_ILzML2joCeU/TMOqTJvEt0I/AAAAAAAAAGw/Gz4A20OHbKA/2bln806w.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMOqTNnQgOI/AAAAAAAAAG0/z3QTJlevuGw/5knl5xk9.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMOqTHF-vzI/AAAAAAAAAG4/WEFHV_tlqIs/e8papi1p.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMOqTDxrKtI/AAAAAAAAAG8/2TRCMe4KDIg/eeeay0vm.gif

• Angka yang aku beri warna merah itu adalah jumlah yang gugur, dan bisa kalian ganti juga.

<script type='text/javascript'>
// <![CDATA[
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05 by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="http://lh3.ggpht.com/_ILzML2joCeU/TMOqTDxrKtI/AAAAAAAAAG8/2TRCMe4KDIg/eeeay0vm.gif";
// Configure below to change number of snow to render
var no = 20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

//*******Ratna says: JANGAN EDIT YANG DIBAWAH INI***

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
// ]]></script>

5. Kemudian “Simpan” dan silahkan lihat hasilnya.

---

---

Tutorial Diatas Di-Ilhami
Dari
http://dj-note.blogspot.com/

---

---