Cara membuat Tulisan mengikuti Kursor di Blogspot

Hai para pembaca setia kali ini Admin akan membahas cara membuat Tulisan Berjalan mengikuti Kursor bahkan tulisan bisa memutar sesuai arah gerak Kursor dengan menggunakan Script berjalan yang namanya adalah (Script Circeling Text Trial) Sebener nya Admin gak bisa nih buat Script tulisan yang bisa mengikuti Kursor alias Script nya Admin cari di google nih hehehe... Maklum admin masih newbie langsung aja yuk kita lihat Script nya dan Bagai mana langkah-langkah Pemasangan Script nya di Blogger.



Berikut adalah langkah-langkah nya :

> Pertama-tama Buka Blogger anda
> lalu Buka menu Tata letak
> Setelah itu pilih tempat yang berisikan "Tambahkan Gatget" letak nya bebas boleh dimana aja
> Lalu pilih Gatget + HTML / JavaScript
> Lalu pastekan kode dibawah ini di kolom isian Gatget "di bagian Gatget + HTML / JavaScript kan ada kolom judul nah kolom itu bisa di kosongin , jadi yang terpenting adalah Script yang tadi.


Berikut adalah Script Teks yang mengikuti Kursor
Sebelum kaian Copy Scrip di bawah di Bagian yang Admin tulisan nya di kasik Bold itu bisa di rubah sesuai keinginan kalian.





 <style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #4679BD;   Ganti warna sesuai keinginan
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[
/* Circling text trail- Tim Tilton - Website: http://www.tempermedia.com/ - Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts.
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
var msg = "Welcome to My Blog ";   Ganti tulisan sesuai keinginan
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
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>

Nah itu adalah Script Tulisan mengikuti Kursor Semoga Artikel ini bermanfaat bagi anda semua :) 

Sumber by : Blogbacatulis
Previous
Next Post »

11 komentar

Click here for komentar
7 Maret 2017 pukul 12.20 ×

ada demonya gan ?

Balas
avatar
admin
7 Maret 2017 pukul 12.28 ×

Bikin lemot gak sih itu gan....? Tkut jd gak resposive hehehe

Balas
avatar
admin
7 Maret 2017 pukul 12.59 ×

akhirnya ketemu juga hehe, thanks gan

Balas
avatar
admin
7 Maret 2017 pukul 20.13 ×

wah keren juga nih, izin nyobad dehhh....
makasih

Balas
avatar
admin
7 Maret 2017 pukul 20.39 ×

Jangan demo gan saya cinta damai :v

Balas
avatar
admin
7 Maret 2017 pukul 22.01 ×

Bisa dicoba nih gan,bwat memperindah tampilan blog,makasih

Balas
avatar
admin
9 Maret 2017 pukul 22.24 ×

Mantap nih..tapi bikin lemot blog gak ya?

Balas
avatar
admin
15 Maret 2017 pukul 06.54 ×

ijin coba gan hehehe...

Balas
avatar
admin
Thanks for your comment