JQuery Plugin: Efek Salju di Blogspot

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).

Masuk ke halaman Tata Letak

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 :

Download Files

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 :

Property

Deskripsi

minSize

Defaultnya 10, Minimal jumlah butiran saljunya

maxSize

Defaultnya 20, Maksimal jumlah butiran saljunya

newOn

Defaultnya 500, frekuensi munculnya salju baru dalam milidetik

flakeColor

Defaulnya #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 : Workshop ~ JQuery Snow Falling Plugin

Satank Mkr