Selasa, 30 November 2010

Cara Mengubah Kursor Lebih Menarik

Hallo para blogger semuanya..

Sudah lama saya tidak berkutik dan memberikan tips-tips untuk membuat blog tampil menarik...emm setelah kurang lebih setahun blog saya tidak ada berubahan cukup berarti hanya saya memperbaruhi data dalam java script saja...hal cukup biasa sebenarnya dalam memperbaruhi data dalam java script karena beberapa hal yang terjadi bisa saja java script yang kita buat rusak atau para tangan jail yang mengacak dan menggambil data..hmm cukup asik sebenarnya karena kita di beri tahu kelemahan blog kita dalam codinganya dan memacu kita untuk lebih membuat yang lebih baik lagi..

Untuk itu saya merubah tampilan blog saya lebih sederhana, artistik dan elegan...dengan menonjolkan gaya yang simple namun cukup membuat anda betah dalam membaca dan melihat-lihat blog saya....contohnya dalam kursur yang kali ini akan saya bahas cara membuatnya.. baiklah cukup saya berkata-kata..saya akan menjelaskan cara membuat kursor dengan efek text yang bergerak di sekitar kursor.

Sebenarnya sudah banyak cara membuat kursor menjadi terlihat menarik.. anda dapat search di google mengenai cara membuat tampilan ini..namun saya akan mencoba untuk menjelaskan kepada anda. langkah yang pertama anda lakukan adalah;
*log in pada account blog anda
*buka rancangan (bila blog anda berbahasa indonesia)
*pilih elemen laman
*add gadget
*pilihlah html/java script setelah anda melakukan hal itu maka anda dapat menyalin kode di bawah ini;

Spoiler Untuk SEE Script:
<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='I THOUGHT IT'.split('').reverse().join('');

var font='Times New Roman';
var size=3; // up to seven
var color='#2B60DE';

// 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=.1;

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

// 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+" color="+color+" size="+size+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+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();

create by rivan_ipai @ 2010
</script>

*simpan setelah itu.
*jangan diberi judul dan terserah anda menaruhnya di sebelah mana.


Untuk membuat kursor dalam bentuk lain anda cukup melakukan langkah di bawah ini;

*buka rancangan HTML anda
*edit HHTML
*cek list Expand Template Widget
*cari dengan cara CRTL+F body { masukan code ini;
Spoiler Untuk SEE Script:
cursor: url("http://baykun.byethost15.com/cursorbiru.ico"),default;

*Simpan dan lihat perubahannya... untuk cari bentuk kursor yang lain anda dapat melihatnya di sini dan tinggal menggantikan urlnya sesuai dengan url kursor yang anda pilih..

  • www.123cursors.com

  • www.cursors-4u.com


  • cursors.funutilities.com



  • selamat mencoba... ^_^

    0 komentar:

    Poskan Komentar