Objek Berpusing Keliling Mouse

Bagaimana anda gayakan mouse bagi pengunjung yang mengunjungi blog anda.? Adakah anda biarkan secara default atau lakukan pengubahsuaian.?
Sebelum ini terdapat beberapa tutorial seperti bubble, sparkle, atau following star.

Dan kali ini, satu lagi ubahsuai yang anda boleh lakukan, iaitu objek berpusing keliling mouse seperti gambar di bawah

Anda juga blog melihat contoh di blog demo ini

Tutorial di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.
(tidak faham.?)


<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>


3. Save dan lihat hasilnya.

TAMBAHAN.

i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini.
(mencari kod warna.?)
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";


ii) Kod ini memerlukan anda menggunakan layout template.

93 comments:

  1. kunjungi blog baru... http://tigasaat.blogspot.com/ sila berikan sokongan anda kpd blog baru ini..terima kasih...

    ReplyDelete
  2. huhuhu x jd la... >_< dah remove yang len masih x jd

    ReplyDelete
  3. Apa blognya tidak berat,,
    http://adf.ly/4AfgR

    ReplyDelete
  4. hurm,,x jadik pon..:'( cm ner nie???

    ReplyDelete
  5. kunjungilah blog nieyh...http://chentacadburyku.blogspot.com/

    ReplyDelete
  6. na ubah size macamne ? kecik sangat lahh :3

    ReplyDelete
  7. x jd le =='
    www.HotReload2u.blogspot.com

    ReplyDelete
  8. boeh juga nih gan. pertamaX sharenya.

    ReplyDelete
  9. jadikkk,,,me kasih atas tutorialnya,.,.heheh

    ReplyDelete
  10. Tak boleh la bro...bayang pun tarak nih

    ReplyDelete
  11. akhirnya ketemu juga langsung menuju ke tkp

    ReplyDelete
  12. tumpang tanye..sy buat jd tp mouse and objek xcenter?

    ReplyDelete
  13. Nice article thanks for sharing this! I like, I am the first time on this site and am really enthusiastic about and so many good articles. I think it’s just very good. i like this type of articles.

    ReplyDelete
  14. terima kasih..sy dah jadi wat..cantik sgt.

    ReplyDelete
  15. thx info nya..
    Kunjungan balik ya

    ReplyDelete
  16. kog cma datar ya gan animasinya ga muter" kaya demonya tuh apanya gan???

    ReplyDelete
  17. x jadi..:( kenape boleh x jadi ni...

    ReplyDelete
  18. jadi2...heheh...suka sangat...<3

    ReplyDelete
  19. sape2 cube tgk blog sy ni.. boleh tlg komen

    ReplyDelete
  20. hehehehe.. asyik banget nich.. mo nyoba ach..

    ReplyDelete
  21. thanks sbb sha jd buatnya =) hehe

    ReplyDelete
  22. sapa yg jadi tu leh bgtau cmner cara nya

    ReplyDelete
  23. http://fransescowd.blogspot.com ^^ saye nak kopi paste tulisan awak ye? keren punye...

    ReplyDelete
  24. Wah keren bange animasi buat mouse nya tuh.. tapi dilihat2 uhh,, pusing juga lama2.. hemm

    ReplyDelete
  25. oke deh ini memang informasi yang sedang saya cari, terimakasih banyak yah atas info yang sangat bagusnya. Akan langsung aku coba nih.. :D

    ReplyDelete
  26. bagus juga kalau bisa dipasang di blog

    ReplyDelete
  27. wah menurut saya apa ga risih nanti untuk para pengunjung blog kita.

    ReplyDelete
  28. thx info nya bray .. :D
    kunjungi jugak ya .. http://www.penuhtawa.blogspot.com

    ReplyDelete
  29. makasih atas infonya sangat menarik dan artikelnya keren banget

    ReplyDelete
  30. wah moga aja ga bikin pengunjung blog pusing 7 keliling ..

    ReplyDelete
  31. aalaah.. x jdi p0n aq aku buat..

    ReplyDelete
  32. Izin Mencoba... buat manik2 blog...

    ReplyDelete
  33. Wow keren Caranya kaka :D
    thanks atas infonya ..
    Kumjumgi yah Blog saya :D jangan lupa jadi member http://ilmukomputertkj3.blogspot.com/ Terima kasih

    ReplyDelete
  34. Hello, I read your blog regularly. Your story-telling style is awesome, keep doing what you're doing!

    Also visit my web page linked web site

    ReplyDelete
  35. Very often, these people give up before giving the program a real
    chance to work. It will help the prospective health and
    fitness aspirant keep pace with the ever evolving world of fitness.

    Get your heart rate up with a quick burst of fast movement.


    Also visit my weblog; fitness tips abs

    ReplyDelete
  36. The fitness tips for motivation we've been discussing can be very powerful if you use them. One last thing that isn't mandatory but recommended
    is to set up a Pay - Pal account to process your payments.

    Visit a Dermatologist: If you are facing any chronic skin problem
    like pimples, acne and blemishes then consult a doctor at first
    place before going to a beautician.

    Feel free to visit my web-site ... Click In this article

    ReplyDelete
  37. Hello to every , as I am genuinely keen of reading this webpage's post to be updated on a regular basis. It contains pleasant information.

    my homepage Biotechnology Today

    ReplyDelete
  38. gan mana nih artikel hiburan terbarunya . .
    :D

    ReplyDelete
  39. Sometimes funny pictures are created automatically,
    and now need a little time to our own. These make
    great funny pictures, and can be as blatant as the example
    I just gave, or as simple as a spelling mistake.
    Locate a respected joke internet site that allows you to make use of
    the offered jokes which means you won't need to worry about email viruses.

    My homepage: funny pictures and sayings

    ReplyDelete
  40. mesti dicoba niihh,,makasih bnyak yaa gan..

    ReplyDelete
  41. saya ari-cari akhirnya nemu juga,,makasih bnyak gan..

    ReplyDelete
  42. So just like others, if a person has interest in
    the fresh news updates, he can surely give a preference to online
    medium for getting familiarity with these topics. This glass would
    cost less than $1000 and would be available to almost all the people in Britain.
    This secret Taoist soak will wash any lingering worries
    down the drain and give you a fabulous and fresh start.

    Stop by my web-site :: Latest Daily News

    ReplyDelete
  43. This simple app provides lots of funny facts that you have ever known.
    Every day many new websites are coming on the internet, which can be
    used for all sort of access to stuff that can make you smile.
    Some programs allow a user to make the same post on multiple websites simultaneously.


    Here is my web page :: 5webe.com

    ReplyDelete
  44. If you have a website, you can use Google Trends for your
    website traffic to increase as well. I have more
    stuffings in me from yesterday than I care
    to think about. Committee on Gulf War and Health:
    Health Effects of Serving in the Gulf War, Update 2009.


    Here is my webpage - Latest Daily News

    ReplyDelete
  45. What a funny blog! I in fact enjoyed watching this funny video with my family as well as along
    with my colleagues.

    Feel free to visit my web page - fitness tips men

    ReplyDelete
  46. Oh my goodness! Incredible article dude! Thank you so much, However I am
    encountering troubles with your RSS. I donĂ­t understand why I am unable to subscribe to it.
    Is there anybody else having the same RSS problems?
    Anyone that knows the solution can you kindly respond?
    Thanx!!

    Feel free to surf to my weblog Biotech Companies

    ReplyDelete
  47. Everything is very open with a really clear explanation of the issues.

    It was definitely informative. Your website is useful.
    Thanks for sharing!

    Here is my blog :: Biotechnology and Bioengineering

    ReplyDelete
  48. objek di kursor bikin pusing hehehe,,,

    [[652185224824647]] [[652185254824644]] [[652185251491311]] [[652185271491309]] [[652185228157980]] [[652185324824637]] [[652185358157967]]
    [[652185361491300]] [[652185351491301]] [[652185318157971]] [[652185431491293]] [[652185421491294]] [[652185404824629]] [[652185408157962]]
    [[652185428157960]] [[652185504824619]] [[652185548157948]] [[652185544824615]] [[652185534824616]] [[652185508157952]] [[652185608157942]]
    [[652185614824608]] [[652185611491275]] [[652185631491273]] [[652185634824606]] [[652185698157933]] [[652185704824599]] [[652185708157932]]

    ReplyDelete
  49. hehehe baru kali ini ane tahu gan

    ReplyDelete
  50. apa ini berpengaruh terhadap kecepatan loading blog ?

    ReplyDelete
  51. mantap mas bro... titip link nya masbro...

    ReplyDelete
  52. mantap mas bro... titip link nya masbro...

    ReplyDelete
  53. Get the knowledge of any topic and get reference with examples.
    For more http://tutorialterminal.blogspot.in/

    ReplyDelete
  54. kunjungan pagi dengan menyimak dan membaca sudah sangat membantu saya dalam hal ilmu dan wawasan saya makasih banyak atas ilmu nya

    ReplyDelete
  55. Keren juga. Aku udah pake nih. Liat:

    www.tutorialblogger.co.vu

    ReplyDelete
  56. Makasih Gan! Sangat bermanfaat :)
    Jangan lupa berkunjung
    Http://farhanfauzan170.blogspot.com

    ReplyDelete
  57. setelah saya dan membaca dan menyimak artikelnya sangat bermanfaat dan menambah wawasan dan pengetahuan saya semoga blog nya sukses selalu dan selalu menghadirkan artikel yang bermanfaat makasih

    ReplyDelete
  58. nitip lapak http://hendrasuhendra176.blogspot.com

    ReplyDelete