Belajar Membuat Tulisan Mengikuti Kursor

السلام عليكم

Salam Rahayu dan Damai Selalu
Sering kita melihat di blog atau web ada tulisan yang selalu mengikuti ke mana arah perginya kursor. Kadang membuat kita lebih asik, kadang juga ada yang merasa kurang nyaman karena pandangan membacanya sedikit agak terganggu oleh tulisan tersebut.
Tapi tak ada salahnya kita mengetahui cara membuat tulisan yang selalu mengikuti ke mana arah perginya kursor.
Bagi yang membutuhkan, mari kita belajar bersama:

1. Login ke akun dashbor blog kita
2. Klik tata letak >>tambah gadget >> pilih  HTML/javascript 

3. Klik Edit HTML (posisi pada Rich Text)

4. Masukkan kode widget ke dalam kotak dan kosongkan isian judulnya.
5. Klik SAVE

inilah kode script yang harus dimasukkan.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: Trebuchet MS;
color: #66FF00;
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'>
//<![CDATA[
;(function(){
// =====Pengaturan Dimulai=====//
// Masukkan kalimat yang diinginkan (QUOTED STRING)
var msg = "laatansabelajar";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 7;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.8;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

// =====Pengaturan Selesai=====//

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>

wigati:

kita bisa mengganti pengaturannya untuk tulisan yang bertanda merah.
urutan dari atas:
#.italic berarti bentuk tulisan miring. bisa kita ganti
#. bold berarti huruf tebal, ini bisa diganti.
#.  Trebuchet MS (jenis font). kita bisa mengganti dengan arial atau yang lain.
#. color: #66FF00 (warna teks), untuk melihat kode warna bisa lihat daftar kode warna (Picker)
#."laatansabelajar" kita mengganti dengan tulisan yang kita mau. karena tulisan itulah yang akan berjalan mengikuti kursor.
#. var size = 20; angka 20 menunjukkan besar kecilnya huruf, bisa diganti.
#. var circleY = 0.75; var circleX = 2;  Bentuk tulisan ketika mengitari kursor. Bila menginginkan bulat, isikan angka yang sama, bila menghendako oval, bedakan angkanya.
#.var letter_spacing = 5 . semakin besar angkanya maka jarak antara huruf satu ke lainnya semakin kecil/sempit.
#. var diameter = 7; untuk mengatur besar kecilnya lingkaran tulisan ketika mengitari kursor, semakin besar angkanya semakin besar diameternya.
#.var rotation = 0.8; untuk kecepatan putaran teks.
#. var speed = 0.3; kecepatan tulisan dalam merespon kursor.

Silahkan dicoba dan diutak atik sendiri biar tambah asik dan puassss.
Jangan lupa koreksi dan pencerahannya.
Salam Rahayu

والسلام عليكم