Membuat Cursor Selalu Diikuti Oleh Text

Ketika saya blogwalking ke beberapa site para sobat, saya banyak menemukan cursor yang selalu diikuti oleh text. Saya berfikir bagaimana cara membuatnya. Akhirnya saya menemukan jawaban tersebut di salah satu site SMU negeri di Pekanbaru [ di sini ].
visit n learn
Tetapi setelah saya perhatikan ternyata kita hanya bisa memilih salah satu dari script yang telah diciptakan yang mempunyai text berbeda. Adapun text-text tersebut adalah "Selamat Menikmati Blog Ini", "Welcome", "Selamat Datang Di Blog Ini", "Selamat Datang" dan "Enjoy Stay Here".

Kemudian saya berfikir lagi, bagaimana misalnya saya tidak ingin menggunakan text yang telah diciptkan tersebut..? Dan bagaimana caranya agar saya bisa menciptakan text yang akan saya ciptakan sendiri..? Dan akhirnya terbuka juga rahasianya, dan sayapun sekarang bisa membuat cursor yang diikuti text yang saya inginkan.

Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='pingin belajar'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai

Saya sangat berterimakasih pada site "smekanfive" Pekanbaru yang telah memberi saya inspirasi dan akhirnya membuat saya berfikir bagaimana cara mengutak-atik script tersebut.

Selamat mencoba, semoga bermanfaat

Sampai Saat Ini Sudah Diterima 32 Komentar Untuk Artikel
" Membuat Cursor Selalu Diikuti Oleh Text "

Pit-Onta mengatakan...

Pertama uda,
wah file jsnya dijabarin :) padahal file itu dapat disingkat lagi dengan disimpan lagi jadi file .js dengan menggunakan notepad >> all files >> ketik sesukaanda.js
hehehe...
nyoba ahhh

Uda Ronsi mengatakan...

@ Pit-Onta
kalau kita menyimpan file tsb ke dalam file JavaScript (js), gimana caranya kita me edit textnya...karena kita udah menyimpannya maka textnya itu terus dunk...
btw.. trims kunjungannya.

Pit-Onta mengatakan...

sebenernya masih banyak fungsi yang lain biar rubah warna textnya ganti :
var color='#ff0000';

ganti huruf tebal dengan kode warna yang hendak kamu pilih. untuk kode warna silahkan kunjungu DISINI

Untuk merubah perputaran text juga sebenernya dapat dirubah, dengan text lurus atau model bendera berkibar :) cuman aku belum sempat ngoprek mau malming dulu :)

KUNJUNGI JUGA BLOG AKU 1-nya yah udah
Tips blogspot buat cari adsense uda :)

Pit-Onta mengatakan...

edit text tersebut sebelum di simpan dengan format .js kemudian simpan di tempat penyimpanan kita ex.geocities

klo bosen dengan yg itu tinggal diambil lagi dari file penyimpanan dengan format js

editnya gampang uda :) tinggal klik kanan file yang akan kita buka kemudian pilih open with >> pilih NOTEPAD :) coba deh uda rubah file .js pake notepad :)

catatan setelah diedit jangan di save as tapi langsung save maka file tersebut akan tetap ber ektensi .js :)

Uda Ronsi mengatakan...

@ Pit-Onta lagi...
kalau saya simpan dalam bentuk file js, terus gimana blogger yg mencopy dari postingan saya ini...? mereka akan tetap pakai cursor dengan text "pingin belajar" dunk...?
dan... itulah tujuan saya menjabarkannya... agar yg mencopy dari postingan saya bisa me edit sesuka mereka...

oke...trims Pit-Onta... mari terus berbagi...bravo blogger indonesia

Pit-Onta mengatakan...

yah klo di uploadan sehh mending gini ajah buat tutornya...klo buat sendiri aku pake JS da...

pokoknya top banget deh tutornya :)

Ronaldo Rozalino mengatakan...

thanks ya

ebeeth mengatakan...

Yups..bener Uda tuh, harus dijabarin n supaya saya bisa ngutak-ngatiknya...kalo langsung pake JS, tar teks yg ngikutinnya gak sesuai atuh...masa "pengen belajar", teks itu kan hak cipta Uda..wkwkwkwk

AG-Loc / Ananda ganesha mengatakan...

duh, blog aku jadi makin berat..
coba deh ke blog aku:
http://gajahpandai.blogspot.com

hady mengatakan...

makasih banyak nih mas ^_^
sekarang aku dah bisa buat yang kaya gitu
hehehe

admin mengatakan...

oke tuh uda buat dicoba...txz

Aji Prasetya Utama mengatakan...

setelah berhari2 mencariakhirnya ketemu juga, makasih mas..

cheuw mengatakan...

itu efeknya ngikutin ny kaya per atau gmn??

alia5 mengatakan...

kalo biar cursor trailernya kayak di blognya uda yang ini sih, dirubah apanya...tulisan 'pengin belajar' atau apanya.....? thanks sebelumnya tuk infonya

zetank mengatakan...

tank's tutornya

can301 mengatakan...

Uda, mau tanya kenapa textnya kalau udah satu putaran link yang di sortir akan kembali ke awal seperti cursornya tidak berada diatas link tersebut. thx ya da

can301 mengatakan...

Gini da coba kamu bawa kursor ke free download lalu ke bawahnya < game & nude > dan letakan disana, setelah tulisan welcomenya satu putaran tulisan gamenya akan hilang dan kita harus ulang lagi dari awal gitu da

ady mengatakan...

thanks mas atas infonya, dan juga untuk Rosmana thx dh dijwb..

GONDES mengatakan...

Makasih banyak sobb

Muchtar Zakaria mengatakan...

trims atas tutornya.
semoga makin sukses BOs

gustihard mengatakan...

thx buanyak bwt u brurr, maju trs ya....

ada waktu mampir ke blog q ya, bnyk editan & trik dr u yg q pke brurr...

jgn lpa komentnya ya, he5x...

edysiswandy@gmail.com mengatakan...

thanks

robertkoko mengatakan...

terimakasih banyak om... infonya sangat mendidik

coles mengatakan...

muantebb bener...http://img228.imageshack.us/img228/2490/pinginbelajar9.gif
http://img228.imageshack.us/img228/2490/pinginbelajar9.gif

coles mengatakan...

sek-sek diulang comentnya....hehe

MUUANTEB BENER...: 16

coles mengatakan...

:31

Mr. Djibriel mengatakan...

:14 thanks bgd yach...

davit mengatakan...

SALUT BOSSSSSSSSSSSSSS :11

alambebaz mengatakan...

:10
Thanks ilmu nya sob,,
Btw ,Kmu nak SMK5 PKU ya???
:14

Ai_愛 chan ♫ mengatakan...

mudah sekali...! :16
aku langsung bisa! :10

Thep_Vedder mengatakan...

oke..visit back BOS.............

ahmad fadlan mengatakan...

tapi ko tulisanya di pojokan j ya mas, trus gmn caranya ngasih jarak biar tulisany dket sama corsornya mas

Tambahkan Emoticon Berikut Ini Ke Dalam Komentar Anda. Caranya Cukup Dengan Mengetik Kode Yang Berwarna Biru Di Samping Kanan Emoticon Tersebut

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45

Poskan Komentar