Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Teks yang Berputar Mengelilingi Cursor

Setelah dulu kita telah belajar bersama bagaiamana mengganti cursor yang ada di blog kita dengan gambar, sekarang bagaimana kalau kita belajar yang masih terkait dengan cursor? Setuju :D

Ya kita kali ini akan belajar membuat teks yang berputar-putar mengelilingi cursor kita di blog. Tulisan yang yang mengikuti cursor yang kita gerak-gerakan kemana saja atau bahkan cursor itu diam. Dengan membuat teks yang berputar mengelilingi cursor membuat blog kita semakin indah dan cantik :)

Cara Membuat Teks yang Berputar Mengelilingi Cursor
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut 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='Membuat Teks yang Berputar Mengelilingi Cursor'.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>

5. Sebelum disimpan, ganti tulisan Membuat Teks yang Berputar Mengelilingi Cursor dengan teks/tulisan yang kita inginkan.

77 komentar untuk "Membuat Teks yang Berputar Mengelilingi Cursor"

  1. wahh . . .tapi blog pasti tambah berat tuh kang ..^_^ wakawaka'e'e
    Aku udah follow Sobat, jika berkenan silahkan follow saya balik,,
    Mampir juga tah ke blogku

    BalasHapus
  2. rmusnya banyak bener ya... dcoba dlo gan!

    BalasHapus
  3. mampir juga di
    blogku
    gan

    BalasHapus
  4. kok blognya jadi aneh ya? trus tulisannya munculnya sekali. habis itu nggak keliatan. apa salah masukin rumusnya ya?

    BalasHapus
  5. Kereeeeeeeeeeeeeeeeeen ;)

    BalasHapus
  6. Oke banget mas, maksih ya..., atas tulisannya
    http://www.tazkiyapulsa.co.cc/

    BalasHapus
  7. kk....ko ggg jadi...yg gerak malah scroolnya.....:((

    BalasHapus
  8. iya kk yg gerak malah scrool nya

    BalasHapus
  9. @narasy tampilannya bisa dilihat di http://gudang-photo.blogspot.com/

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  12. ga ada efek kaka knapa yahh

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. GAg da yang beres.
    1. Hujan salju: Blognya kepotong setengah
    2. Teks keliling cursor: Bar windows doang yg gerak, cursornya gag.
    Agan ini suka b'canda ya???
    Tp kya'x gag lucu C...http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif

    BalasHapus
  15. iya gan hujan salju blog nya ke potong setengah :(( trus kursor nya kga tepat di anak panah nya begimna ngatur nya mas

    BalasHapus
  16. Teks keliling krusornya ga' ngikuti krusor, malah jalan2 sendiri. Tolong dibantu gan..:-/

    BalasHapus
  17. Wah uda saya coba nich... dan berhasil, makasii ya OM.. tapi ni membuat blogku tambah berat.. hhe :)]

    BalasHapus
  18. klo aku hujan salju semuanya bisa

    Trustext berjalan juga bisa cuman jalan nya kebalik :(

    BalasHapus
  19. mas bro cara ngedit biar text nya lebih dekat denga kursor gimana . . menurut aku terlalu jauh mas bro. . .

    BalasHapus
  20. masbrow contohnya saya sudah pakai liat hasilnya : http://www.cukuhnau.co.cc/2011/03/cara-membuat-tulisan-mengikuti-cursor.html

    yang mau tukar link silahkan masuk kesana...tanks.

    BalasHapus
  21. :(( kok jarak teks yg ikutin kursornya jauh bgt gan... gmana cara settingnya... :D

    BalasHapus
  22. Visit My Blog www.trik-trikkeren.co.cc

    BalasHapus
  23. wah mantap nih....untuk membuktikan hasil dari uraian saudara, silahkan lihat diblog saya bagaimana hasilnya sdah benar apa belum...aku tunggu kawan..

    BalasHapus
  24. halo ... halo ... hujan saljunya kok ndk bisa ya :)]

    BalasHapus
  25. :)]ilmu yang berguna dan positif.....;)

    BalasHapus
  26. mantap kang TQ y share ny jd tmbah apik blog ane gan ex:D

    BalasHapus
  27. bagus.tapi kenapa malah memperlambat dan gak bisa di hilangkan..............?

    BalasHapus
  28. terima kasih , petunjuknya Bos, ditunggu tips - tips yang lain karena sangat membantu untuk pemula seperti saya.

    BalasHapus
  29. Keren euy. Belajar banyak dari blog km. Aq yang newbie jadi tau. Thank you so much :)

    BalasHapus
  30. thanks triknya :) makasih banyak

    mampir ke blogku yah ;) gevozehrsmansa.blogspot.com

    BalasHapus
  31. aq uda pasang. v qo gak ada perubahan y...... :(

    BalasHapus
  32. gan Membuat Teks yang Berputar Mengelilingi Cursor bisa buat wordpress gk http://tipstutorialwordpress.wordpress.com

    BalasHapus
  33. Sekarang uda bisa kok cuma sebentarr aja ters ga ada lagi ya?

    BalasHapus
  34. asik asik..:p
    skarang blog gua tambah asik ;))

    BalasHapus
  35. makasih infonya tp kok tulisannya gk bs tepat ngelilingi cursor nya

    BalasHapus
  36. waw keren baget kak,bagi2 donk triknya

    BalasHapus
  37. aku udah nyoba dan berhasil lo~ liat disini deh, klik aja nih user name ane. (post)

    BalasHapus
  38. Artikenya menarik.
    jangan lupa mampir dulu ke www.markuskututomcat.blogspot.com(baru buat seminggu yg lalu):))

    BalasHapus
  39. thanks akang.. mampir dulu ke http://anditkje.blogspot.com/ :)

    BalasHapus
  40. Thank you a lot bt some tips nya ...so helping me banget...

    BalasHapus
  41. thank's ya atas infox... jgn lupa untuk kunjungi BLOGKU so d like ya...

    BalasHapus
  42. bikin ngelag bro wkwkwkwkwkwkwk

    BalasHapus
  43. Napa munculnya di bagian paling bawah.... Napa kagak ngikutin Mouse...? ~x(

    BalasHapus
  44. kalo gak jalan, ketok aja pake martil, wkwkwkwkw
    btw, aku punya kendala dalam seting komentar di blogku, adanya cuma disembunyikan, tersemat n jendela penuh, ketika di klik, komentarnya muncul di tab baru, gak terbuka secara permanen.
    kunjungi blogku, klik di sini

    BalasHapus
  45. mantap sekali..oya kunjungi balik ya???

    BalasHapus
  46. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  47. terimakasih sangat berguna

    BalasHapus
  48. dah nempel d blog q sob... thanks ilmu.a...???

    BalasHapus
  49. Keren nih gan, bagi ya gan, jangan lupa kunjungi http://arwanasb.blogspot.com

    BalasHapus
  50. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    BalasHapus

Berlangganan via Email