Terwujud

Modifikasi Efek Gelembung Cursor Keren di Blog



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Artikel kali ini membahas mengenai Modifikasi Efek Gelembung Cursor di Blog, Modifikasi ini sebenarnya terhitung sederhana karena perubahan pada jenis warna dan jumlah serta besarnya gelembungnya saja, sedangkan pada kode-kode lainnya tidak ada perubahan dan masih tampil pada aslinya. Tentunya saya bukan master dalam mengetahui kode-kode di dalam sebuah blog, Ide ini saya dapatkan melalui sebuah blog milik mas Dan (http://danforblogg.blogspot.com).

Jika pada artikel sebelumnya saya membahas Modifikasi Menu Scroll dengan Backround Gambar dan Membuat Gallery Foto Efek 3D di Blog, maka tercetus ide untuk memodifikasi desain Efek gelembung yang selalu setia mengikuti cursor kemanapun berada :D. Saya memberikan dua Script kode dalam artikel ini, pertama kode yang telah saya modifikasi dan kode asli yang saya dapatkan melalui mas Dan.
Ada dua pilihan yang dapat anda tentukan sendiri, apakah efek gelembung ini akan ditempatkan secara otomatis (Widget HTML blog) atau secara manual (Postingan Artikel Blog). Berikut:

Modifikasi Efek Gelembung Cursor di Blog

1. Masuk ke www.blogger.com
2. Tentukan pilihan anda (widget HTML atau Posting Artikel)
3. Copy dan Paste Kode di bawah ini


<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, right, bottom, left dan background gelembung
 var bubbles=100; // jumlah banyaknya gelembung
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>


4. Klik Pratinjau terlebih dahulu
5. Save, Publish atau Perbaharui
6. Lihat Hasilnya

Keterangan:
^^ Demikian Artikel tentang Modifikasi Efek Gelembung Cursor di Blog, semoga bermanfaat bagi saya dan kita semua. Terima Kasih!!


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 15 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. mantap gelembung-gelembungnya kang..

    ReplyDelete
    Replies
    1. Terima kasih mas nimda. selamat bergabung ya

      Delete
  2. keren bang,apalagi ditambahkan sedikit CSS gabungan dengan script diatas sehingga efek gelembungnya bisa pecah saat mengalir keatas,,
    izin saya simpan kodenya di googlecode ya bang

    ReplyDelete
    Replies
    1. Makasih mbak Devy, oya kalau boleh tahu kode CSS itu apa ya, beri tahu ya!!!

      Delete
  3. baru kali ini saya lihat skrip dari suatu artikel seperti di atas...mantep nih blognya

    ReplyDelete
    Replies
    1. Heehee, ada ada aja mas ahmad ni, makasih ya!!

      Delete
  4. jadi ga bosen pak ngeliat cursor ada gelembung2 nya.. :) info yang bermanfaaat.. :)

    ReplyDelete
  5. glembung2 sperti dinspongebob y gan hehe... semakin menyenangkan klo ada modif seperti itu ... mantab :-)

    ReplyDelete
    Replies
    1. Betul sekali mas Rachmat, segera diterapkan ya :D

      Delete
  6. kayaknya menarik, tapi ada pengaruhnya pada loading blog gak mas .. ?

    ReplyDelete
    Replies
    1. Kalau diletakkan dalam postingan seperti tutorial saya ini tidak mas, tapi kalau untuk keseluruhan blog sepertinya pengaruh

      Delete
  7. jadi lebih keren ya mas tampilan kursor nya dengan adanya efek gelembung ini. Kapan-kapan bisa dicoba nih untuk dipasang di blog sya :)
    mudah-mudaha tidak memperberat loading blog :)

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved