JQuery Plugin: Efek Salju di Blogspot

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


Tata letak Blogger
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 :


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 Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger
TOP