Cara Menciptakan Animasi Cursor Diikuti Teks Berputar Di Blog

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog - Sudah usang sekali admin jagoankode tidak membahas mengenai tutorial blogging, nah kali ini aku berkesempatan buat mengembangkan ke temen - temen semuanya khusus pembaca blog pahlawan instruksi ini, tutorial yang admin bagikan kali ini adalah mengenai animasi kursor yang di ikuti teks berputar di blog. pernahkah kau mengunjungi suatu blog atau situs orang lain, perbedaan terhadap kursornya yang ada teks berputar mengikuti kemanapun kursor mouse bergerak.

Untuk yang galau bagaimana cara membuatnya semoga telihat keren dan menarik perhatian pembaca, ini sangat cocok sekali untuk blog yang ingin kau pasang berupa script yang simple ini. sebuah blog akan terlihat menarik mata pengunjung apabila kau memasang widget ini. tetapi lebih disarankan oleh aku semoga kau terpelajar mengatur sedemikian rupa semoga terlihat fresh dan tidak mengganggu pembaca blog kamu.

Ada beberapa laba kalau kau memasang widget yang unik ini, pembaca akan bahagia memainkan kursor kau dan durasi baca di blog kau akan menjadi lama. ini juga yang menciptakan visitor kau suka akan blog kau dikemudian hari dan mengingatnya. maka kali ini aku akan mengembangkan widget yang sudah aku redisign ulang semoga tidak mengganggu pengunjung disaat mengujungi blog kau nantinya.

So, buat yang kepingin blognya memiliki animasi pada kursornya pada ketika pengunjung mengunjungi blog kamu. silahkan baca tutorial yang aku jelaskan dibawah ini.

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog

Untuk Menambah Pernak pernik blog semoga terlihat mengesankan, Sebelumnya aku juga banyak share mengenai tutorial blogger untuk mempercantik dan memperindah tampilan blog kau dengan widget atau apapun, sanggup dibaca melalui link yang aku letak dibawah.

Baca Disini :

• Tutorial Blogger

Banyak hal menarik lainnya yang aku share disana, kalau sudah membacanya. Thanks.

Masuk Kembali ke topik awal tadi mengenai cara pembuatannya, yuk simak..

1. Login Ke Akun Blogger Kamu >> Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.

2. Masukkan Script / Kode Dibawah Ini..

<style type='text/css'>
#outerCircleText {
font-style: normal;
font-weight: bold;
font-family: 'Cambria', verdana, arial;
color: #03214c;
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(){
var msg = "Jagoan Kode Indonesia";
var size =20;
var circleY = 1.75; var circleX = 3;
var letter_spacing = 5;
var diameter = 15;
var rotation = 0.3;
var speed = 0.5;
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 : Ganti Tulisan Warna Merah, Menjadi Teks Yang Kamu Inginkan

3. Simpan Dan Lihat Hasilnya.

Jika Sudah Mengikuti Tutorial Diatas, Maka Seharusnya akan tampil ibarat demo dibawah ini,

Demo

Jika kau suka ? Silahkan dipakai :)

Dari Script Atau Kode Diatas sanggup kau modifikasi semau kamu, semoga tampilannya lebih fresh lagi silahkan kalian edit pada bab cssnya diatas,

Demikianlah untuk cara menciptakan animasi cursor di ikuti teks yang berputar di blog, semoga bermanfaat bagi blogger indonesia. ada baiknya aku tutup saja tutorial kali ini, semoga bermanfaat dan apabila masih ada keraguan sanggup kita berdiskusi lewat kolom komentar, baiklah hingga jumpa di artikel berikutnya :)

Share this post