Monday, December 19, 2011

Cara Memberi Jam pada Blog

hay hay ..... sahabat bloger semua :) kali ini au bakal share tentang cara memberi animation Clock / Animasi Jam pada Blog + sekalian kode HTML jam nya ya hehehee....
Bagaimana cara memberi animasi jam pada Blog? gimana ya??? Ok langsung share....
Setelah sedikit mampir - mampir ke blog tetangga aku nemuin tutorial yang menarik yaitu sebuah animasi jam yang lucu, jadi aku putusin buat share informasi yang aku dapet ke blog aku, boleh yaa kan ilmu jadi harus dibagi :)

okey gak usah lama lama deh langsung pada pokoknya aja, cara memberi animatio Clock / Animasi Jam pada Blog:

1.Login ke akun blog kalian

2.Setelah berhasil login, pada dasbor klik Rancangan

2.Biasanya setelah klik Rancangan kalian sudah menuju ke Tata Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi . Pilih salah satu animasi jam yang kalian suka ya'  :)

 ANIMASI SPONGEBOB :

<a href=http://blog.zanuzawa.com>Zawa Clocks</a>



<embed src=http://www.swfcabin.com/swf-files/1305682786.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=150 height=127 wmode=transparent></embed><noembed><a href=http://blog.zanuzawa.com>Zawa Clocks</a></noembed>


JAM APEL / APPLE CLOCK ANALOG:

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://blog.zanuzawa.com&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Zawa Clocks&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

<embed src=http://www.swfcabin.com/swf-files/1305682246.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=120 height=140 wmode=transparent></embed><noembed><a href=http://blog.zanuzawa.com>Zawa Clocks</a></noembed>

JAM DIGITAL APEL / APPLE CLOCK DIGITAL:

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://blog.zanuzawa.com&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Zawa Clocks&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

<embed src=http://www.swfcabin.com/swf-files/1305682380.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=120 height=140 wmode=transparent></embed><noembed><a href=http://blog.zanuzawa.com>Zawa Clocks</a></noembed>

Friday, December 16, 2011

Cara membuat gambar animasi berterbangan pada blog

hallow, kali ini aku bakal share cara membuat gambar animasi berterbangan pada blog, emm itu yang kaya apa ya animasinya??  Ini Contohnya liat DISINI .
nah udah liat contohnya kan,ada yang tertarik enggak nih? Yaudah aku langsung share caranya ya,mari disimak :)



Cara membuat gambar animasi berterbangan pada blog : 

1. Coppy kode HTML 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://lh5.ggpht.com/_ILzML2joCeU/TMkTopfVEdI/AAAAAAAAAIA/KXM7NrPbkYk/706287isbesoi4u7.gif';
floatimages[1]='http://lh4.ggpht.com/_ILzML2joCeU/TMKlshMrefI/AAAAAAAAAEg/Iaq4H2J2o1I/74253.gif';
floatimages[2]='http://lh3.ggpht.com/_ILzML2joCeU/TMkTo0bOI_I/AAAAAAAAAII/2aVr95Cbh7o/706290sw8xc3ipxj.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>



2. Sign in ke akun blog kalian

3. Setelah berhasil Sign in, kalian langsung menuju Dasbor

4. setelah itu, Klik Rancangan

4. setelah klik rancangan, kalian langsung menuju pada tata letak, Klik tambah Gadget

5. Pilih Gadget Java Scrip/HTML

6. Paste kode yang telah di coppy tadi pada kotak java script/HTL

7. Setelah itu klik simpan

8. klik simpan lagi pada tata letak

9. terakhir, lihat perubahan pada blog mu ....!!

Selesai, jika kalian ada yang mengalami kesulitan dalam mempraktekan cara diatas tinggal kan pesan :)
sekian, trimakasih'

Thursday, December 15, 2011

Cara Membuat Cursor bertabur Bintang

Hai sahabat blogger semua, kali ini aku mau share tentang cara membuat cursor yang bertabur bintang, contohnya kaya di blog aku ini. cara ini lumayan simple kok, tadinya aku mau pake cara aku tapi kayanya kode scirpt punya aku terlalu panjang, trus aku search di google dan aku nemuin cara yang lebih singkat! maaf ya aku coppy caranya :)  terserah deh orang mau bilang apa, mau bilang plagiator juga terserah' yang perlu diingit ilmu itu harus dibagi, gak bakal berguna ilmu sehebat apa pun kalo enggak dibagiin. *curhat!!


langsung aja ya aku share, Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini :

1.Login ke akun blog kalian





2.Setelah berhasil login, pada dasbor klik Rancangan

2.Biasanya setelah klik Rancangan kalian sudah menuju ke Tata Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi . Pilih mau bintang warna apa :)

Bintang Biru


Bintang Hijau


Bintang Merah


Bintang Putih


Bintang Ungu


6.Kalo sudah selesai  klik SIMPAN...

7.Selanjutnya liat deh hasilnya .......

Oya, kalo sahabat blogger sudah pake kode script diatas tapi gak bereaksi (kursor bintang tidak muncul), biasanya si butuh proses tunggu beberapa waktu. Tapi kalo tetep gak bereaksi aku punya kode srcipt yang lain, yang ada dibawah ini. Cara pasangnya sama dengan cara yang diatas cuma beda kodenya kok :) .
Bintang Biru :




<script type='text/javascript'>
// <![CDATA[
var colour="#0000FF";
var sparkles=65;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]></script>


Sekian tutorialnya, jika ada yang mau ditanyakan atau mengalami kesulitan dalam membuatnya tinggalkan pesan !! :)

Badminton Atlet

Loading...

Music

Loading...