Cara Mengganti Gambar Kursor di Blog

Kali ini gw akan memberikan tips cara mengganti kursor pada blog dengan animasi atau gambar di internet maupun membuat gambar kursor sendiri. Yang pertama kali harus sobat lakukan yaitu mencari situs yang menyediakan banyak gambar-gambar kursor. Dan salah satu situs penyedia gambar animasi kursor gratis yaitu http://www.totallyfreecursors.com/. Dan jika ingin menggunakan gambar animasi sendiri, yang pertama sobat lakukan yaitu meng-upload gambar animasi tersebut ke google. Di bawah ini ada beberapa contoh animasi kursor:

  http://cursors0.totallyfreecursors.com/thumbnails/alien3.gif

 http://cursors4.totallyfreecursors.com/thumbnails/monkey-ani.gif

   http://cursors2.totallyfreecursors.com/thumbnails/aliendance.gif

   http://cursors4.totallyfreecursors.com/thumbnails/grandclock-ani-pink.gif

   http://cursors3.totallyfreecursors.com/thumbnails/dragon3.gif

   http://cursors2.totallyfreecursors.com/thumbnails/hourglass-ani2.gif

Kalo sobat sudah mendapatkan gambar yang cocok, klik kanan pada gambar dan klik “copy image URL” untuk mendapatkan URL dari gambar tersebut.

Untuk cara memasang gambar kursor tadi di blog, sobat blogger harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Langsung aja kita bahas cara mengganti kursornya..

Cara mengganti gambar kursor di blog :

1.    Login ke dashboard blogger anda.

2.    Pilih Rancangan > Edit HTML, centang Expand widget template.

3.    Carilah kode </head> pada template anda dengan menggunakan Ctrl+F.

4.    Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head>.

<style type='text/css'> HTML,BODY{cursor: url(&quot; http://cursors3.totallyfreecursors.com/thumbnails/dragon3.gif&quot;), auto;} </style>

5.    Simpan template anda dan lihat perubahan pada gambar kursor

NB : Ganti url gambar kursor yang berwarna merah dengan url gambar yang tadi sudah sobat persiapkan.

Nah ternyata mengganti gambar kursor di blog cukup mudahkan? Kursor yang telah di ganti juga bisa jadi solusi mempercantik tampilan blog juga lho.. apalagi kalo ditambahin lagi dengan efek bintang bertaburan, pasti makin mantab. Ayo tinggal giliran blog sobat, selamat mencoba ya, semoga sukses!

Cara Membuat Efek Bintang Bertaburan Pada Kursor

Kali ini gw akan memberikan tips agar kursor pada blog mempunyai efek bintang bertaburan. Pastinya sobat blogger sudah sering melihat tampilan kursor di blog atau website lain dengan efek bintang yang bertaburankan? Efek bintang bertaburan pada kursor ini memang bisa mempercantik penampilan blog sobat, namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo memang sobat blogger pengen tampilan blognya keren, silahkan saja ikuti langkah di bawah ini untuk membuat efek bintang bertaburan ini di blog.

Cara membuat efek bintang bertaburan pada kursor seperti dibawah ini :

1.       Login ke dashboard blogger sobat.

2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3.       Copy dan paste script dibawah ini pada gadget baru tadi.

<script>

// JavaScript Document<script type='text/javascript'>

// <![CDATA[

var colour="red";

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);

}

// ]]>

</script>

4.       Simpan dan lihat hasilnya. 

NB: Silahkan ganti warna “red” dengan warna lainnya seperti green, blue, yellow atau warna lain sesuka hati anda.

OK, sekian postingan kali ini....  Selamat mencoba dan semoga berhasil!