Cara Buat Bintang Jatuh dari Kursor - Tips Trik Blogger, Tutorial SEO, Info

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




thumbnail Cara Buat Bintang Jatuh dari Kursor
Author: Komang Gede
4.5 - 1 Reviewed by Blogger Peer
Silahkan bagikan artikel tentang Cara Buat Bintang Jatuh dari Kursor ini kepada teman anda dengan meng-KLIK tombol diatas

95 comments "Cara Buat Bintang Jatuh dari Kursor"

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

gan saya gx bisa ya??????

refand.blogspot.com

terima kasih atas informasinya yang sangat berguna dan bermanfaat sekali

Sangat membantu, thank guys ^_^

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

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

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

siiiiiiiip pol nie punya saya

http://aplikasihp1.blogspot.com/

Posting yang bagus
Siiippp . berguna banget

Posting yg kucari-cari. thanks

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

q kok gk bisa.
pa yg salah

gan klo di wp ngga ?

Aseeekk,,, keren jadinya gan...

Info yang bagus GAN....,

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

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

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

Http://yustinannisacom.blogspot.com

Punyaku bisa

prince-of-photoshop.blogspot.com

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

mantaaap :) ane coba juga berhasill thx :)

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

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

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

www.resiaholic.blogspot.com

aku newbie masalahnya, jadi belum tau betul ttg blog

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

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

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.

@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

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

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

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

thanks infonya

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

Nice infonya, saya coba ya gan ??

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

@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

@Tips mengatasi ambeien Monggo gan semoga berhasil :-bd

thx tutornya sobbb..

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

jadinya bagus gan di web ane

bisa bli, suksma nggeh

@Wayan Edo Ngih Yan, mewali :)

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

@HiddenMyName Siip gan, thanks dah visit :)

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

thanks ilmunya gan :-bd

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

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

Follow my blog , Thanks!

didn't work!!!

mantap gan .. work banget

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

@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

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

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

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

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

kerenn masbro, full animasi jadinya blognya dan jadi lebih menarik

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

klo dapetin kode warnanya dari mana gan ??

cara mengubah warna bintang nya apa gan ?

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

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

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

sip..
thanks gan "

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

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/

Nice blog,, Thank you for your information

blognya keren,thanks ya berhasil nih :-bd

gan follow balik ya
devil-kazuya.blogspot.com

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

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

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

Nice Info Gan :D

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

Tq.. tp ngga tebel bintangnya

Bintangnya bisa pada jatuh gitu...

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

mantap...hatur nuhun kang...

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

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

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

sasingunej.blogspot.com

Thank ya Brow....

ii lucu nih ;)
makasih infonya ..

thanks mas udh share ilmu y,,,succes

Tq infonya gan....

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

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

Post a Comment “Cara Buat Bintang Jatuh dari Kursor

Baca dulu ya! Suka dengan emotikon? lihat kodenya
 
Back To Top Blogger