Cara membuat perkataan mengikuti kursor

Ada berbagai cara yang dibuat bagi menukar bentuk(menghias) kursor seperti membuatnya bertaburan dengan bintang,berbentuk buih(bubble) dan membuat perkataan mengikuti kursor.
alt

Cara membuatnya:

1.Masuk ke design dan pilih Page elements
   -Untuk dashboard baru pilih Layout

2.Add a Gadget



3.Html/Javascript


dan masukkan kod dibawah ini

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #9B1750;
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 = "Masukkan Perkataan anda disini";
var size = 22;
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>
Ubahkan perkataan yg dikehendakki pada teks yang berwarna oren diatas
4.Kemudian klik save.
update 8/5/2013

Catat Ulasan

Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.

21 Comments:

widiea azira berkata...
terima kasih atas kunjungan

tahnks ..

neterz berkata...
terima kasih atas kunjungan

mantap gan artikelnya, patut di coba nieh?
jangan lupa mampir ke http://neterzindo.blogspot.com/ yah

deqla manjew berkata...
terima kasih atas kunjungan

slm...wahh..tuto yg menarik..da lama cari tuto nih..thx 4 sharing...btw, done follow u, follow me back ya, thx..

ghea berkata...
terima kasih atas kunjungan

nice post gan,,tukeran link gan,,http://blog.umy.ac.id/ghea
kalo sudah terpasang kbrin yah,,makasih

nurhashima yusuf berkata...
terima kasih atas kunjungan

saya x fhm la.....hmm.....ble...
boleh tolong sya tak..hihi...

sweetlove berkata...
terima kasih atas kunjungan

salam, nice info...thanz kongsi

outboundJOGJA berkata...
terima kasih atas kunjungan

Mantaps....Langsung dicoba...thx gan...

ARUNGJERAM berkata...
terima kasih atas kunjungan

wah...jarang-jarang ada gini...nuwun

Restsindo-hty berkata...
terima kasih atas kunjungan

Apakah kode java crpit tersebut juga bisa di gunakan untuk selain blogger ( blogspot ) ?

Ary_Putra berkata...
terima kasih atas kunjungan

Itu scriptnya bikin load page jd berat g ya bang ??

yahaya berkata...
terima kasih atas kunjungan

@Ary_Putratidaklah terlalu berat sangat

Hafieyzha History berkata...
terima kasih atas kunjungan

terbaik !

AreZyan Abu Hassan berkata...
terima kasih atas kunjungan

jadi da . tq . :)

Nur zafirah berkata...
terima kasih atas kunjungan

saya suka sangat blog ni.. banyak membantu. tengs a lot.!!

Phelangiy Senjha berkata...
terima kasih atas kunjungan

warne die xleh tukar ke curs0r yg ade perkataan?

Fokus Impian berkata...
terima kasih atas kunjungan

@Phelangiy Senjhatukar pada kod ini

color: #9B1750

anis aqilah berkata...
terima kasih atas kunjungan

di mana kah terletak page element,,,saya memakai blogger,,,

Fokus Impian berkata...
terima kasih atas kunjungan

@anis aqilah
untuk dashboard baru pilih layout..add a gadget

doedoenk fals berkata...
terima kasih atas kunjungan

tengkiu gan....info nya???

Ae Hlovate berkata...
terima kasih atas kunjungan

VISIT ME.. hikayat-gadis.blogspot.com

muhamad syamsul bin zainol berkata...
terima kasih atas kunjungan

thanks

Related Posts Plugin for WordPress, Blogger...