Cara Membuat Tulisan Mengikuti Kursor Di Blogspot

Oleh Asril Ambo

Friday, May 22, 2015

Bagikan :

Tweet

Salam buat sobat pembaca yang budiman dimana pun sobat berada. Sudah beberapa hari tidak sempat memposting, maka sekarang kita kan coba saji kan tentang pernak pernik atau yang di kategorikan ke Accesories Blog yaitu,Cara Membuat Tulisan Bergerak Mengikuti Kursor Di Blogspot Adapun tulisan yang bergerak mengikuti kursor atau mouse pointer ini akan membuat tampilan blog makin menarik hingga membuat pengunjung merasa betah dan ketagihan untuk datang lagi ke blog kita. Selain itu, tulisan tersebut juga bisa berupa salam untuk menyapa pengunjung, bisa juga berupa nama dari blog kita sendiri atau pun alamat atau url dari blog kita itu.

Untuk lebih jelas nya, bisa di lihat DEMO nya. Gimana sob, tertarik? bagi yang minat yuk simak langkah langkah membuat nya. Seperti biasa, silah kan masuk ke dashboard terus pilih blog sobat, pilih Tata Letak di menu dashboard sebelah kiri, kemudian pilih Tambah Gadget di kotak gadget yang masih kosong, pilih HTML Java script di jendela munculan, dan paste kan kode java script yang di bawah ini, dengan terlebih dahulu sobat copy kode script ini:

<style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: Trebuchet MS;

color: #ff840a;

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(){

// =====Pengaturan Dimulai=====//

// Masukkan kalimat yang diinginkan (QUOTED STRING)

var msg = "Ganti tulisan ini dengan kata yang sobat ingin kan";

// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 25;

// 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 = 5;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.2;

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

// =====Pengaturan Selesai=====//

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>

       

Catatan: Ganti tulisan yang berwarna Ungu dengan kata kata yang sobat ingin kan. Sebab itu lah tulisan yang akan bergerak mengikuti kursor atau pointer di blog sobat nantinya.Dan jika sobat ingin tulisan nya dengan warna yang lain, ganti kode warna di atas yaitu"#ff840a"  dengan kode warna yag lain.
Setelah selesai kemudian klik "Simpan" atau "Save" dan lihat hasil nya.

Demikian lah Cara Membuat Tulisan Bergerak Mengikuti Kursor Di Blogspot selamat mencoba dan terima kasih atas perhatian sobat pembaca disini.

   Wassalam.

SILAHKAN BERBAGI:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Tag : Accesories Blog