Tutorial Perkataan Ikut Cursor

Ingin perkataan mengikut cursor anda semasa melayari blog.?

Contohnya seperti di bawah.


Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript (more info)

2. Copy dan paste kod berikut dalam html/javascript yang anda buka.


<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>



Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.

3. Save dan lihat hasilnya.:)


Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

1.Tukar style

font-style: normal; (pilihan lain italic, oblique, atau inherit)

2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

82 comments:

  1. bestnye ada org pandai macam ni..sya amik ye ilmu ni...credit to u!~

    ReplyDelete
  2. WOW!! awesome larh!!! haha~

    thank you~
    sy pun nak amek jugak~

    ReplyDelete
  3. thankz sb bg bnyk maklumat pasal blog ni...

    ReplyDelete
  4. Tak jadi la nak tukar font :(

    ReplyDelete
  5. cantik la..thank you very much ..:)

    ReplyDelete
  6. thanz , !!
    tpi kadang2 . .ad yunk ssah nx ekowt !!

    ReplyDelete
  7. sangat bestttttttttttttttttt!!!!!!!!!!!
    thankz ya

    ReplyDelete
  8. ala kite da cpy paste da 2 bile nak save x bleh plak..knp ye?

    ReplyDelete
  9. cam mane nk tukar perkataan di sini tu

    ReplyDelete
  10. jadii ! suka sangat . terima kasehh ! (:

    ReplyDelete
  11. tengs:-)..mmng cute sngt cursor ni:-)

    ReplyDelete
  12. apahal saya x dapat???berkali kali dah cuba..

    ReplyDelete
  13. saya da kreditkn link niey kt blog sy.. meh la singgah :) tq bebanyak taw

    ReplyDelete
  14. memangg bagozz lhaa , terimaakasehh sebub sudaa berkongsi maklumat .
    blogg sudaa semakin lawaa , *perasann jeaa .

    ReplyDelete
  15. tq byk2...sgt2 m'bantu('',)

    ReplyDelete
  16. thnx.... syer bley uad... thnxalot...
    bhy yg xpham...
    kt yg code bnyk skli.. korunx perhti leloq2...
    kt ats skli....
    ad dyer highlight sket.....
    dyer tulis 'perkataandi sini'
    korunx tkar laa....
    then yg laen nx tkar wrne kep apew kep...?
    smer jge.. dyer douk ats sket jep dgn perkataan yg korunx ubah...... kay... admin this blog...
    syer tumpg lu jah.. thnxalot.. :)

    ReplyDelete
  17. ta jdi pun... adoi.. :( dah byk kli bt nie.. ermmmmm

    ReplyDelete
  18. knpe ta jdi?? dah wpe kli bt ta jdi jgk.. arrrgghhh.. :(

    ReplyDelete
  19. thanks ;) memng best belaja buat BLOGGER

    ReplyDelete
  20. tengs a lot , tp ulisan tue laju sgt lahh , pening , cne na buat dye gerak slow eyh ?

    ReplyDelete
  21. Thanks! Awesome! sye dh dpt tau serba skit pasal adding element nieh~ anyway thanks share info~

    @Ct Nasuha: tukar perkataan? mksudnye?

    ReplyDelete
  22. thanq u ...
    chanteq cgt2...
    follow la blog sy
    www.pinqieylahieyla92.blogspot.com

    ReplyDelete
  23. BERJAYA....tpi kalu pkataan tu ikut laju skit tak bleh ke?

    ReplyDelete
  24. waaahh..senangje :3 saye amik tau..thanks <3

    ReplyDelete
  25. terimas kasih...jadi dan menjadi..thanks aloot

    ReplyDelete
  26. wah ini yang saya cari-cari gan

    ReplyDelete
  27. ala wafiy punya blog new version, tak ada design and add gadget :( macam mana

    ReplyDelete
  28. Admin atau sapa2 yang tau..bila saya buat linkwithin...ada keluar macam tutorial yang anda minati..tetapi tajuk post yg dibahagian bawah kenapa tak keluar ?????tolong saya..

    ReplyDelete
  29. macam mane kalau gune template?? takde layout..

    ReplyDelete
  30. Thanks ^_^ Boleh saya copy sedikit tutorial dan letakkan di blog saya? Saya letak credit. http://missalishaerein.blogspot.com/

    ReplyDelete
  31. It is now very difficult to find a nice respectable wife, and girls have very high expectations for men as well. However, this does not extend to girls who are legit mail order brides. They are lovely, humble and very sociable here. You should be assured that the cheaters won't trick you here. Since the web has built-in security against scammers, so that they cannot become girls. This site can be used safely.

    ReplyDelete
  32. I ordered over a dozen jobs in the last year and all from various firms. I have always selected them from the list of the website of the paper writing service review to make sure I am not mistaken. Generally speaking, the web is very helpful and not just for academics.

    ReplyDelete
  33. Most men, definitely men, are alone, but need the love of women and I am personally aware of this. However, not all people are now lost, as long as there is a nice place! Even in my 30's, I could find a nice find a russian bride, we met her, had coffee, and all is really sweet! Thank you so much for the workers and the service. They respond quickly and help the latter always.

    ReplyDelete
  34. Many guys are having difficulty locating a bride by mail, as choosing a site to accomplish this is quite tough! Can you go into shameful people who want your money stealing, but don't you need it? Even ordering brides Online's most respected sites have unscrupulous clones to sift money out of! But you are over to look for a webpage for latina wife since I will explain you how to go there. Go ahead and I assure you're going to succeed!

    ReplyDelete
  35. Thank you for sharing this fantastic blog, Icertainly enjoyed reading every bit of your fascinating post. I’ve got you bookmarked to look at new things you post, thanks for sharing. download slu jamb cut off mark

    ReplyDelete