Cara Membuat Kursor Mouse Di Ikuti Teks Atau Tulisan Di Blog

Cara Membuat Kursor Mouse Di Ikuti Teks Atau Tulisan Di Blog

---

 - Kali ini gwe akan berbagi trik 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 gwe 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 bro n sist inginkan, Warna dari teks juga bisa di atur sesuai dengan keinginan bro n sist.

Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah, Karena bro n sist hanya akan memasukkan kode script pada kotak HTML/JavaScript dalam Tata Letak blog. Dan tentunya bro n sist tidak usah susah-susah untuk Edit HTML dalam Template blog bro n sist yang mungkin akan jadi sangat rumit dan memakan banyak waktu.

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

1.  Langkah yang pertama. Silahkan bro n sist >> Masuk/Login >> ke Blog bro n sist.

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 bro n sist 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 = "www.h45real.co.cc";
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 bro n sist selesai masukkan semua kode script kedalam kotak HTML/JavaScript, Silahkan bro n sist klik >> Simpan dan lihat hasilnya pada semua halaman blog bro n sist, Kursor mouse akan di ikuti teks kemanapun arah kursor di gerakkan pada halaman blog bro n sist.

Keterangan:

·         #FF0000 adalah Kode warna Teks atau tulisan yang mengikuti kursor mouse, Silahkan bro n sist  ganti dengan kode warna yang lain sesuai dngan keinginan bro n sist . 

• [ biru = #2706FC ]
• [ merah = #FC060A ]
• [ putih = #FEFEFE ]
• [ kuning = #F5FC06 ]
• [ hijau = #006400 ]
• [ hitam = #040404 ]
• [ ungu = #640064 ]
• [ orange = #FC3406 ]
• [ pink = #FC9BB6 ]

(selebihnya cari sendiri yahh)

·          Warna BIRU adalah Teks yang mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang bro n sist  inginkan.

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

 Semoga tutorial ringan tentang trik cara membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog ini bisa sangat bermanfaat,,,,,

Pai-pai,,,,,,,\^,^/

Twitter : @riel_zoldich

Facebook : www.facebook.com/ariel.zoldich