Mempercantik Blog dengan Tulisan Berputar pada Cursor

LIBAS HABIS. Pada Post saya yang sebelumnya membahas tentang cara Mempercantik Blog Dengan Cursor Bertabur Bintang. Nah sekarang membuat tulisan berputar pada cursor.

Nah nih contohnya di page yang ini saya memakainya. Bagaimana menurut sobat baguskan? Ini salah satu cara mempercantik blog sobat. Ok, langsung saja jika sobat tertarik ikuti langkah berikut ini.

1. Login blogger sobat

2. Pilih tata letak dan tambah gedget, lalu pilih HTML dan JavaScript.

3. Copy dan paste syntax dibawah ini.

<style type="text/css">

#outerCircleText {

font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000000;

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 = " Text yang anda inginkan ";
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. Pada text yang berwarna merah, sobat bisa menggantinya dengan kata yang di inginkan.

5. Lalu save, jika tidak ada kesalahan blog sobat sodah mempunyai animasi tulisan berputar pada cursor.

nb: cara ke-2
sobat bisa memasukkan kode tersebut di edit HTML pada bagian head yaitu sebelum tag </head>

Indahnya berbagi...

Update tanggal 06 Januari (Pertanyaan dari aji mutaqin)

Untuk merubah warna dari text yang berputar:

Cari script ini:

color: #000000;

warna bisa diganti dengan "Color Name" atau "Color Code"

contoh:
color: red; (Color Name)
color: #FF0000; (Color Code)

Pengaturan putaran text dan speed text

var msg = " Text yang anda inginkan ";
var size = 24; //size atau ukurannya
var circleY = 0.75; var circleX = 2; //kemiringan x dan y. x = lebar kanan dan kiri. sedangkan y = atas dan bawah
var letter_spacing = 5; //spasi
var diameter = 10; //diamater
var rotation = 0.4; //kecepatan berputar
var speed = 0.3; //kecepatan membuat rotasi ketika kursor di gerakkan

Mudah2an dengan ada update post ini bisa memberikan kemudahan ya untuk sobat Li-Bi.


-LIBAS HABIS-