Cara Membuat Kursor Mouse Di Ikuti Teks Atau Tulisan Di Blog

Kali ini saya akan berbagi trik kembali tentang artikel posting yang
berhubungan dengan pernak-pernik blog, Yaitu cara membuat dan memasang
kursor mouse di ikuti teks atau tulisan di blog.



 Efek dari trik yang saya share ini adalah sebuah teks atau tulisan
akan mengikuti kursor mouse ketika kursor mouse di gerakkan ke arah
manapun dalam blog, Teks atau tulisan yang mengikuti kursor mouse ini
mempunyai efek berputar serta mengikuti arah kursor mouse di gerakkan.



 Hebatnya lagi, Teks atau tulisan yang mengikuti kursor mouse dalam
blog ini bisa di ganti dengan teks atau tulisan seperti yang sobat
inginkan, Warna dari teks juga bisa di atur sesuai dengan keinginan
sobat.Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah,
Karena sobat hanya akan memasukkan kode script pada kotak
HTML/JavaScript dalam Tata Letak blog. Dan tentunya sobat tidak usah
susah-susah untuk Edit HTML dalam Template blog sobat yang mungkin akan
jadi sangat rumit dan memakan banyak waktu.



 Jika sobat tertarik ingin membuat dan memasang kursor mouse
di ikuti teks atau tulisan di blog sobat, Silahkan ikuti
langkah-langkahnya sebagai berikut:

1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih posisi dan klik >> Tambah Gadget >> pilih >> HTML/JavaScript lalu klik tanda +
3. Kemudian silahkan sobat masukkan semua Kode Script berikut kedalam kotak HTML/JavaScript.

<style type="text/css">

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #FF0000;

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 = "Blog Kucopas";

var size = 24;

var circleY = 0.75; var circleX = 2;

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>

4. Langkah yang terakhir. Setelah sobat selesai masukkan semua kode script kedalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada semua halaman blog sobat, Kursor mouse akan di
ikuti teks kemanapun arah kursor di gerakkan pada halaman blog sobat.



Keterangan:

• #FF0000 adalah Kode
  warna Teks atau tulisan yang mengikuti kursor mouse, Silahkan sobat
  ganti dengan kode warna yang lain sesuai dngan keinginan sobat. Kode warna HTML bisa di lihat DISINI.

• Warna BIRU adalah Teks yang mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang sobat inginkan.

  Selamat bagi sobat yang sudah berhasil membuat dan memasang
kursor mouse di ikuti teks atau tulisan di blog. Jika sobat menemui
kesulitan, Silahkan bertanya pada form komentar yang sudah tersedia dan
saya akan dengan senang hati membalasnya.