Friday, March 14, 2014

Tutorial membuat widget bunga berguguran pada blog

Untuk memperindah tampilan pada Blog Anda, melalui Blog Berbagai Artikel Menarik ini saya akan berbagi Artikel Menarik tentang salah satu cara praktis memperindah tampilan Blog yaitu dengan cara Membuat Bunga Berguguran.

Di sini saya akan membahas tentang cara membuat widget bunga berguguran pada Blog melalui Widget HTML/Javascript.

Bagaimana cara yang cepat dan praktis untuk membuat tampilan Bunga yang Berguguran pada Blog ?
cara membuat bunga berguguran pada blog
Berikut ini Anda bisa mengikuti cara atau langkah-langkah berikuti ini.
  • Silakan Login pada akun Blogger Anda.
  • Pilih atau klik "Tata Letak", seperti pada gambar di bawah ini.
cara membuat bunga berguguran pada blog-1
  • Setelah mengklik "Tata Letak", lanjutkan dengan mengeklik "Tambahkan Gadget" seperti yang tampil pada gambar di bawah ini.
    cara membuat bunga berguguran pada blog-2
    • Pilih "HTML/JavaScript".
    • Salin dan masukkan kode di bawah ini ke dalam isian "HTML/JavaScript". Kode tersebut sebagai berikut :
    <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="https://googledrive.com/host/0Bw2UKirhS9JRWldPRDVSRlBwbWM">');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/-E6YbSfcvVEY/UxSt4q8vUMI/AAAAAAAACY0/y52cvgAvaWw/s1600/pinkflower1.png";image_urls['rain2']="http://2.bp.blogspot.com/-awPfcZJ7abI/UxSubBvtG-I/AAAAAAAACY8/kM-nU_3BI9Q/s1600/pinkflower2.png";image_urls['rain3']="http://1.bp.blogspot.com/--4H2cwN4fc0/UxSusdFSUPI/AAAAAAAACZE/0P4L1N5A8MI/s1600/redflower1.png";image_urls['rain4']="http://2.bp.blogspot.com/-lJczZFOnTLE/UxSu-BC7kuI/AAAAAAAACZM/HI0lnTk42CI/s1600/redflower2.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="https://googledrive.com/host/0Bw2UKirhS9JRWldPRDVSRlBwbWM">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-E6YbSfcvVEY/UxSt4q8vUMI/AAAAAAAACY0/y52cvgAvaWw/s1600/pinkflower1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://satu-untuk-semuanya.blogspot.com/2014/03/tutorial-membuat-widget-bunga.html'}).append(a).appendTo('body')});</script>
    • Klik "Save", untuk menerapkan perubahan pada Blog.
    Apabila semua Cara tersebut di atas Anda lakukan dengan baik dan benar, maka akan tampil Bunga berguguran pada tampilan Blog Anda.

    Demikianlah Artikel tentang Tutorial membuat widget bunga berguguran pada blog, yang saya publikasikan pada Blog Berbagai Artikel Menarik. Semoga Artikel ini menarik dan bermanfaat untuk Anda.

    Baca juga :
    Berbagai Artikel Menarik
    Share this article to your friends :

    0 comments:

    Post a Comment