Sabtu, 07 Maret 2009

EFEK CURSOR LAGI

Hihihi... malam makin dingin, ga terasa dah jam 1, but karena hari ini saya blom nulis posting satupun gara-gara gangguan internet, saya harus tetap posting juga akhirnya..!!
Baik... kali ini saya akan memberikan tip's termudah untuk membuat efek mouse/cursor yang di ikuti oleh huruf/kalimat anda sendiri, seperti yang ada di blog ini.
Jika kalian berminat, ikuti langkah-langkah berikut ini.

Masuk account blogger anda==> Dashboard/dasbor ==> Layout/tataletak==> edit HTML, jangan lupa centang "EXPAND TEMPLATE WIDGET"
Lakukan backup dengan men-"download template lengkap" untuk berjaga-jaga bila terjadi kesalahan dan hack !

Lalu copy kode dibawah ini :

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'courier', 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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">



;(function(){


var msg = "TULISAN ANDA DISINI";




var size = 24;


var circleY = 0.75; var circleX = 1;



var letter_spacing = 5;


var diameter = 10;


var rotation = -0.7;



var speed = 0.4;



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 :

Warna merah : silahkan anda ganti sesuai selera anda
Warna biru : Silahkan anda ganti dengan "-0.7" (tanpa tanda petik) untuk searah jarum jam
Warna Kuning : 1 untuk bentuk bentuk lingkaran & 2 untuk bentuk Oval (silahkan pilih satu)

Anda bisa lebih bervariasi dengan memberikan spasi pada kata/kalimat yang akan ditampilkan !!

Dan paste-kan tepat dibawah kode :

<head>

Biar ga susah cari kode <head> gunakan ctrl+F okayyyy.....?????
Trus klik save/simpan perubahan !! dan lihat hasilnya coy !!
Eiitt's seperti biasa... jika terjadi pesan error........ berarti anda harus mem-PARSE terlebih dulu semua kode di atas, masih inget kan cara mem-PARSE ? pernah saya posting disini atau anda bisa membacanya disini.
Atau kalau mau gampang , tinggal copy kode diatas, trus anda klik situs ini atau klik disini dan paste didalam kotak yang tersedia kemudian klik tombol PARSE dibawah kotak tersebut, dan hasil PARSE-nya silahkan anda copy dan pastekan pada posisi semula yaitu dibawah kode :

<head>

Nah... sekarang coba kalian klik tombol save/simpan perubahan, dan lihat hasilnya.
Kalau sudah berhasil....... silahkan anda beritahu teman-teman yang memerlukannya ya ? jangan pelit bozz ?
Selamat mencoba !!

7 komentar:

  1. wHOY cOY Gag Bisa Ntu... Katanya XML gag WILL PERFORMED... Gimana Nih...???

    BalasHapus
  2. wah thank's byk brow...
    berkat anda tlah membimbing aq yg bru brkcimpung dbloggerm,hehehehe...aq tunggu tips2 manjur yg laen...

    BalasHapus
  3. wihh tmbah keren nih blognya
    oia bos saya mo nanya nih kan banyak tuh arsip
    contoh tntang efek salju trus gmn tuh klo mo lihat contohnya thanks bos yeh

    BalasHapus
  4. :D thx atas infony.....
    tapi saya mau tny kl g oval isa g bentuknya....
    misal saya mau ganti lurus bergelombang gmn.....

    tolong balaskan ke email ku saja....
    luvanis@ymail.com

    BalasHapus

Silahkan tulis disini dengan santai dan tertawa2 !!