Efek Bubbles Di Blog Dengan Java Script, maksudnya sama dengan efek balon busa!
Pada tau dong yang namanya balon busa? yang itu tu
efek itulah yang akan kita bahas kali ini.

Untuk cara memasang Efek Bubbles Di Blog Dengan Java Script di blog sobat sangatlah mudah sekali, karna sobat hanya perlu menambahkan elemen HTML/Java Script di slidebar sobat.

Oke lah tiadak perlu berlama-lama lagi, bagaimana kalo sekarang kita bahas tentang Cara memasang Efek Bubbles Di Blog Dengan Java Script di blog sobat? Untuk cara pemasangannya sobat bisa ikuti langkah-langkah berikut ini, lest go . . .

Cara memasang Efek Bubbles Di Blog Dengan Java Script di Blogger:

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget.

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode script di bawah ini dan letakkan di dalamnya.

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6N7dj9_ciQ_-3yEsQoMQbXPzpQdm3Anxo4W0P-kJsKSVfhyphenhyphenKbxLY8G0qfmx6LZZ5uSAVDOwmPzalNVipntEaYqptN0i0jsvTKI3FfYc2bVn78mRuLK_zJhM-n3jRy8p3Tefh8yUjw7Og/s400/filiex-bubbles+1.png';
floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9qP2bRRH8uoPo3VJb23ztjKnO9xPs5FqnWHlU9cow_bfUSbovnBD3gUEWgGbYyxLG8IQ9mL8yI0NVawCYJFOL_elcE7DFy-x4p3eNPfXDXV5p5T59geFJvaL99idiqcDQlMpFStt6NT2e/s400/filiex-bubbles+3.png';
floatimages[2]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmGprDoO_OVimPQ6vp4NVCQ3K80uMDkeEUXFWBnHrHVQ5989atPN9tiat5UwvIPBde2I8whqI_cLsMB_VHwSUVtjX6-aX2Sp2FSc1kyUPxXkmNbOuP5fxxRPAoj350-S6snXiRdIHbXzH/s400/filiex-bubbles+4.png';
floatimages[3]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ua5y24Rt6APpXG3bL60ATibKQTdky2rrZ2GoY-K8cMZBhcQEVVUZbiIWVyucnaLbXiDLYUg_4ljlB7UHDjxDhXOBrkvz7eFA0BrOP9gwOWCWCBfVWZ5CaA0qyJj9a3r7bPpvsN9LYCYo/s400/filiex-bubbles+8.png';
floatimages[4]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXZtnR1JL5fsuP83kczJa5gkiUMZb7-huTFWBEpT39plOTU7_PeCDnDlG6_B3WW04JBUifG_OBlPDE5KxkI5dqlf35-O8xKMba9UIpMNGR7na_y0V0FkCxNVfUvvBtoRlXzHQhgmhbiMv/s400/filiex-bubbles+7.png';


//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

//]]>
</script>

5. Simpan.

Mudah bukan, sekarang sobat bisa lihat perubahannya pada blog sobat.

Oke saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top