Update ilmu dan informasi anda mengenai pengetahuan teknologi, komputer, internet, windows 8, blog, tips dan trik serta info gratisan

Cara Membuat Efek Bintang Bertaburan Pada Kursor

Ditulis oleh Hertzer Tsaitwase , Pada 3/17/2012 01:30:00 PM , Memiliki 2 comments
Kali ini saya akan memberikan tips agar kursor pada blog mempunyai efek bintang bertaburan. Pastinya sobat blogger sudah sering melihat tampilan kursor di blog atau website lain dengan efek bintang yang bertaburankan? 

Efek bintang bertaburan pada kursor ini memang 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 kalau memang sobat blogger ingin tampilan blognya keren, silahkan saja ikuti langkah di bawah ini untuk membuat efek bintang bertaburan ini di blog. Untuk contoh efek bintang bertaburan yang akan saya berikan bisa dilihat pada gambar di bawah ini :

Cara Membuat Efek Bintang Bertaburan Pada Kursor

Cara membuat efek bintang bertaburan pada kursor 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 seperti greenblueyellow atau warna lain sesuka hati anda.

OK, sekian postingan kali ini....  Selamat mencoba dan semoga berhasil!
Bantu share artikel ini:

Facebook Twitter Google+ Linkedin Technorati Digg
Hertzer Tsaitwase

Cara Membuat Efek Bintang Bertaburan Pada Kursor

Ditulis oleh Hertzer Tsaitwase , Pada Jam 3/17/2012 01:30:00 PM

Kategori Blogger , Tips and Trick , Tutorial

Komentar 2 comments

HATI-HATI BAHAYA COPY PASTE!!!

Dilarang meng-copy paste artikel ini tanpa izin!

Jika anda ingin meng-copy artikel ini mohon disertai link ke blog ini.
2 comments Add a comment

Harap Baca Sebelum Komentar
=======================
- Sebelum berkomentar like, tweet, +1, share, follow google plus dulu ya
- Dilarang promosi/live link
- Dilarang berkata kotor
- Dilarang OOT (komentar yang tidak relevan tidak akan saya tampilkan)
- Gunakan bahasa Indonesia yang baik dan benar
=======================
TERIMA KASIH

Bck
Cancel Reply
Copyright ©2013 Blog Hertzer ZonE
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger