Cara Membuat Cursor di ikuti Teks panjang pada Blog

Sunday, February 22, 2009

Cara Membuat Cursor di ikuti Teks panjang pada Blog

Pada saat blog walking, saya bertemu cursor yang ada teks selalu mengikuti mouse. Nah pada waktu saya tanya dan baik hati benar yang punya blog langsung saya di beri tahu caranya dan kodenya. Terima kasih sekali pada blog irhamna ( klik di sini ). Caranya sangat mudah tinggal coppy dan paste kodenya.

Seperti biasa log in ke blog.
save dulu template karena takut salah. edit html dan kode di bawah ini coppy kemudian pastekan di bawah <-head-> atau lebih bagusnya taruh di atas kode < / head >.
coppy kode dibawah ini dan pastekan dulu di notepad :

<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- Kata IrhamnaWebsite: http://www.artiirhamna.blogspot.com/Visit: http://www.kata-irhamna.blogspot.com/Modifications as first seen in http://www.kata-irhamna.blogspot.com/Tutorial Blog*//>;(function(){// Your message here (QUOTED STRING)var msg = "ganti teks";/* 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 3var 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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>

selamat mencoba...

Anda Sudah Baca Yang Ini? :

tutorial tip dan trik

daftar isi blog

tutorial blog

3 komentar:

Klik Here To Show All Comment

Ryan Perdana, Saturday, May 09, 2009 9:43:00 PM: Pertamina, eh salah..Pertamax...
ini yang saya lagi cari tapi blm dicoba sih, tak coba dulu yah....
No Name, Saturday, May 09, 2009 10:39:00 PM: mas harus nya di parse dulu html nya..
kwangkxz, Saturday, August 01, 2009 4:25:00 PM: Menarik sekali infonya

Post a Comment

Subscribe to: Post Comments (Atom)

top