- Kali ini gwe akan berbagi trik tentang
artikel posting yang berhubungan dengan pernak-pernik blog, Yaitu cara membuat
dan memasang kursor mouse di ikuti teks atau tulisan di blog.
Efek dari trik yang gwe share ini adalah sebuah teks atau tulisan akan mengikuti kursor mouse ketika kursor mouse di gerakkan ke arah manapun dalam blog, Teks atau tulisan yang mengikuti kursor mouse ini mempunyai efek berputar serta mengikuti arah kursor mouse di gerakkan.
Hebatnya lagi, Teks atau tulisan yang mengikuti kursor mouse dalam blog ini bisa di ganti dengan teks atau tulisan seperti yang bro n sist inginkan, Warna dari teks juga bisa di atur sesuai dengan keinginan bro n sist.
Efek dari trik yang gwe share ini adalah sebuah teks atau tulisan akan mengikuti kursor mouse ketika kursor mouse di gerakkan ke arah manapun dalam blog, Teks atau tulisan yang mengikuti kursor mouse ini mempunyai efek berputar serta mengikuti arah kursor mouse di gerakkan.
Hebatnya lagi, Teks atau tulisan yang mengikuti kursor mouse dalam blog ini bisa di ganti dengan teks atau tulisan seperti yang bro n sist inginkan, Warna dari teks juga bisa di atur sesuai dengan keinginan bro n sist.
Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah, Karena bro n sist hanya akan memasukkan kode script pada kotak HTML/JavaScript dalam Tata Letak blog. Dan tentunya bro n sist tidak usah susah-susah untuk Edit HTML dalam Template blog bro n sist yang mungkin akan jadi sangat rumit dan memakan banyak waktu.
Jika bro n sist tertarik ingin membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog bro n sist, Silahkan ikuti langkah-langkahnya sebagai berikut:
1. Langkah yang pertama. Silahkan bro n sist >> Masuk/Login >> ke Blog bro n
sist.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >>
pilih posisi dan klik >>Tambah Gadget >> pilih >> HTML/JavaScript lalu klik
tanda +
3. Kemudian silahkan bro n sist masukkan semua Kode Script berikut kedalam kotak HTML/JavaScript.
<style
type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;
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">
;(function(){
var msg = "www.h45real.co.cc";
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;
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>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;
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">
;(function(){
var msg = "www.h45real.co.cc";
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;
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>
4. Langkah yang terakhir. Setelah bro n sist selesai masukkan semua kode script kedalam kotak HTML/JavaScript, Silahkan bro n sist klik >> Simpan dan lihat hasilnya pada semua halaman blog bro n sist, Kursor mouse akan di ikuti teks kemanapun arah kursor di gerakkan pada halaman blog bro n sist.
Keterangan:
·
#FF0000 adalah Kode warna Teks atau tulisan yang
mengikuti kursor mouse, Silahkan bro n sist ganti dengan kode warna yang lain sesuai dngan
keinginan bro n sist .
- [ biru = #2706FC ]
- [ merah = #FC060A ]
- [ putih = #FEFEFE ]
- [ kuning = #F5FC06 ]
- [ hijau = #006400 ]
- [ hitam = #040404 ]
- [ ungu = #640064 ]
- [ orange = #FC3406 ]
- [ pink = #FC9BB6 ]
(selebihnya cari sendiri yahh)
·
Warna BIRU adalah Teks yang
mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang bro
n sist inginkan.
Selamat bagi bro n sist yang
sudah berhasil membuat dan memasang kursor mouse di ikuti teks atau
tulisan di blog. Jika bro n sist menemui
kesulitan, Silahkan bertanya pada form komentar yang sudah tersedia dan gwe
akan dengan senang hati membalasnya.
Semoga tutorial ringan tentang trik cara membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog ini bisa sangat bermanfaat,,,,,
Semoga tutorial ringan tentang trik cara membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog ini bisa sangat bermanfaat,,,,,
Pai-pai,,,,,,,\^,^/
Twitter : @riel_zoldich
Facebook : www.facebook.com/ariel.zoldich