[Tutorial] Cara Menambahkan Efek Tulisan Mengkuti Cursor Pada Blog

Jika Anda pernah melihat blog dengan cursor yang memiliki tulisan yang mengikutinya, mungkin Anda akan terkesan dan ingin juga membuatnya. Nah untuk itu kali ini Saya akan membagikan sebuah postingan tentang bagaimana "Cara Menambahkan Efek Tulisan Mengkuti Cursor Pada Blog" untuk itu langsung saja kita ikuti tutorial di bawah ini.
Baca juga: Cara Menghilangkan Icon Obeng Dan Tang Pada Blog

Cara Menambahkan Tulisan Mengkuti Cursor Pada Blog:

1. Login akun blogger Anda kemudian masuk ke Dashboard blog Anda.

2. Pilih menu Tata Letak => klik Tambahkan Gadget => kemudian pilih "HTML/Javascript".

3. Kemudian copy code di bawah ini:

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 dengan tulisan yang diinginkan";

// 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: pada "var msg = "Ganti dengan tulisan yang diinginkan"; " ganti sesuai keinginan anda contoh "var msg = "malming.web.id"; "(Tanpa tanda kutip).

4. Kemudian klik Simpan.

Untuk demonya bisa Anda lihat disini.

Demo

Bagaimana mudah bukan? nah sekarang Anda lihat blog Anda dan coba gerakan cursornya apakah ada tulisan yang mengikutinya? pasti ada iyakan? baiklah sekian dulu postingan yang dapat Saya bagikan, nantikan postingan menarik lainnya hanya di Malming.web.id. Wassalam......

2 komentar

Balas

21312321

30 April 2016 at 23:27

Gak terlalu suka sih sama efek begituan tapi thanks for info

Unknown

1 May 2016 at 00:03

tapi kayaknya bagus, boleh dicoba juga.

Peraturan berkomentar di blog Malming

1. Gunakan bahasa yang sopan.
2. Dilarang menyisipkan url blog/website lain.
3. Tidak mengandung unsur pornografi.
4. Berkomentar serelevan mungkin.
EmoticonEmoticon

Cara Menambahkan Tulisan Mengkuti Cursor Pada Blog:

Share this

2 komentar