Membuat Cursor Diikuti Text

Ada yang beda enggak sama blog ini?Yap benar,ada tambahan text yang mengelilingi kursornya.Kalau cuma mengganti kursor saja sudah biasa itu,tutorialnya juga sudah bejibun.Oke,kamu tertarik pengen buat?Ayo ikuton terus tutorialnya...



  • Masuk ke blogger.com
  • Layout-->Add Page Elements-->Tambah Gadget
  • Pilih gadget JavaScript/HTML
  • Masukan kode dibawah ini


<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='www.rahad2six.uni.cc'.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>

  • Ganti tulisan berwarna merah dengan text yang kamu inginkan.
  • Klik save
Lihat deh,ada text yang mengelilingi cursor di blogmu.
selamat mencoba.

===========+++==========+++============


Nantikan update artikel-artukel menarik lainnya dengan berlangganan di kolom Subcribers di sidebar blog ini.
u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

7 comments to “Membuat Cursor Diikuti Text”

suwung mengatakan...
on 

nggak bikin berat koneksi bos?

suwung mengatakan...
on 

pinter belajar dari mana bos... ajarin diriku yang gaptek dan newbies ini dong plise

Rahad 2 Six mengatakan...
on 

@suwung > kayak nya enggak tuh,yg bikin berat kan widget2 nya...kayaknya sih....
sering2 aja mampir kesini....bnyk artikel2 seru kok...

Agung AP mengatakan...
on 

hehehehe....jd kyk ular, keren!!!

Endra mengatakan...
on 

mantabs.. memang hiasan ini keren sih, cuma menurut ane bikin berat halaman..

Rival Aditya mengatakan...
on 

Wah mantab gan tutornya kpan2 aj aq cba...

ohya Aada Award buat kmu kalau berkenan mohon diambil

Bayu Lebond mengatakan...
on 

asik seh...tp kadang gw jd sebel ama tex itu...kayaknya ada yg ngikutin qt kemana qt pergi...

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six