Trik Membuat Kursor Spongebob yang Interaktif: Dari Desain hingga Kode

Blog akan tampak bagus jika kita pandai dalam merombak blog agar pengunjung betah membaca artikel yang ada pada blog kita.

Berikut ini salah satu cara agar blog kita bisa terlihat bagus dan muncul animasi dengan karakter yg lucu seperti cartun spongbob disertai bintang berjatuhan.

Untuk cara memasang animasi spongbob dan bintang berjatuhan pada blog, silakan ikuti langkah sebagai berikut ya

MEMBUAT ANIMASI POINTER SPONGBOB

Langkah 1

1. Masuk blogger.com

2. Login menggunakan akun anda

3. Jika sudah masuk silakan anda pilih Tata Letak pada pengaturan blog seperti gambar dibawah ini

4. Jika anda sudah pilih Tata Letak maka akan muncul tampilan seperti gambar dibawah ini ya

5. Pada tahap ini saya akan meletakkan Script Animasi Spongbob pada Sidebar-Sticky, Silakan Klik TAMBAHKAN GADGET, maka akan muncul seperti tampilan dibawah ini

6. Silakan pilih dan Klik HTML/javaScript, lalu aktifkan Tampilan widget ini seperti gambar dibawah ini yang berwarna hijau ya.

7. Judul tidak perlu di isi ya, langsung saja isikan Script pada Konten seperti yang saya blog warna biru di atas.

Untuk Script Spongbob dibawah ini ya:

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1107.cur), progress !important;}</style><a href="http://programmkomputer.blogspot.com/p/animasi-cursor-di-blog.html" target="_blank" title="SpongeBob SquarePants"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="SpongeBob SquarePants" style="position:absolute; top: 0px; right: 0px;" /></a>

Langkah 2

Silakan klik SIMPAN dan lihat hasilnya.

MEMBUAT ANIMASI BINTANG BERJATUHAN

Langkah 1

1. Masuk blogger.com

2. Login menggunakan akun anda

3. Jika sudah masuk silakan anda pilih Tata Letak pada pengaturan blog seperti gambar dibawah ini

4. Jika anda sudah pilih Tata Letak maka akan muncul tampilan seperti gambar dibawah ini ya

5. Pada tahap ini saya akan meletakkan Script Animasi Spongbob pada Sidebar-Sticky, Silakan Klik TAMBAHKAN GADGET, maka akan muncul seperti tampilan dibawah ini

6. Silakan pilih dan Klik HTML/javaScript, lalu aktifkan Tampilan widget ini seperti gambar dibawah ini yang berwarna hijau ya.

7. Judul dikosongin saja, untuk Konten silakan isi dengan Script dibawah ini ya:

<script type='text/javascript'>

// <![CDATA[

var colour="#0000CD";

var sparkles=100;

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="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

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>

8. Jika sudah klik SIMPAN, lalu silakan lihat hasilnya.

Note contoh hasil Membuat Kursor Spongebob bisa di lihat di Demo.

 

Berbagi :