[Tutorial] Cara Menambahkan Efek Salju Pada Pointer Blog

Salju adalah butiran es yang turun dari hujan salju, tapi dalam postingan kali ini Saya akan membuat pointer dalam blog Anda memiliki efek salju turun. Apakah bisa? ya pasti bisa, ini sangat mudah dan tidak memerlukan waktu yang panjang. Untuk itu langsung saja kita lihat tutorialnya di bawah ini.
Baca juga: Cara Mnambahkan Efek Petir Pada Blog.

Cara Menambahkan Efek Salju Pada Pointer Blog

1. Login akun blogger Anda dan masuk ke Dashboard blog Anda.

2. Pilih menu Tata Letak => Tambahkan Gadget => Pilih "HTML/Javascript"

3. Kemudian copy paste kode di bawah ini.

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. Kemudian klik Simpan.
Untuk demo lihat disini

Demo

Jika Anda masih bingung, Anda bisa lihat vidio tutorialnya

Sekarang coba lihat blog Anda dan coba gerakan pointernya, maka akan ada efek salju berjatuhan yang mengikuti pointer mouse Anda. Sepertinya sekian saja postingan yang dapat Saya sampaikan. Wassalam.............

1 komentar:

Balas

Ieda Wanda

30 April 2016 at 23:49

Jadi berasa dikutub ya gan kalau berkunjung jadinya hehe brrr dingin

Peraturan berkomentar di blog Malming

1. Gunakan bahasa yang sopan.
2. Dilarang menyisipkan url blog/website lain.
3. Tidak mengandung unsur pornografi.
4. Berkomentar serelevan mungkin.
EmoticonEmoticon

Cara Menambahkan Efek Salju Pada Pointer Blog

Share this

1 komentar: