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)

80 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. cantik la..thank you very much ..:)

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

    ReplyDelete
  6. sangat bestttttttttttttttttt!!!!!!!!!!!
    thankz ya

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

    ReplyDelete
  8. cam mane nk tukar perkataan di sini tu

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

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

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

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

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

    ReplyDelete
  14. 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
  15. ta jdi pun... adoi.. :( dah byk kli bt nie.. ermmmmm

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

    ReplyDelete
  17. thanks ;) memng best belaja buat BLOGGER

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

    ReplyDelete
  19. macam mane nak tuka perkataan ?

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

    @Ct Nasuha: tukar perkataan? mksudnye?

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

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

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

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

    ReplyDelete
  25. wah ini yang saya cari-cari gan

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

    ReplyDelete
  27. 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
  28. macam mane kalau gune template?? takde layout..

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

    ReplyDelete