letak moving text kat cursor

Dah nak seminggu lebih gak aku tak update belog ni ek, haha.. tapi aku rajin gak nak blog walking. Bukan aku tak online pun. Internet dan aku memang tak boleh nak dipisahkan, huahua... Memandangkan hari ni hari ahad dan aku telah ditinggalkan di bilik berseorangan, maka dengan baik hatinya aku di sini sedang menaip dengan menggunakan papan kekunci! haha, lolx... skema gegiler.

Akey, hari ni tetibe aje nak buat tuto pasal cursor dengan moving text. Tahu tak apa yang aku cakap ni? Alaa... kalau korang gerak sikit je anak panah ni, ada laa tulisan- tulisan yang join sekaki nak sibuk- sibuk gerak sekali. Macam anak ayam yang tak boleh berenggang dengan ibunya tu.

So, macam mana nak buat tu? Kalau berminat sila baca untuk yang seterusnya akey?

Aku tak pasti kalau benda ni akan memberatkan belog korang atau tidak. Yang pasti dah ramai yang buat pasal ni. Tapi aku tak buat, takkk minat! Aku rasa semak kot.. kalau boleh, macam nak kasi putus je tulisan tu dari anak panah, ngaaahahaha...

By the way, aku dah buat kajian, ececeh... aku rasa benda ni takkan buat belog korang berat. Cuma cursor tu ajela ambil masa sikit nak kuar benda tulisan- tulisan ni. Haaa! Cakap tak serupa bikin kan? kejap tadi tak pasti, sekarang lain pulak! Hahaha... eh sesuke aty aku r... ade ku kisah? huhu.. tak pasal- pasal kena penampar bila cakap macam tu, betul tak? betul tak?

Dah.... dah.. kalau nak buat, cepat copy code ni.

<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 = "TEKS ANDA PADA CURSOR";

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>

Ngaaa... lupa nak cakap! Korang letak code ni kat Add gadget k.. camne?

Dashboard --> Design --> Page elements --> Add gadget --> Html/ javascript


Tapi, sebelum tu, korang kena gak ubah something! Takkan copy dan terus save kan? Akey, so yang korang kena ubah cuma tulisan yang berwarna tu aje. Di mana warna biru tu korang ubah dengan warna kesukaan korang. Warna tu untuk warna tulisan korang kat cursor tu dan korang boleh rujuk kat sini pasal code warna tu. Klik sini.

Lepas tu, untuk tulisan yang berwarna hijau tu pulak, korang ubahla dengan apa- apa je. Korang nak ubah dengan nama korang ke... nama nenek ke.. pets korang ke... apa- apa jela. Lepas dah ubah apa- apa yang patut tu, korang dah boleh save dan lihat je apa hasilnya k! selamat mencuba.. ^^