Berita Terbaru :

Google Translate

BlogUpp!

Custom Search
Browse: Home / Cara Membuat Mouse Diikuti Teks Memutar Diblog | 2012

Cara Membuat Mouse Diikuti Teks Memutar Diblog | 2012

Sobat Infoteknomedia semua kali ini saya akan share Cara Membuat Mouse Diikuti Teks Memutar Diblog, jika sobat ingin memasangnya di blog sobat, maka yang sobat lakukan adalah hanya ikuti saja he..he..,Saya kira tidak perlu basa basi lagi ayo sob ikuti langkah - langkahnya berikut ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<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: #FF0000;
/* End Optional http://Infoteknomedia.blogspot.com*/

/* 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">


;(function(){

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

/* 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 = 14;

// 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>

5. Ubah kode yg berwarna merah sesuai keinginan sobat

6. Simpan Dan Lihat Hasilnya Sob.....

Semoga Artikel Ini bermanfaat Untuk Sobat Semua..^_^.., Thank's..

Artikel Terkait di Bawah posting

1 comments:

ridho sinaga mengatakan...

Oea kk saya anak baru di blog,,
dan saya ngga" Ngerti ,,
dan saya ga' tw dmn letak
head,body atau apalah itu,,

dan saya mw kk ,,
mmberi sdikit ilmu Nya pada saya..???

Terima Kasih ridho sinaga Atas Kunjungan Dan Komentarnya..
by Infoteknomedia-admin


:25 :26 :27 :28 :29 :30 :31 :32
:33 :34 :35 :36 :37 :38 :39 :40
:41 :42 :43 :44 :45 :46 :47

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda yang tidak di terbalas. Mohon gunakan kata-kata yang sopan dalam memberikan komentar. Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan. dan Terima Kasih Atas Kunjungan serta Komentar Anda.
Poskan Komentar Anda Di Bawah ini :

 

Followers

Komentar Baru

widget by infoteknomedia
Buy me a cup of coffee

About Me

Copyright 2012 Teknologi Dan Media Informasi | by admin | Supported by infoteknomedia