Cara Membuat Text Mengikuti Cursor yang keren banget

Pada kesempatan kali ini saya mau berbagi ilmu pada
anda semua tentang cara membuat teks yang mengikuti
cursor. Mungkin anda pernah satu waktu mengunjungi
sebuah blog yang manakala bila cursor anda digerak-
kan maka ada text yang mengikuti cursor anda
tersebut. Nah, untuk anda yang ingin mencoba dan
menerapkannya di blog caranya sangat mudah ga pake
ribet karena anda ga perlu Edit HTML
Berikut ini adalah caranya :

1. Pada layar Dasbor anda pilih Rancangan
2. Tambah Gadgetnya dan pilih HTML/JavaScript
3. Copy dan paste kode script di bawah ini
    terus masukkan.

• Kode script untuk " Text Berbentuk Melingkar" :

<style type="text/css"> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #000; /* End Optional */ /* Start Required - Do Not Edit */ 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><br /> <script type="text/javascript"> /* Circling text trail- Tim Tilton Website: http://www.tempermedia.com/ Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // Your message here (QUOTED STRING) var msg = "http://hakimcyberwolf.blogspot.com/"; /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */ // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 24; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3; ////////////////////// Stop Editing ////////////////////// 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></i>

CATATAN :

* Ganti "namaku.blogspot.com"
   dengan kalimat apa saja yang anda inginkan.
* Ganti juga "color" nya, bila perlu.

• Kode script untuk " Text Berbentuk Vertikal":

<SCRIPT language=JavaScript1.2> <!-- /* Cursor Trailer II (By Kurt at kurt.grigg@virgin.net) Modified and featured on Dynamicdrive.com For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ var message='http://hakimcyberwolf.blogspot.com/'; var messagecolor='#000000' //Enter number of seconds for message to display (0=perpetual) var dismissafter=0 ///no need to edit below///////// var amount=5,ypos=0,xpos=0,Ay=0,Ax=0,By=0,Bx=0,Cy=0,Cx=0,Dy=0,Dx=0,Ey=0,Ex=0; if (document.layers){ for (i = 0; i < amount; i++) {document.write('<layer name=ns'+i+' top=0 left=0><font face="Courier New" size=3 color='+messagecolor+'>'+message+'</font></layer>')} window.captureEvents(Event.MOUSEMOVE); function nsmouse(evnt){xpos = evnt.pageX;ypos = evnt.pageY;makefollow()} } else if (document.all){ document.write("<div id='outer' style='position:absolute;top:0px;left:0px'> "); document.write("<div id='inner' style='position:relative'> "); for (i = 0; i < amount; i++) {document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;font-family:Courier New;font-size:16px;color:'+messagecolor+'">'+message+'</div> ')} document.write("</div> "); document.write("</div> "); function iemouse(){ypos = document.body.scrollTop + event.y;xpos = document.body.scrollLeft + event.x;makefollow()} } function makefollow(){ if (document.layers){ document.layers["ns0"].top=ay;document.layers["ns0"].left=ax; document.layers["ns1"].top=by;document.layers["ns1"].left=bx; document.layers["ns2"].top=cy;document.layers["ns2"].left=cx; document.layers["ns3"].top=Dy;document.layers["ns3"].left=Dx; document.layers["ns4"].top=Ey;document.layers["ns4"].left=Ex; } else if (document.all){ outer.all.inner.all[0].style.pixelTop=ay;outer.all.inner.all[0].style.pixelLeft=ax; outer.all.inner.all[1].style.pixelTop=by;outer.all.inner.all[1].style.pixelLeft=bx; outer.all.inner.all[2].style.pixelTop=cy;outer.all.inner.all[2].style.pixelLeft=cx; outer.all.inner.all[3].style.pixelTop=Dy;outer.all.inner.all[3].style.pixelLeft=Dx; outer.all.inner.all[4].style.pixelTop=Ey;outer.all.inner.all[4].style.pixelLeft=Ex; } } function move(){ if (dismissafter!=0) setTimeout("hidetrail()",dismissafter*1000) if (document.layers){window.onMouseMove = nsmouse} else if (document.all){window.document.onmousemove = iemouse} ey = Math.round(Ey+=((ypos+20)-Ey)*2/2);ex = Math.round(Ex+=((xpos+20)-Ex)*2/2); dy = Math.round(Dy+=(ey - Dy)*2/4);dx = Math.round(Dx+=(ex - Dx)*2/4); cy = Math.round(Cy+=(dy - Cy)*2/6);cx = Math.round(Cx+=(dx - Cx)*2/6); by = Math.round(By+=(cy - By)*2/8);bx = Math.round(Bx+=(cx - Bx)*2/8); ay = Math.round(Ay+= (by - Ay)*2/10);ax = Math.round(Ax+= (bx - Ax)*2/10); makefollow(); jumpstart=setTimeout('move()',10); } function hidetrail(){ if (document.all){ for (i2=0;i2<amount;i2++){ outer.all.inner.all[i2].style.visibility="hidden" clearTimeout(jumpstart) } } else if (document.layers){ for (i2=0;i2<amount;i2++){ temp="ns"+i2 document.layers[temp].visibility="hide" clearTimeout(jumpstart) } } } window.onload=move; //--> </SCRIPT></i>

CATATAN :
* Ganti 'http://hakimcyberwolf.blogspot.com/'
   dengan kalimat apa saja yang anda inginkan.
* Ganti juga "color" nya, bila perlu.

4. Bila anda sesuai mengikuti langkah-langkah yang
    saya berikan di atas, maka hasilnya akan seperti
    gambar illustrasi di bawah ini :

5. Selamat ber-eksperimen dan semoga berhasil
   Good Luck ...................
   Jangan lupa, seperti biasanya,

   saya tunggu komentar dari anda.