Cara Membuat Tulisan Mengikuti Cursor

Assalamu'alaikum, halo kawan bagaimana kabarnya, kawan ada satu lagi ni trik, yang mungkin membuat blog kamu tambah keren abissss deh, apa si ?, kali ini saya akan membagikan sebuah trik Cara Membuat Tulisan Mengikuti Cursor, jadi setiap pengunjung blog kamu menggerakkan mouse akan muncul tulisan yang mengukuti mouse, jadi kemanapun itu mouse bergerak pasti si text selalu gintilin, sudah jatuh cinta kali, hehehe, yap bagaimana kalau kita coba aja trik ini bersama.


1.Pada dashbor blog kamu, klik backup/simpan, kemudian download template kamu, supaya aman bila ada kesalahan, jadi nanti mudah kembalikan kesemula lagi.

2.Masih pada halaman yang sama kamu klik template >> Edit HTML >> Proceed.

3.Sekarang kamu cari kode </head>, untuk mudahnya gunakan Ctrl+F, ketik kode </head> pada kolom yang muncul.

4.Bila sudah kamu copy paste kode dibawah ini diatas kode </head>

<style type='text/css'> #outerCircleText { font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #000000; /* 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 = "Ketik disini tulisan yang akan muncul"; /* 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>

5.Kamu klik preview, bila berhasil, simpan template kamu.

Catatan :

Kamu bisa ganti kode dibawah ini yang sudah saya beri warna merah, sesuai selera kamu.

Jenis tulisan : font-family: 'comic sans ms', verdana, arial;
Warna huruf : #000000
Tulisan yang akan muncul var msg = "Ketik disini tulisan yang akan muncul";
Ukuran huruf : var size =15;

Yap, sampai disini dulu semoga tutorian Cara Membuat Tulisan Mengikuti Cursor ini, bermanfaat untukmu, Amiin, jangan lupa komentarnya.

Link : ► Cara Menghilangkan Navbar di Blog