Cara Membuat Teks Berputar Mengelilingi Cursor :

Cara Menghias Tampilan Cursor Blog

Ada banyak cara yang bisa sobat blogger lakukan untuk menghias tampilan Cursor dari blog sobat blogger. Misalkan dengan mengganti Cursor yang gambar panah dengan tampilan yang lain, atau memberikan efek warna yang berbeda terhadap Cursor. Pada kesempatan ini, saya akan berbagi tips kepada sobat blogger mengenai bagaimana cara membuat teks berputar mengelilingi Cursor yang gambar panah tersebut tersebut. Kalau kita menambahkan efek teks berputar mengelilingi Cursor pada blog, maka kemana pun Cursor tersebut di geser oleh pengunjung blog kita, maka teks tersebut selalu akan mengikuti.Seakan-akan teks tersebut menjadi ekor dari Cursor tersebut.

Buat rekan-rekan blogger yang jarang browsing, mungkin penasaran dengan fitur blog yang seperti ini. Jadi untuk menghilangkan rasa penasaran, sebaiknya sobat blogger mencoba memasang fitur ini di blog sobat? Apakah untuk memasang fitur ini kita harus Edit Template kita? Tidak, kita tidak perlu melakukan Edit Template. Kita hanya menambahkan sedikit kode Java Script di kolom HTML/JavaScript.

Cara Membuat Teks Berputar Mengelilingi Cursor :

• Login di blogger.com
• Pada Menu Drop Down, Klik Layout
• Lihat sebelah kanan, lalu klik Add a Gadget
• Pilih HTML/JavaScript.
• Letakkan Kode berikut di dalam kolom yang tersedia :

view plainprint?

1. <script>  
2. //mouse  
3. //Circling text trail- Tim Tilton  
4. //Website: http://www.tempermedia.com/  
5. //Visit http://www.dynamicdrive.com for this script and more  
6. function cursor_text_circle(){  
7. // your message here  
8. var msg='Welcome to ramsyah Blogger'.split('').reverse().join('');  
9. var font='Verdana,Arial';  
10. var size=3; // up to seven  
11. var color=' #FFFF00';  
12. // This is not the rotation speed, its the reaction speed, keep low!  
13. // Set this to 1 for just plain rotation w/out drag  
14. var speed=.3;  
15. // This is the rotation speed, set it negative if you want  
16. // it to spin clockwise  
17. var rotation=-.2;  
18. // Alter no variables past here!, unless you are good  
19. //---------------------------------------------------  
20.   
21. var ns=(document.layers);  
22. var ie=(document.all);  
23. var dom=document.getElementById;  
24. msgmsg=msg.split('');  
25. var n=msg.length;  
26. var a=size*13;  
27. var currStep=0;  
28. var ymouse=0;  
29. var xmouse=0;  
30. var props="<font face="+font+" size="+size+" color="+color+">";  
31. if (ie)  
32. window.pageYOffset=0  
33. // writes the message  
34. if (ns){  
35. for (i=0; i < n; i++)  
36. document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');  
37. }  
38. else if (ie||dom){  
39. document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;">  
40. <div style="position:relative">  
41. ');  
42. for (i=0; i < n; i++)  
43. 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>  
44. ');  
45. document.write('</div>  
46. </div>  
47. ');  
48. }  
49. (ns)?window.captureEvents(Event.MOUSEMOVE):0;  
50. function Mouse(evnt){  
51. ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position  
52. xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position  
53. }  
54. if (ns||ie||dom)  
55. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;  
56. var y=new Array();  
57. var x=new Array();  
58. var Y=new Array();  
59. var X=new Array();  
60. for (i=0; i < n; i++){  
61. y[i]=0;  
62. x[i]=0;  
63. Y[i]=0;  
64. X[i]=0;  
65. }  
66. var iecompattest=function(){  
67. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;  
68. }  
69. var makecircle=function(){ // rotation properties  
70. if (ie) outer.style.top=iecompattest().scrollTop+'px';  
71. currStep-=rotation;  
72. for (i=0; i < n; i++){ // makes the circle  
73. var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;  
74. d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');  
75. 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  
76. }  
77. }  
78. var drag=function(){ // makes the resistance  
79. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);  
80. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);  
81. for (var i=1; i < n; i++){  
82. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);  
83. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);  
84. }  
85. makecircle();  
86. // not rotation speed, leave at zero  
87. setTimeout(function(){drag();},10);  
88. }  
89. if (ns||ie||dom)  
90. if ( typeof window.addEventListener != "undefined" )  
91. window.addEventListener( "load", drag, false );  
92. else if ( typeof window.attachEvent != "undefined" )  
93. window.attachEvent( "onload", drag );  
94. else {  
95. if ( window.onload != null ) {  
96. var oldOnload = window.onload;  
97. window.onload = function ( e ) {  
98. oldOnload( e );  
99. drag();  
100. };  
101. }  
102. else  
103. window.onload = drag;  
104. }  
105. }  
106. cursor_text_circle();  
107. </script>  

• Klik Save.

Perhatikan kode di atas, tulisan #ff0000 bisa di rubah sesuai dengan keinginan sobat bogger. Itu merupakan warna dari teks yang berputar. Untuk mengetahui kode warna, kunjungi link berikut : HTML Color Code Teks atau tulisan "Welcome to ramsyah Blogger" bisa di rubah dengan kalimat yang sesuai dengan blog sobat.

Baca selengkapnya »