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.

96 comments:

  1. Dapatkan memori 50GB kapasiti simpanan foto, muzik, video dan apa sahaja untuk telefon anda secara percuma hari ini tanpa sebarang bayaran dari Gombug.net! Sebelum 31 Dec 2012 - http://adf.ly/4O5uz

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

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

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

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

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

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

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

    ReplyDelete
  9. boeh juga nih gan. pertamaX sharenya.

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

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

    ReplyDelete
  12. akhirnya ketemu juga langsung menuju ke tkp

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

    ReplyDelete
  14. 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
  15. terima kasih..sy dah jadi wat..cantik sgt.

    ReplyDelete
  16. thx info nya..
    Kunjungan balik ya

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

    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. sapa yg jadi tu leh bgtau cmner cara nya

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

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

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

    ReplyDelete
  25. bagus juga kalau bisa dipasang di blog

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

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

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

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

    ReplyDelete
  30. Izin Mencoba... buat manik2 blog...

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

    ReplyDelete
  32. 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
  33. 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
  34. 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
  35. 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
  36. gan mana nih artikel hiburan terbarunya . .
    :D

    ReplyDelete
  37. 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
  38. mesti dicoba niihh,,makasih bnyak yaa gan..

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

    ReplyDelete
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. hehehe baru kali ini ane tahu gan

    ReplyDelete
  48. apa ini berpengaruh terhadap kecepatan loading blog ?

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

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

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

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

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

    www.tutorialblogger.co.vu

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

    ReplyDelete
  55. 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
  56. nitip lapak http://hendrasuhendra176.blogspot.com

    ReplyDelete