Berikut berbagai macam efek pada mouse untuk blog, sobat bisa memilihnya di bawah ini, :D
Jam Digital Pada Mouse Blog
Efek pertama yang akan saya bahas adalah efek Jam Digital Pada mouse blog, seperti apa efek tersebut???silahkan sobat langsung coba saja hihi1. Masuk ke Tata Letak > Tambah Gadget
2. Copy kode di bawah Tepat di dalam box yang tadi
<script src="https://pesan-bocah-alus.googlecode.com/files/analogkursor.js" type="text/javascript"></script>Salju / Bintang Berjatuhan Ketika Mouse Bergerak
Efek yang kedua adalah efek salju, efek salju ini akan turun jika mouse bergerak :D, langkah langkahnya tidak jauh berbeda dengan yang tadi :D1. Silahkan sobat masuk lagi ke Tata Letak > Tambah Gadget
2. Copy kode di bawah Tepat di dalam box yang tadi
<script src="https://pesan-bocah-alus.googlecode.com/files/salju.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">var colour="blue";</script>Gelembung Pada Mouse
Nah yang ini gelembung, sebelumnya adalah efek Salju / Bintang Berjatuhan, kalau yang ini gelembung jadi ini terbang ke atas :D, bagi yang ingin memasangnya langsung saja ikuti tutorial di bawah1. Masuk lagi ke tata letak > Lalu klik Tambah Gadget
2. Masukan kode di bawah tepat di dalam box yang tadi :D
<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/startbubble.js"></script>
<script type="text/javascript" src="https://pesan-bocah-alus.googlecode.com/files/bubble.js"></script>Tulisan Mengikuti Mouse
Yang ini merupakan efek tulisan yang selalu mengikuti mouse, efek yang sebelumnya adalah terbang dan jatuh, kalau yang ini adalah mengikuti mouse, :D1. Lakukan langkah pertama sepeti yang di atas, :D
2. Masukan kode di bawah di dalam kotak box yang tadi
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000FF;
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 = "Tulisan yang ingin anda tampilkan";
var size = 14;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.2;
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>Langkah terakhir jangan lupa untuk sobat save :D
Nah itulah artikel tentang Kumpulan Efek Kursor / Mouse Pada Blog, jangan lupa baca juga Cara Membuat Efek Petir Pada Blog :).
bagi sobat yang kebingungan sobat bisa berkomentar di bawah, jangan sungkan sungkan untuk bertanya :D
0 Komentar
Penulisan markup di komentar