-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Efek animasi dengan java script

Sebuah efek animasi gif dengan javascrtipt. Gambar bergerak membentuk sisi kiri atas layar ke sisi kanan bawah layar.
Untuk demonya klik disini


  1. log in blogger
  2. dan simpan kode berikut sesuai keinginan kawan pada edit html posting atau pada Gadget; Html/Java Script, Atau juga mungkin kawan-kawan bisa mengnembangkannya :
<div id="animatedImage" style="position: relative;">
<img alt="animatedImage" src="http://www.opendrive.com/files/10845555_Y3cnb/hunter_running_from_bear_lg_clr.gif" style="border: medium none;" /></div>
<script src="http://www.opendrive.com/files/10845557_tWbE5/MoveRD.js" type="text/javascript">
</script>
Read More Sabtu, 03 Desember 2011 0 komentar

Cara mudah membuat menu tutup buka (Spoiler with jQuery)

Alhamdulilah ketemu juga cara buat Spoiler with jQuery.... menurut saya menu ini sngat menarik dengan efek smooth saat membuka tutup bagian dari menu nya...
untuk cara membuatnya :

  1. Login blogger
  2.  Simpan kode di bawah ini pada edit html postingan atau  pada Html/Java script :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});
</script>
<style type="text/css">
#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}
</style>
<button id="butToggle">KLIK SAJA</button>
<div id="dvt">
MAsukkan konten atau teks yang ingin dimasukkan disini</div>





Haaahhh jangan dibuka

Untuk  cara yang lebih baik dan simple nya
Read More 0 komentar

Cara membuat Slide Gambar terjatuh

View Demo nya klik disini untuk cara membuatnya :

  1. Seperti biasa log in blogger
  2. masuk ke Rancangan, Edit Html
  3. Cari kode </head> dan letakkan kode berikut di atas kode tadi :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Simpan template.........

Selanjutnya kopi pastekan kode di bawah ini pada edit Html Postingan atau pada tambah Gadget Html.Java script,,, sesuai kebutuhan :

<script src=" http://kodecode.googlecode.com/files/animation1.js " type="text/javascript">
</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>
<script src="http://kodecode.googlecode.com/files/animation3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">
$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
</script>
yang warna merah silahkan ganti sesuai kebutuhan
Read More 0 komentar

Cara membuat Slideshow Gambar (with jQuery)

View demonya bisa dilihat disini

Untuk cara membuatnya :

  1. Login blogger
  2. Rancangan, Edit Html
  3. Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi :
/*--------Slide show-------------*/
.coin-slider {
overflow: hidden; zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none; outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px; float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px; width: 10px; float: left;
border: 1px solid #B8C4CF; color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #B8C4CF; color: #FFFFFF;
}
.cs-title {
width: 563px;
padding: 10px;
background-color: #000000;
 color: #FFFFFF;
 }
.cs-prev, .cs-next {
background-color: #000000;
color: #FFFFFF;
padding: 0px 10px;
}

Selanjutnya cari kode </head> lalu letakkan kode di bwah ini diatas kode tadi :


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>

Simpan template..........

Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau pada Gadget Html/ Java script Sesuai kebutuhan........
<div id="coin-slider">

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwannende.jpg" />Keterangan gambar</a>

<a href="Link target gambar" target="_blank">
<img src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwan2.jpg" />Keterangan Gambar</a>

</div>

Yang berwarna biru silahkan ganti sesuai kebutuhan.....

namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...

Selamat mencoba
Read More 0 komentar