• About
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Contact

Wali5 Blog

  • Home
  • Menu1
    • Submenu1
    • Submenu2
    • Submenu3
    • Submenu4
  • Menu2
    • Submenu1
    • Submenu2
  • Menu3
  • Menu4
  • Menu5
  • Menu6
Home » Tutorial Blog » Bubble Kursor Efeck

Bubble Kursor Efeck

Bosen dengan tampilan cursor di blog atau suatu website, gak usah khawatir. Kalai ini saya akan posting tentang bagaimana cara membuat  Bubble Kursor Efeck. Pasti sobat semua bingung apa yang dimaksud dengan  Bubble Kursor Efeck.?  Bubble Kursor Efeck sama dengan gelembung-gelembung ketika cursor digeser kesana kemari.


OK. Kalau sobat berminta dan ingin memasangnya di blog masing-masing silahkan ikuti langkah-langkah berikut.

  1. Seperti biasa LogIn ke Blogger sobat
  2. Pada halaman Dasbor klik Rancangan
  3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
  4. Copy dan Paste Kode Bubble Kursor Efeck di bawah ini di ktak HTML/Javascript





<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

/****************************
* JavaScript Bubble Cursor *
* (c) 2010 mf2fm web-design *
* http://ade-tea.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
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>




TIDAK ADA KATA TERLAMBAT BAGI ORANG YANG MAU BERUSAHA
Posted by Birrul Walidain on Wednesday, December 7, 2011 - Rating: 4.5
Title : Bubble Kursor Efeck
Description : Bosen dengan tampilan cursor di blog atau suatu website, gak usah khawatir. Kalai ini saya akan posting tentang bagaimana cara membuat  Bubb...

Share to

Facebook Google+ Twitter

5 Responses to "Bubble Kursor Efeck"

  1. Outbound Malang12/7/11, 9:47 AM

    berkunjung sob..salam blogger.
    salam kenal dan sukses selalu :)

    ReplyDelete
    Replies
      Reply
  2. agus KBM12/7/11, 7:57 PM

    la ini yang saya cari dari beberapa hari yang lalu
    makasih ya dah mau share

    ReplyDelete
    Replies
      Reply
  3. Dwiki12/7/11, 8:02 PM

    komen balik gan :D

    ReplyDelete
    Replies
      Reply
  4. IT-Soft Center12/7/11, 8:08 PM

    Saya mau coba dlu.........
    Thanks gan .....:)

    ReplyDelete
    Replies
      Reply
  5. Hacc12/7/11, 8:47 PM

    Mantap gan!
    Ke TKP.

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Newer Post
Older Post
Home
Subscribe to: Post Comments (Atom)

STAT RANK


Copyright © 2012 Wali5 Blog - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger