Tuesday 17 August 2010

Membuat Animasi Terbang Diblog

Hahahaha, pengen ketawa mulu ne liat hasil kejailanku. Blog percobaanku jadi rame dengan penampakan hantu-hantu gaul yang pada mampang ckickcikcikcki. Kalian juga bisa kok, orang Cuma gampang bgt karena Javascripnya udah ada trus imagenya tinggal diganti dg gambar-gambar unik kamu, foto kamu juga boleh xixixixi. Biar terkenal

Beberapa bulan yang lalu dan sampek seminggu kemaren di blogku Peace In Heart ma Always For You emang udah ada yang semacam ntu tepatnya kupu-kupu ama kelelawar. Tapi mendadak ilang n gatau kenapa bisa ilang, kata temenku (Naufal-Forantum) “Hostingnya abis”. Wew gaswat ne, aku kena dampaknya.

Trus aku gak tinggal diem dunk, aku download aja ntu Scrip-nya tapi malangnya aku scrip yang aku download gak respon (hmm what happen ya). Dan baru aku tau hari ini kalo ternyata masalah utamanya ada di scripnya (udah aku duga sejak kemaren) cuman kurang
buka (<script type='text/javascript'> //<![CDATA[)
Tutup (//]]></script>) scripnya doang. Hazz pokoknya kode-kode itulah yg kurang.

Btw langsung aja kali ya, gak usah banyak omong lagi. Langkah:

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 :

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE UNTUK SETIAP URL GAMBAR. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/66030.gif';
floatimages[1]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[2]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[3]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';
floatimages[4]='http://i982.photobucket.com/albums/ae301/ratna91/Flying/74238.gif';


//*********JANGAN EDIT KODE DIBAWAH INI***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

//]]>
</script>



Ket:
  1. floatimage : Untuk menempatkan URL Image-nya, kalian bisa nambah atau mengurang.
  2. Penetapan diawali dengan angka “0” sampai seterusnya
  3. Kode yang warna merah ntu bisa kalian ganti dengan “URL IMAGE KALIAN” atau klik SHOW untuk menampilkan:

Kode Disini >>



http://lh4.ggpht.com/_ILzML2joCeU/TMKkuGGpiBI/AAAAAAAAAD0/yV-ieFQT2GU/15034.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKkuG4EARI/AAAAAAAAAD4/Cw2r04R3k4g/15184.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKkudvIxSI/AAAAAAAAAD8/cnhwcH_F5bQ/19912.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKkujmd3qI/AAAAAAAAAEA/uuulpYAQl8c/27865.gif

http://lh5.ggpht.com/_ILzML2joCeU/TMKku6VDs_I/AAAAAAAAAEE/TLfVA3s4he0/73904.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVEj7tZI/AAAAAAAAAEI/U3n63CBEvh8/11047.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVQquNOI/AAAAAAAAAEM/UPNbo8zomYo/uuuuuuu.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVb_q-CI/AAAAAAAAAEQ/2hyLOvH9r6g/474167l68h9nknqq.gif

http://lh6.ggpht.com/_ILzML2joCeU/TMKlVj7Jg5I/AAAAAAAAAEU/uP-SyoHgXn4/bird_ann.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKlVy5BajI/AAAAAAAAAEY/oXlVYQ3zXoo/kampret.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKlskTzatI/AAAAAAAAAEc/G7aJqizQ6fo/74238.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKlshMrefI/AAAAAAAAAEg/Iaq4H2J2o1I/74253.gif

http://lh3.ggpht.com/_ILzML2joCeU/TMKls9K92fI/AAAAAAAAAEk/nJXA0uaMn8U/74283.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKmKFn1sRI/AAAAAAAAAEo/DZaqEHVtEHU/74276.gif

http://lh4.ggpht.com/_ILzML2joCeU/TMKmKJ3xfbI/AAAAAAAAAEs/sY548lVnUqg/butterfly.gif


5. Kemudian “Simpan” dan silahkan lihat hasilnya.


Nb. Sekali lagi aku kasih tau ma kalian, kode-kode scrip ne bisa ja gak bisa direspon alias gagal karena ada kode-kode yang hampir sama seperti “Membuat Kursor Bertabur Bintang” dan “Membuat Animasi Terbang Diblog”. Saranku kalian kudu milih salah satu, tapi kalo semuanya bisa tampil/berhasil ya Alhamdulillah dech.


HAPPY BLOGGING YA n SELAMAT BERPUASA




Tutorial Diatas Di-Ilhami Dari
http://forantum.blogspot.com/
Dan
http://www.myniceprofile.com/





10 komentar:

Unknown 14 January 2011 at 14:06  

ya salam... ni blog punya cowok pa cewek yah...
but it's ok.... keep spirit on girl...

Elvina Devita 23 March 2011 at 02:18  

Makasi banyak ka Info'a :D
Nice Blog :D

Qotrun Nada 26 March 2011 at 21:29  

Asly ini blog kerenz abiz...
aku bakal sering mampir. bleh yah...?

wanna you be the best all the time.

seo 16 April 2011 at 04:53  

w0w.keren jg blognya.

MANCING MANIA 7 May 2011 at 01:21  

Mantepz abizzz... salam persahabatan dari pecinta blog

Unknown 30 May 2014 at 19:45  
This comment has been removed by a blog administrator.
Kuncung 8 October 2014 at 09:09  

la punya ku malah gak bisa mbak.piye to

Post a Comment

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