Cara membuat tulisan bergerak mengikuti Kursor pada blog

Halo sobat, kali ini saya akan memberitahu anda "Cara membuat tulisan bergerak mengikuti Kursor pada blog" 

Halo teman-teman, bagaimana kabar kalian? Semoga baik ya o:), kalau saya Alhamdulillah baik. Baiklah, bagi sobat yang ingin memberi animasi ini pada blog sobat, langsung saja baca langkah-langkahnya :).

Menurut saya, memberi animasi text ini hanyalah sebagai kreasi untuk memperindah/mempercantik blog anda agar pengunjung tertarik pada blog anda. Tapi, menurut saya juga kalau text sobat terlalu panjang, juga dapat mengganggu pengunjung sobat membaca. Baiklah bagi yang tertarik pada animasi text ini berikut langkah langkahnya :

1. Seperti biasa sobat harus login blog anda terlebih dahulu.
2. Pilih menu Tata letak --> Add gadget --> HTML/Javascript
3. Copy Script di bawah ini lalu paste script ini pada HTML/Javascript bagian konten :

<style type='text/css'>

    #outerCircleText {

    font-style: italic;

    font-weight: bold;

    font-family: &#39;comic sans ms&#39;, verdana, arial;

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

    // Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)

    var msg = "TEXT YANG INGIN DI TAMPILKAN";

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

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

    // BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //

    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>

NOTE : Rubah tulisan yang berwarna MERAH menjadi Text yang sobat inginkan, tapi ingat! Tulisannya Jangan mengganggu pengunjung sobat!

-----
Terima kasih atas kunjungan anda^_^ jangan lupa untuk kembali lagi :), maaf jika ada kata yang kurang tepat|Thank you for your visit ^ _ ^ don't forget to come back again :), sorry if there are words that are less precise.
-----
Kalau kamu ingin komen, pakai bahasa baku yaa:).|If you want to comment,use standard language okay:)
-----
Penjelasan? Go Follow
Twitter/ask.fm : @argaanand
Line : @YUL3508O / http://line.me/ti/p/%40yul3508o
-----
More?

Instagram : argaanand
Soundcloud : arga_anand
Path : Dylan Arga
-----
Selamat jalan~ semoga hari hari anda menyenangkan!