KeyzeX – Yuk bernostalgia sedikit dengan Membuat Tulisan Bergerak Mengikuti Kursor di Blog sangatlah mudah, hanya diperlukan script yang dipasangkan pada Widget Tata Letak.
Widget ini hanyalah kreasi tersendiri agar mempercantik halaman namun, widget ini juga memiliki kekurangan yang dimana jika tulisan yang diberikan terlalu panjang maka hasilnya akan sangat mengganggu sekali. Dan widget ini juga tidak terlalu dianjurkan, saya disini hanya share kenang-kenangan masa dulu saat memakai widget ini, bernostalgia sedikit hehe.
Yuk simak Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog Dengan Mudah.
Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog
1. Pertama pastikan masuk ke akun Blogger agan.
2. Masuk ke Menu Tata Letak.
3. Pilih dimana saja yang masih kosong dan kemudian Klik Tambah Gadget dan pilih HTML/JavaScript.
4. Copy script dibawah ini ke dalam Isi dari Box HTML/JavaScript.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #141414;
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(){
// Pesan agan disini.
var msg = "TULISAN YANG INGIN AGAN DITAMPILKAN";
var size = 25;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.2;
var speed = 0.3;
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. Simpan dan Lihat hasilnya.
Catatan :
Silahkan ubah warna dan pesan yang ingin ditampilkan sesuai dengan keinginan agan dari tulisan yang berbackground color aqua.
Terima kasih bagi pembaca yang sudah membaca artikel Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog Dengan Mudah. Silahkan gunakan kolom komentar jika ada yang tidak dimengerti.