Sebelumnya blog trik dan tips telah memberikan info cara membuat efek love berjatuhan. Kali ini seperti judul diatas saya akan berbagi trik terbaru cara membuat efek gelembung di blog. Ada dua efek gelembung yang akan saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek gelembung berwarna biru muda yang berjatuhan di blog sementara efek kedua yaitu efek gelembung terapung (float effect). Jika sobat penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya dibawah ini:
Efek Pertama:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/bubble.js'/>
5. Simpan template sobat
Efek Kedua:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkkan kode berikut ini:
<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/bubble2.js"></script>
5. Simpan gadjet
Seperti yang sudah saya janjikan sebelumnya kita akan membuat efek-efek yang manarik di blog sobat. Kali ini blog trik dan tips akan memberikan trik untuk membuat efek love berjatuhan di blog sobat. Efek ini sangat cocok untuk para wanita yang ingin membuat blognya agar terlihat lebih girly dan romantis. Cara membuatnya sangat mudah, langsung saja ikuti langkahnya dibawah ini
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML JavaScript
4. Masukkan kode berikut ini:
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/love_berjatuhan.js'></script>
5. Simpan gadjet lalu lihat hasilnya
Selamat mencoba efek ini!
Sobat blogger sudah pernah belum melihat efek meteor yang jatuh pada blog. Efek yang satu ini bisa dikatakan cukup menarik karena disertai dengan suara saat meteor bertabrakan. Efek meteor jatuh merupakan efek yang cukup saya sukai karena berbeda dengan efek-efek lainnya. Efek ini dibuat oleh Stephen Chapman. Jika sobat blogger penasaran bagaimana tampilan dari efek meteor jatuh silahkan coba langkahnya dibawah ini:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:
<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/meteor_jatuh.js">
</script>
5. Simpan gadjet lalu lihat hasilnya
Selamat mencoba!
Selamat malam sobat blogger, bagaimana kabar anda? Kali ini Blog Trik dan Tips akan memberikan tutorial cara membuat efek bayi merangkak di blog. Efek ini sudah cukup menarik namun juga cukup menggangu karena si bayi akan menyoret screen blog anda. Dari pada basa basi mari langsung aja kita praktekan. Berikut ini adalah langkahnya:
1. Login ke blogger
2. Masuk ke Tata Letak/Rancangan
3. Tambah gadjet blog
4. Pilih HTML/Javascript
5. Kopi kode dibawah ini lalu paste pada gadjet:
<script language="javascript"> nd_mode="baby"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efekbayiberjalan.js"></script>
6. Simpan gadjet
Jika sobat udah mengikuti langkah diatas, sekarang dilihat aja hasilnya diblog. Semoga informasi ini bermanfaat. Selamat mencoba!
Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini blog trik dan tips akan membahas bagaimana cara membuat efek gelembung pada cursor. Efek gelembung akan muncul apabila cursor digerakan dihalaman blog anda. Gelembung akan timbul lalu melayang ke atas halaman blog. Jika sobat penasaran dengan tampilkan efek cantik ini silahkan coba langkahnya dibawah ini:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:
<noscript></noscript><!-- --><script type="text/javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // 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>
5. Simpan gadjet lalu lihat hasilnya
Jika sobat ingin mengubah warna gelembung pada cursor silahkan ganti kode yang berwarna biru diatas kode kode warna yang anda sukai. Selamat mencoba! Good Luck!
Lusa lalu, saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:1. Login ke blogger2. Masuk ke Rancangan -- Edit HTML3. Carilah kode a:link{ atau a:visited{4. Lalu letakkan kode dibawah ini dibawah kode tadi
a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACG30d4lBt1KQVtAHLR-cjRCDEqpWS9E2FaQW_j2mVaxX9mI3bbBJA5f4nfNyDw0XKh6ndfIuOhIcFqU_pAKCVvl1g1_8XYANWA6uaiXp9Bo9TTTDWptOQiPlzMFMwiYMWBbIVK8D6ro/s1600/stars.gif);}
Link akan mengeluarkan gambar seperti ini:
5. Simpan template anda lalu lihat hasilnyaJika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!
Halo Sobat blogger kembali lagi bersama Blog Trik dan Tips. Sobat sudah pernah belum ngalamin rasanya banjir ditempat sobat tinggal. Banjir pasti sangat menggangu aktivitas yang sobat ingin lakukan. Namun kali ini, blog trik dan tips akan membahas cara membuat efek banjir di blog. Ingin tau caranya, langsung saja ikuti langkahnya dibawah ini:1. Login ke blogger2. Pilih Tata Letak / Rancangan3. Tambahkan gadjet4. Pilih HTML/Javascript 5. Masukan kode berikut ini:
<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>
6. Simpan gadjetSekarang sobat sudah bisa melihat hasilnya. Efek ini akan membuat blog anda tenggelam akibat banjir. Akan muncul ikan dan gelembung udara di screen blog anda. Menarik bukan? Selamat mancobanya!!
Sebelumnya blog trik dan tips telah memberikan info cara membuat efek love berjatuhan. Kali ini seperti judul diatas saya akan berbagi trik terbaru cara membuat efek gelembung di blog. Ada dua efek gelembung yang akan saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek gelembung berwarna biru muda yang berjatuhan di blog sementara efek kedua yaitu efek gelembung terapung (float effect). Jika sobat penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya dibawah ini:
