Kamis, 19 Februari 2009

Memasang Widget Animasi

. Kamis, 19 Februari 2009

KUPU-KUPU TERBANG.........(cuplikan lagu Ebiet G.Ade)
Apa maksudnya?? hehehe...sekedar intermezzo, lagu itu yang menginspirasi gw tuk memberi warna lain pada blog ini. Dan sobat bisa lihat makhluk hasil metamorfosa itu beterbangan sangat indah sekali.

Sobat pingin memilikinya..???
OK, ambil jaringnya dan tangkap kupunya dengan cara berikut ini;

1. Sign in seperti biasa di blogger dengan ID milik sobat
2. Pilih Tataletak (Layout)
3. Klik Page Element (elemen halaman)
4. Klik Add a Page Element (tambah sebuah element)
5. Pilih HTML/JavaScript
6. Masukkan kode HTML berikut ini

<script language="JavaScript1.2" src="http://www.geocities.com/heri_sys89/kupu.js"></script>

7. Tekan tombol Save

dan.....sekarang lihat blog anda, ada makhluk cantik sedang menari-nari dengan indah.
Selamat mencoba ya...

Atau kalau cara di atas belum bisa karena web dari geocities sekarang udah "pindah rumah" sobat mencoba cara berikut ini;

1. Login ke Blogger

2. Masuk ke Tata Letak

3. Trus Edit HTML

4. Trus copy-paste kode java script di bawah ini tepat
sebelum kode </head> untuk mempermudah pencarian tekan ctrl+f.

<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 URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';
floatimages[1]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';


//*********DO NOT EDIT BELOW***********
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>

5. Save...


20 komentar:

Unknown mengatakan...

Kodenya bikin ribet orang, kenapa mesti gambar kode, buka kode asli yang bisa langsung di copas, kan para pembaca lebih enak untuk mengcopas-nya ....????

denbaguse mengatakan...

Ok. bisa di coba nih.
Saya kasih saran utk memasang code html di postingan, pakai aja Encode Decode HTML Converter.
Salam kenal.

tovarossi mengatakan...

Tuk irfan gambar kodenya udah tak edit ulang n skrg udah bisa langsung di COPAS Ok... Selamat mencoba. Dan tuk Cyber Katrox thanks infonya

Just Arin mengatakan...

kak, g usah deh q dah bisa coir q lupa liat hehe

Hamba Allah mengatakan...

ooo gT yaa... hehehhe..
thengs ya.. taPi kok aku udah coba kupu2 terbangnya ga bisa ya mas herman?
tolongin doonggg...hehheeh..trus aku minta skrip nya Check Timbang Badan (Speed Loading Your Blog)
buleh ga? ^^,

Hamba Allah mengatakan...

uPPss Ralatt namanya mas toVa deh.. bukan mas heRman (>_<) hhe

Hamba Allah mengatakan...

:D muuv baRu dBLs ia mas!
alamat email caca: chacha.puthriel@gmail.com
jangan lupa ya langkah rinci nya!
gaptek euuyy! ;p
thengssss

aMrie mengatakan...

kaGa muncul

zaskia ayunda puspita mengatakan...

wah... Aaku suka kupu kupu... mau coba ah... boleh yah mas? langsung tancap...

aulia mengatakan...

wah jadi inget kupu2 liarku.. ;))

Kenali dan Kunjungi Objek Wisata di Pandeglang mengatakan...

wah kupu melambangkan kelembutan dan kesetiaan, tampaknya pemiliknya ngga jauh beda tuh, hihiih

Kontes SEO dbs-pulsa.com Agen Pulsa Elektronik mengatakan...

ada kupu-kupu juga ada kucingnya.. hehe =))

Kenali dan Kunjungi Objek Wisata di Pandeglang mengatakan...

kalo buat ada kucingnya gmn mas? :-/

GUNUNG LURAH mengatakan...

ko kagax moencholzzz:(

admin mengatakan...

Maaf sobat semua yang mau buat widget animasi ini udah tidak bisa lagi karena webnya udah ditutup (geocities.com), mungkin dilain waktu dapat diunduh lagi melalui program animasi lain.
Sekian n harap maklum

Astaga.com lifestyle on the net mengatakan...

Kalo saya pakai aja Encode Decode HTML Converter bos....

justdanu mengatakan...

keren nih artikel yg ini.. pengen di coba.. tapi geocitiesnya eror..
btw,,tuker link yuk..

ureh mengatakan...

wew..keren tuh gan.tapi pake JS ya?

Muhammad Naufal J mengatakan...

nggak ada yang berhasil satupun gan

obat herbal mengatakan...

widget kupu2nya bagus sekali...
dan setelah dibaca..ternyata panjang juga yach scriptnya...salam kenal gan...

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Silahkan Isikan Komentar Anda:

 
TovaZone is proudly powered by Blogger.com | Template by o-om.com