Membuat Kursor Blog Selalu Di Ikuti Text

Bismillah ... Alhamdulillah penjelasan blog makin kemari makin banyak aja materi yang harus disampaikan untuk sekedar berbagi informasi bersama sahabat blogger yang lain. Setelah sebelumnya saya menjelaskan beberapa versi penjelasan tentang kursor pada Blogger, diantaranya :

1. Merubah bentuk tampilan kursor dengan gambar sendiri
2. Merubah tampilan kursor saat menyorot gambar pada halaman posting blog

Nah.. untuk trik kali ini saya akan menjelaskan tentang kursor yang selalu diikuti text, mungkin bagi kalian sudah ada yang melihatnya ketika melakukan blogwalking, atau ada yang sudah memasangnya...?

Text yang mengikuti arah lajunya kursor ini bisa kita rubah dengan text sesuai keinginan kita. Dengan bantuan java script ini akan bisa kita buat pada kursor blog. Untuk pembuatannya pun sangat simple karena kalian tidak akan pusing dihadapkan banyak Kode-kode.

Sebelum saya menjelaskan cara pembuatannya, silahkan kalian lihat DEMO nya terlebih dahulu dibawah ini :

Menarik bukan....?

Untuk detail pembuatannya silahkan baca tahap-tahapnya dibawah ini :

1. Login ke blogger Kalian
2. Pilih RANCANGAN
3. Pilih ELEMEN HALAMAN
4. Pilih Tambah Gadget ---> HTML/Javascript
5. Copy dan Paste Script berikut pada Konten HTML/Java Scriptnya

<!-- start Kursor by azis -->

<script>

//kursor mouse by Azis Lamayuda

//Website: http://www.z33s.co.cc

function cursor_text_circle(){

var msg='TULIS TEXT YANG INGIN TAMPIL DISINI'.split('').reverse().join('');


var font='Verdana,Arial';

var size=3; // up to seven

var color='#ff0000';

var speed=.3;

var rotation=-.2;

//---------------------------------------------------


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


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(){

if (ie) outer.style.top=iecompattest().scrollTop+'px';

currStep-=rotation;

for (i=0; i < n; i++){

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(){

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();

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>

<!-- End Kursor by azis -->

Keterangan :
Silahkan kalian ganti Kode berwarna merah dengan TEXT atau TULISAN KALIAN.

6. Jangan Lupa di Simpan

SELESAI... dan semoga bermanfaat.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.