Berbagai macam efek di blog

MEMBUAT EFEK BINTANG PADA LINK

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/AVvXsEhpbd6AhRFDwTjYA2ziFEyEXmMMrpjA-fQKZkQYbvHZyPexn_81F7JoG3Sp926ZyCBoCb3iJFVi2g8B_JKBJ2V3GnUv9Pw2jORCQKOusDxXnrHSXmjeUFng6JInu_fItCjif8JIPthbj3c/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!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-bintang-pada-link.html#ixzz1zwRxvgax
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 

MEMBUAT EFEK GELEMBUNG PADA CURSOR

Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini WASPADA 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 MERAH diatas kode kode warna yang anda sukai. Selamat mencoba! Good Luck!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/membuat-efek-gelembung-pada-cursor.html#ixzz1zwScjmjO
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 

MEMBUAT EFEK DAUN BERGUGURAN

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!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/membuat-efek-daun-berguguran-di-blog.html#ixzz1zwUH79ha
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 

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!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-meteor-jatuh-di-blog.html#ixzz1zwUtGRr3
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 


CARA MEMBUAT EFEK GELEMBUNG DI BLOG

Sebelumnya WASPADA 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

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-gelembung-di-blog.html#ixzz1zwVgU68V
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 

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

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-love-berjatuhan-di.html#ixzz1zwWAhWAO
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih 

Cara Membuat Efek Kembang Api di Blog

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!

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2012/05/cara-membuat-efek-kembang-api-di-blog.html#ixzz1zwWv5BNl
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

gimana sobat? udah paham untuk efek efek nya?.. semoga yg saya post ini bermanfaat.
TERIMA KASIH 

Komentar

Postingan Populer