Minggu, 19 Februari 2012

Membuat Efek kursor Gelembung Berwarna


Hai sahabat blogger, nih ada sesuatu yang menarik kali ini kita akan bahas yaitu menambahkan efek gelembung pada sebuah kursor yang dapat mempercantik tampilan blog kita maka dari itu bahasan kali ini kita akan memberi judul  Membuat Efek kursor Gelembung Berwarna  dan caranya pun sangat mudah sekali untuk di pelajari dan di ikuti oleh para blogger semuanya, kalau tidak percaya mari kita buktikan dan langsung ke langkah-langkahnya ;
1. Login ke Blogger.com
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +
5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript Dengan Gamba 


<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">


// <![CDATA[
var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>



6. Simpan dan lihat tampilannya.

Selamat mencoba dan semoga berhasil.
Terima kasih telah berkunjung ke blog Masih Ingin Belajar.


Keywords: Membuat Efek kursor Gelembung Berwarna, Cara Membuat Efek kursor Gelembung Berwarna, membuat efek kursor, membuat efek cursor, cursor, kursor, membuat efek gelembung pada cursor, membuat efek gelembung pada kursor, cara membuat efek kursor, cara membuat efek cursor, cara membuat efek gelembung pada cursor, cara membuat efek gelembung pada kursor, langkah-langkah membuat efek kursor, langkah-langkah membuat efek cursor, langkah-langkah membuat efek gelembung pada cursorlangkah-langkah membuat efek gelembung pada kursor, menambahkan efek gelembung pada cursor, cara menambahkan efek gelembung pada cursor, langkah-langkah menambahkan efek gelembung pada cursorblogblogger tutorialtutorial bloggerpanduan bloggerbelajar bloggertutorial blogpanduan blogbelajar blogtips dan trik Bloggertips blog, tips bloggertrik blogtrik blogger, trick blogtrick bloggercara membuatmembuatcara membuatmasih ingin belajar.

1 komentar:

  1. Mau coba di blog saya:http://agusciamis.blogspot.com
    trims info nya

    BalasHapus

Jangan lakukan spam pada komentar dan bila anda ingin beriklan gratis atau hanya sekedar membuat backlink anda bisa melakukannya di beriklanbersama.blogspot.com dan hanya dengan sekali pasang maka akan terpasang di 10 website.