Cara Buat Bintang Jatuh dari Kursor

Blogger, Tips dan Trik, Cara Buat Bintang Jatuh dari Kursor

Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Cara Buat Bintang Jatuh dari Kursor

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

  • Login di Blogger
  • Pilih Design > Add gadget > HTML/Javascript
  • Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
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>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

102 comments
about "Cara Buat Bintang Jatuh dari Kursor"
Add comments
2:42 PM ×

Ane Coba gan
Nice info.........

Balas
avatar
admin
10:50 AM ×

gan saya gx bisa ya??????

refand.blogspot.com

Balas
avatar
admin
7:42 PM ×

terima kasih atas informasinya yang sangat berguna dan bermanfaat sekali

Balas
avatar
admin
4:16 PM ×

Sangat membantu, thank guys ^_^

Balas
avatar
admin
2:00 PM ×

thx mas browww udh saya coba d blog Q....
mampir2 yx
slam kenal ja..:)

Balas
avatar
admin
11:22 PM ×

thanks bgt brows..cool blog!!!
izin copas yah..!!!

Balas
avatar
admin
5:24 PM ×

mantap surantap kali bang.
tq buanget nih
www.riandisubekti80.blogspot.com

Balas
avatar
admin
1:57 AM ×

siiiiiiiip pol nie punya saya

http://aplikasihp1.blogspot.com/

Balas
avatar
admin
12:17 PM ×

Posting yang bagus
Siiippp . berguna banget

Balas
avatar
admin
8:02 PM ×

Posting yg kucari-cari. thanks

Balas
avatar
admin
2:31 PM ×

Thanks a lot gan! This is what i searching for ^^

Balas
avatar
admin
12:45 PM ×

q kok gk bisa.
pa yg salah

Balas
avatar
admin
7:49 PM ×

gan klo di wp ngga ?

Balas
avatar
admin
2:11 PM ×

Aseeekk,,, keren jadinya gan...

Balas
avatar
admin
5:07 AM ×

Info yang bagus GAN....,

Balas
avatar
admin
10:40 AM ×

triknya baguus bgt gan,, mau saya coba gan,,,
mampir di we ane yaah??
sekalian agan tukar link ???

Balas
avatar
admin
12:03 PM ×

Thx info nya gan,,work ini.. ^^

Balas
avatar
admin
8:53 PM ×

Perfect info gan!
Akhirnya berhasil jga di blog saya, makasih ya..

Http://yustinannisacom.blogspot.com

Balas
avatar
admin
1:23 PM ×

Punyaku bisa

prince-of-photoshop.blogspot.com

Balas
avatar
admin
5:46 PM ×

..BOLEH JUGA ini , makasih banyak ya gan
mampir" juga boleh
www.anggiblog22.blogspot.com

Balas
avatar
admin
7:13 AM ×

mantaaap :) ane coba juga berhasill thx :)

Balas
avatar
admin
8:10 PM ×

hhhmmm Saya Sengaja Mampir doank tpi saya rasa ini work ttp tdk semua blog bisa blog Tpi Saya Mw Mencoba


Berhasil Biasanya Code Ini Tidak Berhasil di blog saya


Tolong ya Kunjungi Blog Ku :D PLizzz

Balas
avatar
admin
7:37 PM ×

gk bekerja nih,,, tapi bisa kunjungin blog gw kan ?
www.gisellalasut.blogspot.com
^_^

Balas
avatar
admin
4:02 PM ×

yee bisa :D makasi ya kak, kunjungin blogku juga :))

www.resiaholic.blogspot.com

aku newbie masalahnya, jadi belum tau betul ttg blog

Balas
avatar
admin
6:58 PM ×

@Obat Tradisional OsteoporosisMungkin scriptnya konflik ma script yg laen yg ada di template, tp kebanyakan bisa kok

Balas
avatar
admin
7:00 PM ×

@Gisella ^^Ok deh.. sippp

Balas
avatar
admin
2:59 AM ×

@Resia holicBlog nya kerenn.. dapat template dri mana tuh?
Keep Blogging yah..

Balas
avatar
admin
12:21 PM ×

template nya dari blogger kak tapi aku edit sendiri hehe, kalo backgroundnya yang bintang bintang itu bawaan dari blogger, kalo yang kupu kupu item ini aku search di google terus aku edit make photoshop kak. Oke kak, thank you :)

Kak, aku mau nanya, gimana caranya postingan bisa terindex di google? tempetku kok nggak terindex ya, cuma satu post aja yang terindex. Thanks kak sebelumnya.

Balas
avatar
admin
2:11 PM ×

@Resia holicBlog nya resia smua udah ter-index Google kok :-bd coba aja ketik site:resiaholic.blogspot.com pada google search, cmn biar bisa muncul pada halaman pertama google resia harus nyari banyak backlink yang relevan

Balas
avatar
admin
12:03 AM ×

terima kasih atas ilmunya sob jika berkenan silahkan kunjungi blog saya http://arifinsaputra.blogspot.com

Balas
avatar
admin
6:34 AM ×

salam kenal kawan???
sukses selalu ya.
lang sung saya coba tipsnya.
monggo di tunggu kunjunganya.

Balas
avatar
admin
9:35 PM ×

postingan bagus gan ..
sedikit demi sedikit ilmu ane jadi nambah bah bah bah ..!!

kunjungi balik blog ane ya ..:

http://dyan-seller.blogspot.com/2012/06/beberapa-toolbar-yang-harus-di-install.html

Balas
avatar
admin
9:31 PM ×

thanks infonya

Balas
avatar
admin
7:28 PM ×

mantap gan saya berhasil ni blog gue
www.hendrawanbloge.blogspot.com

Balas
avatar
admin
1:54 AM ×

Nice infonya, saya coba ya gan ??

Balas
avatar
admin
4:28 PM ×

makasih min, berhasil nih http://indahhsanti.blogspot.com tp saya masih bingung, seharusnya kursos saya animasi tp kok gak jalan ya? ada solusi?

Balas
avatar
admin
5:35 PM ×

@Indah Hidayah Santi Td saya cek efek bintang jatuh di blog nya indah berfungsi kok.. tp kalo di campur ama script anmiasi kursor yang lain mungkin konflik jadinya

Balas
avatar
admin
5:36 PM ×

@Tips mengatasi ambeien Monggo gan semoga berhasil :-bd

Balas
avatar
admin
1:06 PM ×

thx tutornya sobbb..

Balas
avatar
admin
5:03 PM ×

Thanks gan, kalo cara buat salju berjatuhan atau daun jatuh di blog ada ga gan?

Balas
avatar
admin
6:12 PM ×

jadinya bagus gan di web ane

Balas
avatar
admin
9:45 PM ×

bisa bli, suksma nggeh

Balas
avatar
admin
12:35 AM ×

@Wayan Edo Ngih Yan, mewali :)

Balas
avatar
admin
6:43 PM ×

Coba dulu :-bd

Balas
avatar
admin
8:10 AM ×

bisa di blog ane gan.. #salaman..
saling follow blog ya... :)

Balas
avatar
admin
9:20 AM ×

@HiddenMyName Siip gan, thanks dah visit :)

Balas
avatar
admin
8:38 PM ×

ganti wrna, gimna cara nya? di blog ane bintangnya warna biru gk jelas jdi na

Balas
avatar
admin
7:35 PM ×

thanks ilmunya gan :-bd

Balas
avatar
admin
4:02 AM ×

Waah keren Gan.. saya coba ya Gan..
izin sedot ya =D
Terima kasih...
I like it..!

Balas
avatar
admin
5:20 AM ×

wah bagus sekali....izin copy gan....

Balas
avatar
admin
7:31 PM ×

Follow my blog , Thanks!

Balas
avatar
admin
9:17 AM ×

didn't work!!!

Balas
avatar
admin
4:58 PM ×

mantap gan .. work banget

Balas
avatar
admin
8:12 PM ×

gan kalo ganti warna bintangnya ngambil kodenya dari mana ya??

Balas
avatar
admin
7:05 AM ×

@YUNUS Pake software colorpic aja gan untuk ngambil kode nya biar lebih gampang, untuk tutorialnya agan masuk aja ke URL yang dibawah ini :-bd

http://bloggerpeer.blogspot.com/2011/11/colorpic-software-kode-warna-html.html

Balas
avatar
admin
12:13 AM ×

Ijin Praktek ya Gan, di http://administrasi-negara-ur.blogspot.com
Terimakasih, ini sangat bermanfaat. kalau ada waktu, berkunjung ya :D
salam

Balas
avatar
admin
10:27 PM ×

ganti warna Pake photoshop jg bisa mas,. ni blog ku www.efriblogedu.blogspot.com , bru blajr ngeblog sih mas,.. maklum bru msk sma,.. hehe

Balas
avatar
admin
2:35 AM ×

waaaah baguss mas
kunjungi juga ya blog saya
http://smartdansukses.blogspot.com

Balas
avatar
admin
12:16 PM ×

izin untuk mencoba tips cara membuat efek bintangnya.
ditunggu kunjungan baliknya

Balas
avatar
admin
7:49 AM ×

kerenn masbro, full animasi jadinya blognya dan jadi lebih menarik

Balas
avatar
admin
10:39 PM ×

Ane izin reposting di blog saya nanti ya?
Makasih sebelumnya.

Balas
avatar
admin
6:27 PM ×

klo dapetin kode warnanya dari mana gan ??

Balas
avatar
admin
7:40 AM ×

cara mengubah warna bintang nya apa gan ?

Balas
avatar
admin
9:44 PM ×

yee bisa :D terima kasih kaa :)
kunjungi blog saya dong www.tikayandini.blogspot.com .. hehe :)

Balas
avatar
admin
10:06 AM ×

thank you dear, sangat bermanfaat, semoga allah memberikan kesejahteraan untukmu.

visit my blog http://www.votefornancyajram.blogspot.com :X

Balas
avatar
admin
9:54 PM ×

sip..
thanks gan "

Balas
avatar
admin
11:19 PM ×

sipsip.
mkasi sob.

Balas
avatar
admin
10:28 PM ×

mantap bang,langsung jadi nie,,,Thanks...

Balas
avatar
admin
9:50 PM ×

Nih gue punya blogg tentang musik
baca-baca juga boleh kok
semoga bermanfaat ya sob!
#jangan lupa follow my twitter @Aldiii_R
yang nge follow, semoga dapet pahala
(Amin!)
http://cara-belajar-alatmusik.blogspot.com/

Balas
avatar
admin
5:49 PM ×

Nice blog,, Thank you for your information

Balas
avatar
admin
12:44 PM ×

blognya keren,thanks ya berhasil nih :-bd

Balas
avatar
admin
1:14 PM ×

gan follow balik ya
devil-kazuya.blogspot.com

Balas
avatar
admin
12:24 AM ×

wow.. nice info ^_^
makasi banyak ya gan ;)

Follback ya gan ke blog ane :D
kizaisback.blogspot.com

Balas
avatar
admin
8:32 AM ×

WOW.....ini baru asik :))

Balas
avatar
admin
9:41 AM ×

Nice Info Gan :D

blog ane www.ImaginationOnly.blogspot.com 2:-P

Balas
avatar
admin
10:41 AM ×

Tq.. tp ngga tebel bintangnya

Balas
avatar
admin
8:30 AM ×

thanks gan

Balas
avatar
admin
9:57 PM ×

Bintangnya bisa pada jatuh gitu...

Balas
avatar
admin
8:32 PM ×

MANTAP GAN !! kunjungi blog newbie ane..
http://cahklatenbarat.blogspot.com/2013/09/cara-membuat-like-box-fanspage-fb.html

Balas
avatar
admin
11:26 PM ×

mantap...hatur nuhun kang...

Balas
avatar
admin
4:09 PM ×

izin copas ya...?

Balas
avatar
admin
5:11 PM ×

makasih sob :D
http://boydzakifaisal.blogspot.com/

Balas
avatar
admin
10:14 AM ×

wih makasih atas infonya, berguna banget ini blog buat newbie kaya saya , makasih ya

Balas
avatar
admin
12:50 PM ×

postingannya sangat berguna gan...
saya pemula gan,mohon bimbingannya :)

sasingunej.blogspot.com

Balas
avatar
admin
1:59 PM ×

Thank ya Brow....

Balas
avatar
admin
9:59 PM ×

ii lucu nih ;)
makasih infonya ..

Balas
avatar
admin
8:46 AM ×

thanks mas udh share ilmu y,,,succes

Balas
avatar
admin
6:03 PM ×

Tq infonya gan....

Balas
avatar
admin
9:32 AM ×

Makasih ya gan infonya
Nice artikel
Kunjungan baliknya dinanti gan
http://aji-oke.blogspot.com

Balas
avatar
admin
4:27 PM ×

Makasih ilmunya boss ... udah aku pasang hujan bintangnya ... kerennn :)

Balas
avatar
admin
2:14 PM ×

kode warnanya mana sobb?

kunbal http://www.tamawae.tk/
coba liat blog ane sob, udah ane bikin tuh bintang-bintangnya

Balas
avatar
admin
1:10 PM ×

mkasih gan , atas tutor Cara Buat Bintang Jatuh dari Kursor nya,, postingan yang bagus dan bermanfaat ini layaknya di share ajja ,, nih saya bantu ngeshare ,, ,, jgn lupa kunbal nya di anprat.blogspot.com tmakasih skali lagi gan

Balas
avatar
admin
4:24 PM ×

kode warnanya di mana?

Balas
avatar
admin
3:47 PM ×

thanks gan buat informasinya rumah dijual dibandung

Balas
avatar
admin
3:48 PM × This comment has been removed by the author.
avatar
admin
6:23 AM ×

http://camex.wen.ru/Sampel/Warna.html

untuk kode warna

Balas
avatar
admin
3:08 PM ×

keren ! thanks bro blog ane makin bagus gara" postingan yang dibuat bloggerpeer ! http://fboock.blogspot.com/

Balas
avatar
admin

Silahkan berkomentar dengan bijak sesuai topik, komentar tidak di-moderasi karena saya percaya seorang Blogger bijak terlihat dari caranya berkomentar. Thanks..!
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar