Cara Membuat Tulisan Mengikuti Kursor pada Blog

Cara Membuat Tulisan Mengikuti Kursor pada Blog- Salah satu cara lain untuk memperindah dan membuat tampilan blog menjadi menarik yaitu dengan membuat text atau tulisan bergerak mengikuti kursor di blog. Mungkin sobat blogger pernah berkunjung pada sebuah blog dan melihat tulisan bergerak mengarah ke mana saja kursor sobat gerakkan lalu jika kursor didiamkan maka tulisan tersebut akan terus berputar mengelilingi cursor. Sebenarnya sobat juga bisa membuatnya secara mudah dengan hanya menambahkan script html tertentu pada blog.

  
Kali ini saya akan share gimana Cara Membuat Tulisan Mengikuti Kursor pada Blog , silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin membuat text bergerak / berjalan / berputar mengelilingi cursor pada blog.


Cara Membuat Tulisan Mengikuti Kursor pada Blog
1. Login ke blogger anda
2. Pilih Menu Tata Letak => Tambah Gadget
3. Kemudian klik tombol tambah pada pilihan HTML/Javascript

4. Setelah itu copy dan masukkan kode script berikut : 

<style type='text/css'>
/* Circle Text Styles */

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #4679BD;/*Ganti warna sesuai keinginan*/

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[

/* Circling text trail- Tim Tilton - Website: 
http://www.tempermedia.com/ - Visit: http://www.dynamicdrive.com/ for 
Original Source and tons of scripts.

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/

;(function(){

var msg = "Welcome To My Blog"; // Ganti tulisan sesuai keinginan

var size = 24;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

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>


Keterangan :  

- #4679BD , anda bisa mengganti dengan warna kesukaan anda
- Welcome To My Blog anda juga bisa mengubahnya dengan tulisan yang anda inginkan.

Nah itulah bagaimana membuat tulisan mengikuti kursor di blog dengan mudah dan cepat.

salam,