Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Modifikasi Efek Gelembung Cursor di Blog


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:
  • Silahkan Edit warna sesuai dengan selera serta jumlah maksimal Balon
  • Silahkan Copy kode Script yang sudah saya singkat >> <script src="https://googledrive.com/host/0B2J42XkvLqFoM0hmS3FjMnZsdmM" type="text/javascript"></script>
  • Jika ingin mempersingkat sendiri kode di atas, baca Cara Mempersingkat Kode Panjang dengan google drive

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

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

15 komentar

mantap gelembung-gelembungnya kang..

Balas

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

Balas

Makasih mbak Devy, oya kalau boleh tahu kode CSS itu apa ya, beri tahu ya!!!

Balas

Terima kasih mas nimda. selamat bergabung ya

Balas

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

Balas

Heehee, ada ada aja mas ahmad ni, makasih ya!!

Balas

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

Balas

Terima kasih buat mas irpan.

Balas

Gampang ternyata, ya...

Balas

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

Balas

Ya begitulah mas Inone, salam kenal ya

Balas

Betul sekali mas Rachmat, segera diterapkan ya :D

Balas

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

Balas

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

Balas

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

Balas

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis