Apa kabar teman juga sobat semua dimana saja. semoga anda baik-baik saja yah..?
Pada hari ini saya akan berbagi buat sobat yang berminat memodivasi web-blog nya
Dengan effect bubble atau ballon, yang menghiasi homepage web-blog sobat semua
Sebagai accessories blog anda ok sobat yang berminat mencobanya silahkan simak
Ada dua script effect ballon ini sobat yang saya posting kali ini,
Silahkan anda pilih yang mana? berikut tutorial memasang nya :
Cara memasang nya :
Pertama anda masuk blog anda dan sigin, lalu masuk dasboard
Kemudian pilih layout-tata letak, pilih tambah gadget lalu copy kode java
Script di bawah ini ke dalam gadgte baru tadi di kolom html - java script
Ini kode effect ballon no 01
Setelah di paste kode di atas lalu save dan lihat hasil nya.
Selain kode effect ballon di atas di bawah ini adalah kode effect balloon
Yang lebih keren, dari yang diatas silahkan copy kode nya di bawah ini
Copy kode dibawah ini dan cara menimpan nya seperti contoh cara no 1
Ini kode effect bubbles menghiasi blog no 02 klik di bawah ini :
Setelah di paste kode nya lalu save dan lihat hasil nya
Saya rasa cukup sekian semoga anda berhasil memsang kode effect ballon ini
Kalau ada kesulitan silahkan bertanya, atau berkomentar di kolom di bawah ini
Pada hari ini saya akan berbagi buat sobat yang berminat memodivasi web-blog nya
Dengan effect bubble atau ballon, yang menghiasi homepage web-blog sobat semua
Sebagai accessories blog anda ok sobat yang berminat mencobanya silahkan simak
Effect Balloon |
Silahkan anda pilih yang mana? berikut tutorial memasang nya :
Cara memasang nya :
Pertama anda masuk blog anda dan sigin, lalu masuk dasboard
Kemudian pilih layout-tata letak, pilih tambah gadget lalu copy kode java
Script di bawah ini ke dalam gadgte baru tadi di kolom html - java script
Ini kode effect ballon no 01
<script src='http://karrysta.googlecode.com/files/effectbalonkarrysta.js'/></script>
Setelah di paste kode di atas lalu save dan lihat hasil nya.
Selain kode effect ballon di atas di bawah ini adalah kode effect balloon
Yang lebih keren, dari yang diatas silahkan copy kode nya di bawah ini
Copy kode dibawah ini dan cara menimpan nya seperti contoh cara no 1
Ini kode effect bubbles menghiasi blog no 02 klik di bawah ini :
<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/AVvXsEijqfyc7D4CE_-kEtvYaslsiKLgYH5L2neoGYB_5Gd-ZFNanEvu-ZoDJqCquEhJantjrIK-bUapw7fQBL_5F8IgAV5FygO3dgmhWlarpqRhZ2bXOpBWJEIlz7FchgdmOBPeiODY5GK3Xiul/s400/filiex-bubbles+1.png';
floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQLLpyprVEWwbPD61tI638sypnQTQbpVEphOuE-I3lkk_u2Al8CUekfAPiCiqeqE1TfJjay_n4efrfFsdl0z-gVdI2bBDlR_2Nqh06o7-yzz1Fn7GeIqm42cAEsE9x18qCPs3sDPwivAh6/s400/filiex-bubbles+3.png';
floatimages[2]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtHfviwGNwVHYa1wqeDM8Erg0VrP1hB5ss5j4IuL2TO7IHcYTEPc22i74LG4QhWFOL5PB6u20jlenKLCTiUMPy0Hxbd-cUX14D9JsmBoDI5YWiiBeG_VbxJO5enr54Ea8MuWYha4VO_aw5/s400/filiex-bubbles+4.png';
floatimages[3]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgJkxyJIO7KxCWfGdN2Zb95C2NUW0lj2S0hazAqK4fzIYhidPcdpbjyoTny52wCSLa-YUybd1mddNCwAAESui_Ts_k9HTaymwoGlEsnyJiZ89tB7oljMw0YBJR8qCQLzY4KS15OchUZTi/s400/filiex-bubbles+8.png';
floatimages[4]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLov70RKkd6wtGwRSWGEH9oY_aQg9J1youhd4UgoPt6DL3ibO3nQz-Z2U0W7e-7j1TZF9Ja4DeqljP29EmfSUe1-OPN4FLd3gmcFvoQAImb4EhHAEnsi-GpTb5Xgq7vKrPOy4hsT8GA7r/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>
//<![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/AVvXsEijqfyc7D4CE_-kEtvYaslsiKLgYH5L2neoGYB_5Gd-ZFNanEvu-ZoDJqCquEhJantjrIK-bUapw7fQBL_5F8IgAV5FygO3dgmhWlarpqRhZ2bXOpBWJEIlz7FchgdmOBPeiODY5GK3Xiul/s400/filiex-bubbles+1.png';
floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQLLpyprVEWwbPD61tI638sypnQTQbpVEphOuE-I3lkk_u2Al8CUekfAPiCiqeqE1TfJjay_n4efrfFsdl0z-gVdI2bBDlR_2Nqh06o7-yzz1Fn7GeIqm42cAEsE9x18qCPs3sDPwivAh6/s400/filiex-bubbles+3.png';
floatimages[2]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtHfviwGNwVHYa1wqeDM8Erg0VrP1hB5ss5j4IuL2TO7IHcYTEPc22i74LG4QhWFOL5PB6u20jlenKLCTiUMPy0Hxbd-cUX14D9JsmBoDI5YWiiBeG_VbxJO5enr54Ea8MuWYha4VO_aw5/s400/filiex-bubbles+4.png';
floatimages[3]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgJkxyJIO7KxCWfGdN2Zb95C2NUW0lj2S0hazAqK4fzIYhidPcdpbjyoTny52wCSLa-YUybd1mddNCwAAESui_Ts_k9HTaymwoGlEsnyJiZ89tB7oljMw0YBJR8qCQLzY4KS15OchUZTi/s400/filiex-bubbles+8.png';
floatimages[4]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLov70RKkd6wtGwRSWGEH9oY_aQg9J1youhd4UgoPt6DL3ibO3nQz-Z2U0W7e-7j1TZF9Ja4DeqljP29EmfSUe1-OPN4FLd3gmcFvoQAImb4EhHAEnsi-GpTb5Xgq7vKrPOy4hsT8GA7r/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>
Setelah di paste kode nya lalu save dan lihat hasil nya
Saya rasa cukup sekian semoga anda berhasil memsang kode effect ballon ini
Kalau ada kesulitan silahkan bertanya, atau berkomentar di kolom di bawah ini
6 komentar
GOOD om, tapi kyk nya nambahin bebean blog, jadi berat deech loading ny :D
Rasanya sudah lama sekali gak jalan - jalan kesini, sampe -sampe ketinggalan banyak update artikel, ini keren tutorialnya, kapan - kapan akan saya pasang di blog saya, ijin pake ya sobat. terus berkarya semoga anda sukses selalu, amin.
Thanks Nenx Pricillia Putri..atas kunjunganya..yah namanya nambah script
pasti dikit nambah load, tapi dikit koq Nenx, kode yang ke, 1 hanya 4.1 kbps
Dan kode script ke 2 Bubble balloon hanya 16.0 kbps jadi gak jadi gak terlalau
Memakan load, ...Salam sukses yah Nenx..?
Yah Betul sekali Sobat ku Mas.Rozikinroz Sudah lama kita. jarang bersua di media
Blogger..yah maklum mungkin kita sama-sama disibukan aktivitas nya masing-2
Semoga Mas.Rozokin baik2 dan sehat2 semua skeluarga (Amien)
Silahkan Sobat yah hanya sebatas update posting saja Sob..walau pun posting
Sederhana semoga sedikit banyak nya ada sisi yang bermanfa,at..
Oke Mas.Salam sukses balik yah..? salam Marhaban ya Ramadhan
nice info broww...
sya udh prnah pake ini, tpi blog sya jd berat....
yah, sya copot lg... :D
hehehe :D
skalian blog walking yukk... :)
coment back yah di artikell saya ini :)
http://thalp0uz.blogspot.com/2013/07/mutiarabijakcom-kata-kata-mutiara-dan.html
Memang sih Sob agak makan kb..yah nama nya nambah script
pasti deh memakan load..tapi asal jangan overload aja.
Terima kasih Sobat q. @Thal POuZ sudah berkunjung dan
memberikan pencerahan..ok segera ke TKP Sobat...
Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini
Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower