Pastinya sobat blogger sudah sering melihat tampilan kursor di blog lain dengan
efek bintang yang bertaburan (sprinkle) dan berwarna-warni bukan ? Memang efek
bintang bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog
sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading
blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo
memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba trik
keren ini.
Cara membuat efek bintang bertaburan pada kursor cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :
1. Login ke dashboard blogger sobat.
2. Pilih Rancangan > Elemen Halaman > Add
Gadget (HTML/JavaScript).
3. Copy dan paste script dibawah ini pada gadget
baru tadi.
<script>
//
JavaScript Document<script type='text/javascript'>
//
<![CDATA[
var
colour="red";
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>
4. Simpan dan lihat hasilnya.
NB : Silahkan ganti warna “red” dengan warna lainnya green,
blue, yellow atau warna lain sesuka anda.
Efek bintang bertaburan pada kursor ini akan terlihat jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja yang sabar ya. Selamat mencoba sobat.
Tidak ada komentar:
Posting Komentar