PROMO IKLAN 125X125 HANYA 75.000/BULAN MURAH !! 6 BULAN HANYA 60.000/BULAN, CP: berryhardisakha@ymail.com

Cara mudah membuat cursor di ikuti teks seperti ular

10comments

membuat cursor di ikuti teks seperti ular , taman2 pernah melihat cursor yg diikuti teks seperti ular ?
nah caranya seperti ini
log in, pilih rancangan, lalu edit html. .,back up dulu templatenya buat jaga2..centang expand template widget, masukkan kode berikut tepat di bawah tag <head> atau diatas </head>

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- berry blog
Website: http://berryhardisakha.blogspot.com/
Visit: http://berryhardisakha.blogspot.com/
Modifications as first seen in http://www.kata-irhamna.blogspot.com/Tutorial Blog
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Kata Irhamna";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script></head>

demikian tutorial membuat cursor di ikuti teks seperti ular semoga bermanfaat ya sobat semua.
Silahkan dicopas, namun jangan lupa untuk meletakkan link ini Cara mudah membuat cursor di ikuti teks seperti ular sebagai sumbernya.

Baca Juga Artikel Lain :

Share this article :

+ comments + 10 comments

November 27, 2011

dibawah tag tu maksudnya yang mana ber? gak budeng aku ehhh

www.beritaduniaku.com

November 27, 2011

letak saja diatas kotak </head> atau bisa juga dibawah <head>

Februari 15, 2012

tank's gan,,,

Agustus 07, 2012

gak bisa brow,,udh tak cba,, tyus ada peringatan eror,,,

September 06, 2012

Kata irhamna itu bisa diganti Ԍªƙ?????
Saya berhasil,,tapi kok "kata irhamna"

September 10, 2012

tentu saja bisa :)

September 13, 2012

tengkyu brader boeat tip xa...

November 10, 2012

yang di copas itu yang mana ??? semua kah

November 10, 2012

yang di copas yang mana ???
semua kah gan ???

November 11, 2012

sampai akhir script sebelum penutup head gan..

Poskan Komentar

Terimakasih sudah berkomentar dengan baik, sopan dan tidak mengandung spam di Berry Blog, silahkan berkomentar sesuai artikel dan apabila ada artikel yang tidak bekerja silahkan berikan komentar di menu berikan masukkan.
Maaf, memasukkan link ke dalam komentar akan DIHAPUS.

Ttd : Berry Hardisakha

 
Copyright © 2011. Berry Blog
Edited by Berry Hardisakha