Membina teks bergerak pada kursor mouse

Untuk membina teks bergerak pada kursor seperti yang boleh anda lihat  di sini, sila ikut beberapa langkah yang mudah di bawah.


Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan paste pada notepad. Edit teks Tulis teks anda di sini pada kod biru yang di bold dengan teks pilihan sendiri. Anda juga boleh menukar warna teks dengan menukar kod warna #0224FE yang di bold dengan warna pilihan anda. Untuk memilih kod warna, sila klik di sini.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'verdana';
color: #0224FE;
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 = "Tulis teks 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>

Langkah 3

Salin kod yang telah siap di edit pada notepad tadi dan paste pada ruang Content HTML/Javascript (Rujuk langkah 1)

Akhir sekali klik Preview dan jika tiada mesej Error terpapar, klik saja Save. Membina teks bergerak pada kursor mouse

{ 21 comments.. read them below or add one }

FiFFyMaFiA (",) FiFFyMaFiA (",) 9:51 PM
mcm best. tp pening otak aku tgk word tu. haha
touyakaruma touyakaruma 9:58 PM
bertambah pening laa aku lepas nie
Iza Iza 10:22 PM
menarik tp....aku kena sedar diri dulu...silap2 buat, porak-poranda blog kesayanganku....
Nescafe ais Nescafe ais 10:27 PM
@FiFFyMaFiA (",)

Haha. Walaupun pening, tapi mesti ada juga yang minat benda macam ni
Nescafe ais Nescafe ais 10:27 PM
@touyakaruma

Haha. Ni salah satu cara nak bagi readers kita pening.
Nescafe ais Nescafe ais 10:29 PM
@Iza

Nada kecewa jer bunyinya. Hehe. Boleh kalau nak cuba. Tak kena edit template pun. Cuma copy paste pada HTML/Javascript.
RedzaLiza RedzaLiza 5:42 PM
yeyeyeyeye....dpt wat. tq cikgu nes.
fateen fateen 11:37 AM
Abang Nescape , thanks ya , :)
Misz_zana85 Misz_zana85 12:36 AM
Dah berjaya !!!
Suke sgt >_<
Terima kasih, share tutorial nie
ZelL ThE gReaT ! ™ ZelL ThE gReaT ! ™ 11:21 AM
smart n cute ! thnx miss :)
Hajar Goh Hajar Goh 12:49 AM
tq... banyak benda yang jadi rujukan saya dr blog nih.. mekasih
Hajar Goh Hajar Goh 12:51 AM
http://skkamponggelam.blogspot.com/. Tn, bgmn nak ubah flashbanner tu sm besar ngan coloum blog.
fierlynn fierlynn 8:55 PM
terima kasih!
www.fierlynnfynn.blogspot.com
SuKEJunpyo SuKEJunpyo 11:22 AM
Hahaha..cam menambahkan fening2 lalat to visitor lah weii!!
Firdaus =) Firdaus =) 9:50 PM
camne nk remove die?
Firdaus =) Firdaus =) 10:02 PM
sori2. problem da setel. lupe.
heheeeeeeeeeeeeeeee
Lysha zainal Lysha zainal 4:17 PM
erm, thxx for the info, but nak tanye 1 thing, if kite tukar tulisan tu bole tak??
anilza anilza 1:32 AM
thanx a lot finally jumpa jgk benda ni,..tak sia2 usha aq cari..thanx alot ..