Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog

Judul : Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog
Link : Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog


Pada postingan ini saya ingin membahas Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog, saya berusaha membuat artikel ini dengan sebaik mungkin, apabila masih kurang baik mohon dimaklumi...hehehe. Mudah-mudahan dengan membaca artikel ini dapat memberikan tambahan informasi bagi sobat

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog - Sudah lama sekali admin jagoankode tidak membahas mengenai tutorial blogging, nah kali ini saya berkesempatan buat berbagi ke temen - temen semuanya khusus pembaca blog jagoan kode ini, tutorial yang admin bagikan kali ini ialah mengenai animasi kursor yang di ikuti teks berputar di blog. pernahkah kamu mengunjungi suatu blog atau situs orang lain, perbedaan terhadap kursornya yang ada teks berputar mengikuti kemanapun kursor mouse bergerak.

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

Ada beberapa keuntungan jika kamu memasang widget yang unik ini, pembaca akan senang memainkan kursor kamu dan durasi baca di blog kamu akan menjadi lama. ini juga yang membuat visitor kamu suka akan blog kamu dikemudian hari dan mengingatnya. maka kali ini saya akan berbagi widget yang sudah saya redisign ulang agar tidak mengganggu pengunjung disaat mengujungi blog kamu nantinya.

So, buat yang kepingin blognya mempunyai animasi pada kursornya pada saat pengunjung mengunjungi blog kamu. silahkan baca tutorial yang saya jelaskan dibawah ini.

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog

Untuk Menambah Pernak pernik blog agar terlihat mengesankan, Sebelumnya saya juga banyak share mengenai tutorial blogger untuk mempercantik dan memperindah tampilan blog kamu dengan widget atau apapun, bisa dibaca melalui link yang saya letak dibawah.

Baca Disini :

• Tutorial Blogger

Banyak hal menarik lainnya yang saya share disana, jika 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 seperti demo dibawah ini,

Demo

Jika kamu suka ? Silahkan digunakan :)

Dari Script Atau Kode Diatas dapat kamu modifikasi semau kamu, agar tampilannya lebih fresh lagi silahkan kalian edit pada bagian cssnya diatas,

Demikianlah untuk cara membuat animasi cursor di ikuti teks yang berputar di blog, semoga bermanfaat bagi blogger indonesia. ada baiknya saya tutup saja tutorial kali ini, semoga bermanfaat dan apabila masih ada keraguan bisa kita berdiskusi lewat kolom komentar, oke sampai jumpa di artikel berikutnya :)

Demikianlah informasi yang dapat saya sampaikan mengenai Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog. Semoga dapat bermanfaat bagi teman teman semua saya pamit. Silahkan baca artikel menarik lainnya . Sekian dan terima kasih.

Anda sekarang membaca artikel Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog dengan alamat link https://initipsngeblog.blogspot.com/2018/09/cara-membuat-animasi-cursor-diikuti.html

Share this post