Cara Membuat Efek Banjir di Blog

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 blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. 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 gadjet

Sekarang 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!!

Cara Membuat Bayi Merangkak di Blog

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!

Membuat Efek Telur Ceplok di Blog

Ada yang lapar gak? Kalau makan mie goreng paling lezat pakai telur ceplok. Kebetulan karena ada waktu memposting artikel kali ini saya akan memberikan tips bagaimana cara membuat efek telur ceplok. Efek ini cukup mengganggu penampilan blog, tapi kalau ingin mencobanya gak ada salahnya:

1. Login ke blogger.
2. Masuk ke Tata Letak / Rancangan
3. Tambah gadjet, lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<script language="javascript"> nd_mode="eggs"; 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/efektelur.js"></script>

5. Simpan gadjet

Kini sobat bisa melihat hasilnya diblog. Selamat mencobanya!

Cara Membuat Efek Bintang Pada Link

Bulan 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 blogger
2. Masuk ke Rancangan -- Edit HTML
3. 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/AVvXsEiDLiKfs7gRTj0HgSOe_9jThl5yYHHC5zo_21YRq4ogZs2rAubvi2k93YQqpdUt4yZYJ92U_dkda68EhhV6KnmY3_foAxt5GfQRDwMXuJrD9oeQDgUpTtijnV6HAGaYo-zauxJ8joNBF6A/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

Membuat Efek Gelembung pada Cursor

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!

Membuat Efek Daun Berguguran di Blog

Selalu saja ada berbagai macam efek menarik yang bisa kita tampilkan di blog, salah satunya yaitu membuat efek daun berguguran. Efek ini tentunya berbeda dari efek-efek sebelumnya karena pola jatuhnya daun berayun-ayun. Cara membuat efek ini sangat mudah, ikuti saja 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 src='http://blogtrikdantips-blogspot.googlecode.com/files/daun.js'/></script>

5. Simpan gadjet lalu lihat hasilnya

Selamat mencobanya! Good Luck!

Cara Membuat Efek Meteor Jatuh di Blog

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!

Cara Membuat Efek Gelembung di Blog

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

Cara Membuat Efek Love Berjatuhan di Blog

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!

Cara Membuat Efek Kembang Api di Blog

Udah beberapa minggu ini saya belum mengupdate posting yang baru. Kebetulan karena ada kesempatan menulis, beberapa hari ke depan blog trik dan tips akan memberikan berbagai macam trik untuk membuat animasi pada blog sobat. Untuk kali ini kita akan membuat animasi yang manarik dan juga bisa menjadi inspirasi buat teman-teman blogger lainnya. Animasi yang akan kita buat yaitu efek kembang api pada blog. Jika sobat tertarik bagaimana tampilan dari animasi ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode </body>
4. Paste kode dibawah ini diatas kode </body>

<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/fireworks1.js"></script>

5. Simpan template sobat dan lihat hasilnya

Jika sobat ingin membuat efek kembang api yang berbeda bisa dilihat 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:

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

5. Simpan gadjet sobat dan lihat hasilnya

Selamat mencoba!

Membuat Efek Hover Transparan pada Gambar

Anda bisa membuat berbagai macam efek hover pada objek yang anda inginkan di blog. Salah satunya yaitu membuat efek hover transparan pada gambar. Efek hover ini akan nampak apabila anda mengarahkan cursor mouse pada object. Jika cursor mouse berada tepat diatas gambar maka gambar tersebut akan menjadi normal, namun jika anda tidak mengarahkan cursor pada gambar maka gambar tersebut menjadi transparan. Jika sobat ingin tau cara membuat efek tersebut ikuti langkahnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode ]]></b:skin>
4. Lalu tambahkan kode Css berikut ini diatas kode ]]></b:skin>

a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

5. Simpan template anda.

Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini

<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>

Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna biru adalah url gambar