Cara Membuat Tulisan Berputar Mengelilingi Cursor

Cara Membuat Tulisan Berputar Mengelilingi Cursor - Tutorial lagi.. Tutorial hari ini, saya akan membahas dan menjelaskan tentang Cara Membuat Teks Berputar Mengelilingi Cursor. Saya percaya bahwa sobat sangat tahu maksud tutorial yang akan saya bahas ini. Mungkin, sobat sudah sangat sering kemungkinan juga sobat bosan berkunjung ke blog atau web orang dan melihat unik nya tulisan atau teks yang berputar mengelilingi cursor blog.

Jika sobat membuat tulisan berjalan mengikuti cursor di blog, pastinya pengunjung sobat akan membaca tulisan yang berputar tersebut dan tentunya akan memusingkan pengunjung sobat. :D Ini akan seru jika sobat mengikuti tutorial ini. :v

Tujuan utama dari cara membuat tulisan mengikuti cursor blog tentunya untuk memperindah cursor blog sobat. Tidak hanya mengganti cursor yang unik saja, seperti tutorial yang pernah kita bahasa sebelumnya. Tetapi juga membuat teks berputar mengikuti kursor di blog. Selain itu, sudah di jelaskan seperti diatas. Tujuan agar pengunjung sobat pusing membaca teks yang berputar mengelilingi kursor. (Baca juga: Cara Mudah Mengganti Kursor Dengan Gambar Animasi Di Blog)

Nah, barangkali sobat akan tertarik dengan tutorial ini dan memasang nya di blog sobat.

Demo
Klik disini

1. Login ke blogger

2. Pilih tata letak kemudian Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukan kode berikut in pada kolom HTML/JavaScript:

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: &#39;comic sans ms&#39;, verdana, arial;
color:   #809FFE;
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 = "Selamat Datang di Fahmi Fanirius Blog!";
var size = 14;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.2;
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>

5. Simpan
*Keterangan: Ganti tulisan Selamat datang di Fahmi Fanirius Blog! dengan tulisan berputar yang sobat mau.
Kalau sobat ingin mengganti warna nya, ganti kode #809FFE dengan kode warna yang sobat inginkan. Untuk melihat kode nya. Klik disini KODE WARNA

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Tulisan Berputar Mengelilingi Cursor
Deskripsi	Cara membuat tulisan yang mengikuti kursor yang dapat memusingkan pengunjung Anda.
Author	Google
Author Rating	91%/ 100% Suara Dari 2890 votes