Monday, 20 September 2010

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/



Comments
5 Comments

5 comments:

Syarif Fajerianor 23 October 2010 at 23:27  

Thank yaa'' De Ratna.. Salam kenal..
saya harap km bisa membantu saya dalam meng- otak'atik BLOG..

Maklum''' saya baru PEMULA..

Ratna Sari 24 October 2010 at 01:20  

hehehe iya sama2
ne cuma iseng aja kok
silahkan ambil manfaatnya dari blog ini

salam kenal

DWI PURWANTO 11 November 2010 at 14:40  

assalamu'alaikum wrwb
trimakasih ilmunya..
semoga Allah melimpahkan ilmu yang bermanfaat kepada adik..
barangsiapa yang mengajarkan suatu ilmu maka Allah akan mengajari dia ilmu yang lainnya.......

saya pemula, baru belajar ngeblog, mungkin nanti akan banyak bertanya kepada adik yg lebih banyak ilmunya...
matur suwun..
wassalamu'alaikum wrwb

Ratna Purnama Sari 8 December 2014 at 18:44  

kalau enggak bisa, kadang ada javascrip yang sama..... pilih salah satu saja

Post a Comment

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009