Membuat Kursor Blog Selalu Di Ikuti Text Pada Blogger

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  TEXT atau TULISAN KALIAN dengan selera masing-masing . OK

6. Jangan Lupa di Simpan

SELESAI… dan semoga bermanfaat.

2 responses to this post.

  1. […] « Panduan Penulisan Tugas Akhir manajemen informatika PDF Membuat Kursor Blog Selalu Di Ikuti Text […]

    Balas

  2. kok gug bisa?😥

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s