Posts Subscribe comment Comments

cara membuat text berputar mengikuti mouse

Share

Biar tampilan blog kita rame, biasanya para blogger menambahkan berbagai variasi atau widget . Bentuknya pun bermacam macam. Nah kali ini kita akan coba membuat variasi atau hiasan di blog kita dengan menambahkan script supaya text bisa bergerak berputar putar kemanapun mouse kita arahkan.
Bagaimana cara membuat tulisan yang mengikuti cursor seperti ular-ularan.
Ada beberapa cara untuk membuat tulisan yang mengikuti cursor, Mau tahu caranya ?,
silahkan ikuti langkah langkahnya.

  1. ambil segelas kopi
  2. matikan komputer anda
  3. ambil hp anda
  4. sms aja atawa telponan aja
    gaaaa, canda doang kaleeeeee, udah ah....serius yah

  1. Login ke Blogger, pilih Rancangan ( Yang dulunya Tata Letak ) kemudian pilih Edit HTML Klik tulisan Download Template Lengkap.
  2. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula. Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
  3. Kemudian cari kode </head>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
Kalau sudah ketemu, Copy Paste kode berikut dan letakkan diatasnya.



<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff; /* warna huruf */
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;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = " belajar dan beramal "; /* tulisan yang muncul */
/* 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 =15; /* ukuran huruf */
// 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>

Tulisan yang berwarna biru bisa sobat ganti sesuai selera Simpan dan lihat hasilnya.
Selamat mencoba.

Simpan.

Oooh , hampir lupa. Coba Anda cari kata "belajar dan beramal" didalam kode,  anda ganti dengan kata yang anda inginkan. nantinya kata tersebut yang akan tampil mengikuti Mouse.

Sekarang coba lihat hasilnya.
 kalo mau copas untuk diterbitkan di postingan anda silakan aja asal... jangan lupa terbitkan sumber : http://www.imtikhan.co.cc/2010/06/cara-membuat-tulisan-mengikuti-cursor.html


**** Semoga Bermanfaat ****

14

terimas kasih boz atas infpnya !

makasih gan,aku udah ambil tutorialnya tulisanya.dan udah aku coba bisa'e

Unknown nyarios ... :

Makasih ka ! maaaaaaaaaaaaaannnnnnnnnnnnnnnntttttttttttttaaaaaaaaaaaappppppppppppp!!!!!!!!!!!!!!!11

REMAJA MUSLIM nyarios ... :

trimakasih karena anda sudah membantu untuk mempercantik blog yang akau buat

REMAJA MUSLIM nyarios ... :

makasih ya.. karena anda sudah membantu untuk mempercantik blog yang qu buat

admin (bang zul) nyarios ... :

@all: sebelumnya saya ucapkan terima kasih dah berkunjung,...
Semoga kita bisa saling mengisi kekurangan kita masing2 dengan cara saling berbagi.
Salam sukses blogger, kita dukung blogger sehat tanpa pornografi.

let's study nyarios ... :

tnks bro cukup membantu bgt...

khaerul hikmah nyarios ... :

thank's for all, my friends.... good luck

Anonim nyarios ... :

mantab postingannya

oke nyarios ... :

Lumayan bagus tutorialnya.
Ditunggu kunjungan balik
di www.newsoftpedia.com

jual mouse murah nyarios ... :

nice info gan

JIka ada kesempatan bisa main ke www.RoyceTalkFusion.Com dan semoga melalui web ini bisa menjadi peluang bisnis teman kedepan.

Unknown nyarios ... :

keren makasih sekarang blog ku makin cantik..........

Unknown nyarios ... :

meracikobatpenghilangkutilkelamin

Silahkan Tulis Komentar Anda ...

I know there is something in your head
Any type of comment will be accepted and published. Except spam!
thanx's very much

Design by Azis Lamayuda | Do The Best To Get The Best