Memberikan efek-efek unik pada kursor mouse, yaa itulah tema kita malam ini. Karena sebelumnya saya memberikan cara merubah tampilan kursor mouse, jadi postingan kali ini ga usah jauh-jauh dari kursor dah :D. dari membaca judulnya pasti anda sudah bisa menerawang apa yang akan saya berikan di postingan ini, ok langsung saja beberapa efek yang saya punya untuk menghiasi kursor mouse yang ada di Blog anda.
Efek yang pertama adalah salju/bintang yang berjatuhan ketika kursor mouse anda bergerak.
Untuk memberikan efek ini pada Blog anda, langkah-langkahnya:
- Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
- Isi konten dengan kode yang ada dibawah
<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>
Keterangan : Untuk kode yang berwarna biru, merupakan kode dari warna efek, dapat anda rubah sesuai selera anda.
Efek yang kedua adalah Bubble/gelembung, jika pada efek yang pertama saljunya berjatuhan, maka pada efek ini buble akan melayang keatas.
Untuk menggunakan, Langkah-langkahnya persis seperti memasang efek yang pertama hanya dengan kode yang berbeda, yaitu:
- Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
- Isikan konten dengan kode dibawah.
<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>
Efek yang ketiga berupa tulisan yang mengikuti kursor mouse, jika pada efek yang pertama saljunya akan berjatuhan dan efek yang kedua bubblenya melayang, maka pada efek ini tulisan akan terus mengikuti kursor mouse dan membentuk sebuah circle.
Untuk memasangnya pada Blog anda, Langkah-langkahnya masih sama dengan langkah efek pertama dan kedua, tentunya dengan kode yang berbeda, yaitu:
- Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
- Isikan konten dengan kode dibawah.
<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>
Keterangan : kode berwarna biru, merupakan tulisan yang akan muncul nantinya.
Efek yang keempat, berupa jam digital yang mengikuti kursornya.
Cara pemasangannya,(ini yang saya pakai :D)
- Login >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript.
- Isikan konten dengan kode dibawah.
<script src="https://pesan-bocah-alus.googlecode.com/files/analogkursor.js" type="text/javascript"></script>
Sekarang anda hanya perlu menentukan efek mana yang sesuai dengan keinginan anda.
Sekian tutorial saya kali ini.
Semoga bermanfaat.
Pernahkah kalian membuat postingan dengan susahnya tapi akhirnya di-repost sama orang tanpa meninggalkan sumber? Yap, hal ini emang udah menjadi hal yang wajar oleh seorang blogger dan hal ini sangat sulit diberantas dalam dunia blogging khususnya para Copaster (sebutan bagi orang-orang khususnya blogger yang hanya mengisi konten blognya dengan cara menyalin postingan blog orang lain tanpa mencantumkan sumbernya). Dulu Sunu sering melihat konten blog yang Sunu punya di-copypaste oleh pihak-pihak yang kurang menghargai karya orang lain. Bolehlah kita copypaste, tapi asal jangan sama persis, ya paling tidak topik postingannya aja yang sama, cuma kalimatnya sendiri.
