Membuat Kursor Tulisan yang Berputar

Untuk kali ini, saya akan membahas tentang cara membuat kursor dengan tulisan berputar disekitarnya, mungkin anda ingin mencoba untuk membuat kursor yang berbeda dari yang biasanya, ini adalah salah satu efek lain yang bisa anda gunakan agar blog anda terlihat lebih menarik dan keren, caranya:

1. Login ke Blogger
2. Pilih Template
3. Klik Edit HTML
4. Masukkan kode-kode berikut tepat diatas </head>

<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;

/*Sudah tetapan - JANGAN DI EDIT */
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(){

// Sisipkan teks anda disini
var msg = "Ketik Teks Anda";

/* Bagian yang bertuliskan angka pada variabel ini bisa anda ganti sesuai keinginan anda */

// Atur besarnya ukuran teks anda
// (desimal dan negatif tidak diperbolehkan)
var size = 24;

// Ukuran lainnya dan desimal mungkin akan menimbulkan efek yang juga menarik, tetapi jika ingin mengubahnya tetap di angka yang rendah saja ya (antara 0 sampai 3)
var circleY = 0.75; var circleX = 2;

// Jarak diantara huruf
// (boleh menggunakan desimal, tetapi tidak boleh menggunakan angka negatif)
var letter_spacing = 5;

// Diameter lingkaran/oval
// (boleh menggunakan desimal, tetapi tidak boleh menggunakan angka negatif, beberapa pembulatan diterapkan)
var diameter = 10;

// Kecepatan rotasi, bila anda ingin mengaturnya searah jarum jam atur dengan angka negatif (boleh menggunakan desimal)
var rotation = 0.4;

// Pengaturan ini bukan untuk kecepatan rotasinya, tetapi kecepatan reaksinya
// Atur ukuran hanya pada ukuran antara 0 - 1 (boleh menggunakan desimal, tetapi tidak boleh menggunakan angka negatif
var speed = 0.3;

////////////////////// Berhenti Mengedit //////////////////////

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>

Demo
 Gerak-gerikkan mouse anda didalam kotak biru ini


Sumber saya ->