Tutorial Menciptakan Animasi Cursor Diikuti Teks Berputar Di Blog

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog - Sudah usang sekali admin jagoankode belommembahas mengenai tutorial blogging, naahh kaliitu aku berkesempatan buat membuatkan ke temen - temen semuanya khusus pembaca blog pendekar instruksi ini, tutorial nan admin bagikan kaliitu yaitu mengenai animasi kursor nan di ikuti teks berputar di blog. pernahkah kau mengunjungi suatu blog ataupun situs orang lain, perbedaan terhadap kursornya nan tersedia teks berputar mengikuti kemanapun kursor mouse bergerak.

Untuk nan gundah bagaimana tutor membikinnya biar telihat keren juga menarik perhatian pembaca,itu sangat cocok sekali sebagai blog nan ingin kau pasang berupa script nan simple ini. sebuah blog mau terlihat menarik mata pengunjung apabila kau memasang widget ini. tetapi lebih disarankan oleh aku biar kau akil mengatur sedemikian rupa biar terlihat fresh juga belommengganggu pembaca blog kamu.

Ada sebagian laba apabila kau memasang widget nan unik ini, pembaca mau bahagia memainkan kursor kau juga durasi baca di blog kau mau alhasil lama.itu juga nan membikin visitor kau suka mau blog kau dikemudian hari juga mengingatnya. makanya kaliitu aku mau membuatkan widget nan rampung aku redisign ulang biar belommengganggu pengunjung disaat mengujungi blog kau nantinya.

So, buat nan kepingin blognya mempunyai animasi di kursornya di dikala pengunjung mengunjungi blog kamu. silahkan baca tutorial nan aku jelaskan dibawah ini.

Cara Membuat Animasi Cursor Diikuti Teks Berputar Di Blog

Untuk Menambah Pernak pernik blog biar terlihat mengesankan, Sebelumnya aku juga banyak share mengenai tutorial blogger sebagai mempercantik juga memperindah tampilan blog kau dengan widget ataupun apapun, sanggup dibaca melalui link nan aku letak dibawah.

Baca Disini :

• Tutorial Blogger

Banyak hal menarik lainnya nan aku share disana, apabila rampung membacanya. Thanks.

Masuk Kembali ke topik awal tadi mengenai tutor 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 Semustinya mau tampil menyerupai demo dibawah ini,

Demo

Jika kau suka ? Silahkan dipakai :)

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

Demikianlah sebagai tutor membikin animasi cursor di ikuti teks nan berputar di blog, semoga berfungsi sebagai blogger indonesia. tersedia benarnya aku tutup saja tutorial kali ini, semoga berfungsi juga apabila masih tersedia keraguan sanggup kami berdiskusi lewat kolom komentar, sepakat hingga jumpa di artikel berikutnya :)