Terbaru

JQuery Plugin: Efek Salju di Blogspot

at Dec 3, 2012
Blog dengan efek akan sangat menarik. Nah kali ini saya akan membagikan Jquery Plugin untuk efek salju yang berjatuhan. Berbeda dengan plugin efek salju yang biasa, plugin ini memiliki 4 opsi pengaturan. Nah langsung saja.

Cara Pemasangan Efek Saljunya pada blogspot

  1. Meletakkan JQuery di dalam tag head/dalam elemen halaman HTML/JavaScript (Jika Sudah Ada Abaikan Tahap ini).
    .

    Pada tab Tata Letak/Layout kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Lalu masukkan kode di bawah (jika sudah ada pada template yang anda gunakan jangan tambahkan link ini)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

  2. Meletakkan JQuery Plugin Efek Salju.
    Setelah tahap diatas tambahkan Script berikut:
    <script type='text/javascript'>
    //<![CDATA[
    /**
     * jquery.snow - jQuery Snow Effect Plugin
     * Available under MIT licence
     * @version 1 (21. Jan 2012)
     * @author Ivan Lazarevic
     * @requires jQuery
     * @see http://workshop.rs
     */
     (function(a){a.fn.snow=function(b){var c=a('<div id="flake" />').css({position:"absolute",top:"-50px"}).html("&#10052;"),d=a(document).height(),e=a(document).width(),f={minSize:10,maxSize:20,newOn:500},b=a.extend({},f,b);var g=setInterval(function(){var f=Math.random()*e-100,g=.5+Math.random(),h=b.minSize+Math.random()*b.maxSize,i=d-40,j=f-100+Math.random()*200,k=d*10+Math.random()*5e3;c.clone().appendTo("body").css({left:f,opacity:g,"font-size":h}).animate({top:i,left:j,opacity:.2},k,"linear",function(){a(this).remove()})},b.newOn)}})(jQuery)
    //]]>
    </script>

    Peletakan JQuery Plugin Diatas yaitu dengan cara inline jika anda mempunyai akun google kode maka anda bisa dengan cara external.

    Plugin nya dapat di download di :
  3. Memanggil JQuery Plugin Efek Salju
    Tepat di bawah JQuery Plugin Efek Salju letakkan kode ini..
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready( function(){
            $.fn.snow();
    });
    //]]>
    </script>
  4. Susunan Lengkap kodenya seperti berikut.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    /**
     * jquery.snow - jQuery Snow Effect Plugin
     * Available under MIT licence
     * @version 1 (21. Jan 2012)
     * @author Ivan Lazarevic
     * @requires jQuery
     * @see http://workshop.rs
     */
     (function(a){a.fn.snow=function(b){var c=a('<div id="flake" />').css({position:"absolute",top:"-50px"}).html("&#10052;"),d=a(document).height(),e=a(document).width(),f={minSize:10,maxSize:20,newOn:500},b=a.extend({},f,b);var g=setInterval(function(){var f=Math.random()*e-100,g=.5+Math.random(),h=b.minSize+Math.random()*b.maxSize,i=d-40,j=f-100+Math.random()*200,k=d*10+Math.random()*5e3;c.clone().appendTo("body").css({left:f,opacity:g,"font-size":h}).animate({top:i,left:j,opacity:.2},k,"linear",function(){a(this).remove()})},b.newOn)}})(jQuery)
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready( function(){
            $.fn.snow();
    });
    //]]>
    </script>

  5. Opsi Settingan yang bisa digunakan :
    PropertyDeskripsi
    minSizeDefaultnya 10, Minimal jumlah butiran saljunya
    maxSizeDefaultnya 20, Maksimal jumlah butiran saljunya
    newOnDefaultnya 500, frekuensi munculnya salju baru dalam milidetik
    flakeColorDefaulnya #ffffff, Warna dari butiran saljunya.


contoh penggunaan opsi (Perubahan Tahapan 3)


<script type='text/javascript'>
//<![CDATA[
$(document).ready( function(){
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });
});
//]]>
</script>

Catatan: pengaturan frekuensi pada newOn dapat berpengaruh pada performa dari efek ataupun blog.

Sumber Code : http://workshop.rs/2012/01/jquery-snow-falling-plugin/
Design by MKRSite Copyright © 2012 ~ 2018 Powered by Blogger