Followers

Selasa, Maret 22, 2011

Membuat Tulisan berputar disekeliling Cursor

HALOOOO !! Hmm.. Sebenernya gue kali ini mau berbagi ilmu nih sama ceman-ceman sekalian. Penasaran kan ilmu apaan ?
Yah gue kali ini mau berbagi ilmu copet ilmu mempercantik blog ceman-ceman sekalian. Kali ini gue mau kasih tau bagaimana caranya membuat tulisan yang berputar disekeliling kursor kita. Contohnya lihat aja punya gue deeh..

Penasaran kan ? Langsung aja deh gak usah basa basi lagi ! #Cekidoot



Langkahnya :

  • Pertama, Kamu log out blog kamu. 
  • Kemudian, Close semua program yang ada
  • Shut Down Komputeerr...
*Loh Fik ?

Iyadeh iya, langsung aja nih.
  • Pertama tentunya kamu harus log in ke blog kamu *ya tentu lah-_-
  • Kemudian Langsung aja ke Rancangan dan pilih Elemen Laman nya.
  • Seperti biasa, pilih Tambah gadget taruh dimana aja deeh
  • Kemudian pilih HTML/Java Script
Copy Paste code yang berwarna biru di bawah ini guys !


<em><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='Cuap-Cuap Fikaaa'.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></em>

KET : 
Warna Merah diganti dengan kata apapun yang kalian mau
Warna Hijau Ganti dengan kode warna yang kamu sukai, terserah deh di mbah google banyak kode nya.

Sip Terakhir, tinggal di save aja deh ! Ingat ! tanpa judul yah ! 

MySpaceNah Gimana ? Mau ? Mau ? Buruan di coba deeh, daripada penasaran? Nanti kebawa mimpi lagi ?  


6 komentar:

  1. kalo cara biar ada readmore itu gimana? request tutorialnya doong :)

    BalasHapus
  2. nah kalo yang itu udah pernah aku post di edisi sebelumnya kak. kalo yang ini sedikit ribet hehe

    bukla ini deh http://www.fikarest.co.cc/2010/05/membuat-read-more-otomatis-dengan.html

    BalasHapus
  3. wah kereeeeennn, ntar gue coba! :D

    BalasHapus
  4. sipp kak ! langsung deh dipraktekin ! hehe :sundul:

    BalasHapus
  5. ku pengen lebih dekat dg kamu
    ne no hp ku +62856644252544

    BalasHapus
  6. Maaf cuma mau kasih saran nie" kayaknya bagian kursor animasi sangat menggagu" tiap mau ngeklick, semoga bermanfaat

    BalasHapus

Komentar yuk ! Gratis kok !

LinkWithin

Related Posts Plugin for WordPress, Blogger...