Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog - BBT: Panduan lengkap cara membuat efek gelembung / bubble di blogger / cursor blog menggunakan script efek gelembung untuk blog

Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog

Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog
Sobat pada tutorial blogger kali ini saya akan menuliskan panduan cara bikin efek gelembung atau membuat efek bubble pada cursor blog khususnya blogger.

Dengan menggunakan script efek gelembung yang akan saya sertakan di bawah nanti cursor blog blogger teman akan mengeluarkan gelembung-gelembung atau bisa juga di sebut bubble.

Sebelum saya menuliskan caranya, saya ingin menegaskan bahwa ini hanya salah satu cara untuk mempercantik atau menghias blog kita, dan sifatnya tidak wajib.

Oke, mari kita mulai tuorial membuat efek gelembung / bubble di blogger ini.

Cara Bikin Efek Gelembung / Bubble Pada Cursor Blogger

Pada tutorial ini saya akan menuliskan 2 cara membuat efek gelembung di blogger, silakan sobat pilih / gunakan cara yang menurut sobat paling mudah.

Cara Pertama Membuat Efek Gelembung / Bubble di Blog

Cara pertama yang akan saya tuliskan ini menurut saya pribadi adalah cara yang paling mudah dan aman untuk membuat efek gelembung di blogger.

Berikut langkah - langkah yang harus sobat lakukan :
  1. Masuk ke Dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget / Add a Gadget
  4. Pilih Gadget HTML/JavaScript
  5. Masukkan script efek gelembung yang saya sertakan di bawah nanti pada bagian Konten / Content
  6. Klik Simpan / Save
Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog
Nah, itulah cara pertama yang bisa sobat lakukan untuk membuat efek gelembung / bubble di blogger.
Untuk script efek gelembung bisa sobat ambil di bawah nanti setelah cara kedua.

Cara Kedua Membuat Efek Gelembung / Bubble di Blog

Adapun cara kedua yang bisa sobat lakukan untuk memberi efek gelembung di blogger ini sedikit memiliki risiko, jadi kita harus hati-hati dan teliti jika memilih menggunakan cara ini, jangan sampan ada kode template sobat yang terhapus / terpotong.

Untuk memberi efek gelembung di blogger menggunakan cara kedua ini silakan sobat ikuti langkah - langkah berikut :
  1. Masuk ke Dasbor blogger
  2. Buka halaman Template
  3. Klik tombol Cadangkan / Pulihkan (Backup / Restore) untuk jaga-jaga.
  4. Klik Edit HTML
  5. Cari Kode </head> atau boleh juga </body>
  6. Pasang script efek gelembung sebelum kode </head> atau </body>
  7. Klik tombol Simpan template / Save template
  8. Selesai
Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog
Nah itulah cara kedua yang bisa sobat lakukan, namun ingat, sobat harus teliti jika menggunakan cara ini.

Script Efek Gelembung / Bubble Untuk Blog

Berikut script yang harus sobat gunakan untuk membuat efek gelembung / bubble di blog sobat

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); // 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>
Keterangan:
  • Kode "#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000" adalah kode warna gelembung, silakan ganti dengan warna yang kamu mau, agar lebih mudah menemukan kode warna yang kamu inginkan silakan cari di Daftar Kode HTML Warna / Kode Warna.
  • Kode 100 adalah jumlah maksimal gelembung yang akan keluar, silakan ganti angka 100 dengan angka / jumlah gelembung yang kamu suka.

loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Efek Gelembung (Bubble) Pada Cursor Blog yang ada di blog ini bermanfaat buat sobat