Jan 1, 2013
Sekarang saya akan memberikan tutorial "Cara Membuat Efek Gelembung Pada Mouse".
Tips yang satu ini gak susah-susah amat kok gan. Tetapi melalui tips yang satu ini, kita diajarkan untuk menjadi kreatif.Tips ini akan membuat blog teman-teman semua menjadi lebih indah dan menarik. Tapi hati-hati teman, ini akan memperberat blog anda juga, tapi gak berat-berat amat kok gan.. ^_^
Dan karena saya murah hati, saya memberikan 2 model untuk teman-teman saya semua. :D
Dan karena saya murah hati juga, saya memberikan 2 cara untuk membuat efek gelembung ini. :D
Untuk contoh/demonya, silahkan lihat pada script/kode model masing-masing.
Oke gan, langsung aja ke caranya :
Cara 1 :
1. Login dulu di blogger.com dengan akun yang bersangkutan
2. Dari Dasbor,
- Pilih Template
- Edit HTML
- Pilih Lanjutkan
- Centang "Expand Template Widget"
3. Cari kode </head> untuk mempermudah mencari, tekan F3 atau CTRL+F
4. Letakkan script/kode efeknya diatas/sebelum kode </head>
( untuk script/kodenya lihat setelah cara ke-2 )
5. Lalu klik Pratinjau/Preview untuk memastikan apakah script/kodenya berjalan dengan baik atau tidak.
6. Jika sudah oke, Simpan/save template anda.
Cara 2 :
1. Login dulu di blogger.com dengan akun yang bersangkutan
2. Dari Dasbor,
- Pilih Tata Letak atau Page Element
- Klik Tambah Gadget
- Pilih dan klik HTML/JavaScript
3. Letakkan script/kode efeknya
4. Simpan
Script/kode Efek Gelembung Model 1 :
DEMO
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000"); // 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 :
var colours=new Array("#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000"); ► adalah warna untuk border dan backgroundnya, anda bisa mengganti #ff0000 dengan kode warna yang lain.var bubbles=100; ► adalah jumlah banyaknya gelembung yang keluar per satu trip, tetapi untuk hasil yang lebih baik, biarkan saja begitu.
untuk kode warna silahkan lihat 3 link kode warna dibawah :
- Tabel Kode Warna
- Kode Warna 238 Warna
- Kode Warna 2 Model
Script/kode Efek Gelembung Model 2 :
DEMO
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#FF0000", "#6600CC", "#0000CC", "#FF00CC", "transparance"); // 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 :
sama seperti model 1. >>var colours=new Array("#FF0000", "#6600CC", "#0000CC", "#FF00CC", "transparance"); ► kode tersebut jangan diganggu gugat, tetapi kalau anda sudah profesional, ya sudah tidak apa-apa, tetapi untuk hasil yang lebih baik biarkan saja begitu.
var bubbles=100; ► adalah jumlah banyaknya gelembung yang keluar per satu trip, tetapi untuk hasil yang lebih baik, biarkan saja begitu.
untuk kode warna silahkan lihat 3 link kode warna dibawah :
- Tabel Kode Warna
- Kode Warna 238 Warna
- Kode Warna 2 Model
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :
Tag :
Codes
Tips & Trick Blogger
{ 3 comments... read them below or Comment }
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon
Subscribe to:
Post Comments (Atom)
thanks info'x gan, bermanfaat sekali bagi saya ..
ReplyDelete^_^
DeleteSama2 sobat!
Selamat menikmati hasilnya ya :)
tkss udah bantu :)
ReplyDelete