JQuery Plugin: Efek Salju di Blogspot

By Fajar Tri Utomo , At 8:32 PM , Has 2 Comment
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
Fajar Tri Utomo
About
JQuery Plugin: Efek Salju di Blogspot - Written By Fajar Tri Utomo , Published At 8:32 PM, Categorized As Blog , Tutorial . And Has 2 Comment
Bck
Cancel Reply

Info Sites

Flag Counter

Like Fans Page

Followers

Copyright ©2014 SMK Islam Sudirman 2 Ambarawa
All Rights Reserved
Published By SMK Islam Sudirman 2 Ambarawa
Powered by Blogger