Cara Membuat Tulisan Yang Slalu Mengikuti Kursor

Kali ini valkry ingin memberikan trik 'Cara Membuat Tulisan Yang Slalu Mengikuti Kursor', karena ada salah satu teman kita yg menanyakan kepada saya, bagaimana cara pasang Tek/tulisan yang selalu mengikuti kursor.



Nah disini saya ingin memberikan cara membuat Tek/tulisan yang selalu mengikuti kursor. contoh bisa anda lihat dipostingan saya ini.

Baiklah langsung saja cara membuatnya :

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >>

3. Klik Expand Templates Widget,

3. cari kode :  ]]></b:skin>  , lalu tetakkan kode berikut tepat dibawahnya, atau diatas kode : </head>

<style type="text/css">
#outerCircleText{
font-style: italic;
font-weight: normal;
font-family: Comic Sans MS;
color:#ccc;
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(){

var msg = "Zero Nine.Net";

var size = 24;

var circleY = 0.75; var circleX = 3;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.3;


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>

Keterangan:::

- Sobat tinggal merubah Teks yang berwarna Merah, sesuai keinginan anda..

4. Terakhir Save Templates.. dan lihat hasilnya..