Membuat Animasi Bunga Berjatuhan

11 Oktober

Membuat sebuah blog yang cantik dan manis tentunya merupakan kesenangan tersendiri. Tutorial kali ini sepertinya sangat cocok untuk wanita yang hobby mendesain blog. Bagaimana cara membuat animasi bunga berjatuhan di dalam blog kita merupakan bahasan tutorial hari ini.

Mari kita mulai cara membuat animasi bunga berjatuha di blog.

1. Langkah pertama silahkan kamu login dulu ke dashboard blog kamu.
2. Masuk kebagian desain atau tata letak pada menu dashboard
3. Pilih tambahkan gadget yang berada pada letak di bawah kolom header.
4. Kemudian setelah kotak  gadget terbuka pilih tambahkan fungsi html dan javascript
5. Copy kode di bawah ini kemudian paste dalam kotak kontent.

Kode cara membuat animasi bunga berjatuhan

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')  
 .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])  
 .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>  
 <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>  

6. Simpan hasil yang sudah kamu kerjakan kemudian coba refresh blog anda dan lihat perubahannya.

Tutorial ini cukup sederhana untuk membuat sebuah blog menjadi lebih cantik. Sedikit tips agar lebih cantik sesuaikan template kamu dengan warna yang sedikit lembut seperti pink atau biru muda.

Jika kamu menemukan masalah saat mengikuti tutorial cara membuat animasi berjatuhan ini seperti animasi tidak mau jalan, periksa kembali langkah-langkah diatas, atau silahkan mencoba mengganti template kamu. Penulis pernah mencoba pada beberapa template, dan beberapa template tidak cocok untuk menjalankan script ini.