Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog

Unik dan kreatif itulah ciri khas blogger yang keren. Mereka akan selalu memiliki inovasi dan kreatifitas dalam memberikan 'kejutan' tersendiri untu para pengunjung blognya.

Blognya memiliki tampilan yang unik. Belum lagi, bentuk sidebarnya yang lain daripada yang lain. Dan masih banyak lagi keunikan-keunikan lainnya. Salah satu kreatifitas seorang blogger yang keren adalah ia memasang atau mengubah kursor ada tulisannya.

Kejadian ini pun Ngonline06 alami saat mengunjungi sebuah situs seorang kawan. Saya awalnya nampak bingung. "Dimana kursornya ini, koq gak nongol-nongol," gumam hati saya. Saya pun dibuat bingung dengan adanya tulisan yang muter-muter. Tak tahunya, tulisan yang muter-muter itulah yang selalu mengikuti kemana arah kursor berada. Maka kejadian itulah yang menginspirasi Ngonline06 dan memberi kesan yang dalam. Artinya, pemilik blog telah memberikan kesan unik pada diri ini dan itu bagus dan memang seharusnya pemilik blog mampu memberi kesan yang serupa kepada pembacanya.

Terlebih kesan untuk selalu mengunjunginya. Wooow kan....

Apakah sahabat pernah mendapati sebuah blog dengan kursor yang selalu diikuti oleh sebuah tulisan seperti yang Ngonline06 alami? Jika sudah, keren bukan? Apa jadinya, jika blog sahabat juga bisa menampilkan hal yang serupa, seperti tulisan nama sahabat atau orang yang sahabat sayangi? Tentu ini akan menjadi hal yang spesial bukan.

Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog

Maka pada kesempatan ini, Ngonline06 akan berbagi tips Membuat Tulisan Bergerak Mengikuti Kursor di Blog. Sebagaimana motto Ngonline06, caranya pun sangat simpel. Lakukan saja, hal-hal berikut dengan baik.

1. Langsung saja menuju dashbord blog sahabat.
2. Klik Layout (Tata Letak) blog.
3. Pilih add gadget (tambah gadget) > HTML/Java Script.
4. Tulis java script di bawah ini pada kotak yang tersedia.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: &#39;comic sans ms&#39;, verdana, arial;
color: #ff840a;

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(){

// Tulis pesan sahabat Ngonline06 disini ya... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";


// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;

// 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 = 10;

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

// 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;

// Kode cursor Ngonline06 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>
Keterangan: ganti huruf yang berwarna merah dengan tulisan yang hendak ditampilkan.

5. Simpan dan lihat hasilnya.

Selamat, sahabat Ngonline06 sekarang memiliki blog yang cantik dengan tulisan yang unik yang mengikuti kursor. Jika ada kesulitan, silahkan corat-coret di kotak komentar. Salam hangat dari Ngonline06.

LIHAT: Cara Membuat Efek Bintang Jatuh pada Kursor di Blog