Cara Menambahkan Animasi Cursor Pada Blog

Langsung saja gak usah pake basa-basi,

ini versi mudahnya, kalian hanya perlu menambahkan external script ini di atas

</head>

<!-- start cursor animasi -->
<script src="http://sites.google.com/site/indamwhy/file-java-script/cursormerah.js"></script>
<!-- end cursor animasi -->

keteragan!

• untuk blogspot klik layoust atau tataletak, buka edit html, tambahkan script diatas </head>kemudian simpan!
• untuk wordpress.org buka appearance trus pilih editor, edit pada header.php kemudian cari </head>, tambahkan eksternal script diatas lalu klik update file!
• lihat blog.

menambahkan secara manual

cara diatas tidak saya rekomendasikan karena, lokasi file javascript diatas adalah milik saya. so, jika suatu saat saya hapus maka otomatis animasi cursor ini tidak akan berfungsi lagi, nah maka dari itu kita akan bahas secara tuntas!

isi dari file external diatas adalah ini!

var colour="red";//warna cursor
var sparkles=65;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}

untuk pengguna blogspot

• copy script diatas
• buka program editor(notepad)
• paste
• kemudian save as dengan mana cursor-animasi.js
• ektensinya harus [dot]js
• kemudian upload di hosting yang sobat punya, jika tidak punya hosting, sobat bisa menggunakn google site!
• untuk cara menggunakan goole site sebagai hosting, silahkan googling!
• setelah sobat sudah medapatkan url file js yang diupload tadi!
• tambahkan diatas head!
• <script src=”url-file-js-yang-sudah-di-buat-dan-di-upload“></script>
• ganti text yang berwarna merah
• simpan

untuk pengguna wordpress

• buka directory/folder theme sobat
• klik kanan diarea kosong!
• pilih new -> text document
• copy dan paste script diatas
• sava dengan nama cursor-animasi.js(pastikan ekstensi file adalah js, bukan text)
• buka atau edit header.php
• cari </head>
• tambahkan ekternal script berikut diatasnya

<!-- start cursor animasi -->
<script src="<?php bloginfo('template_directory'); ?>/cursor-animasi.js"></script>
<!-- end cursor animasi -->

• simpan
• pastikan nama file yang dibuat tadi harus sama dengan <?phpbloginfo(‘template_directory’); ?>/cursor-animasi.js
• yang berwarna merah!

keterangan!

• untuk melihat hasilnya, activate theme yang talah ditambahkan script cusor tadi!
• sedangkan untuk manganti warna cursornya, edit script yang dibua tadi lalu cari seperti ini

var colour="red"; // warna cursor

• ubah value red

mudah dan simple kan!

About these ads