Disini saya akan membagikan widget dimana sebelum nya juga saya pernah memposting hal serupa Jquery Countdown Spesial Happy New Year dimana yang ini agak sedikit berbeda. Pada versi yang sekarang ini saya telah merubah sedikit kode dari yang sebelumnya dimana waktu itu memang kurang mobile friendly menurut saya dan hanya berlaku pada halaman statis.
Namun jangan khawatir sudah saya perbaiki dan kalian cukup menaruh nya pada Layout editor blogger dengan menambahkan nya pada Widget HTML.
Sebenar nya membuat nya cukup mudah untuk kita buat sendiri karena saya menggunakan jquery Fireworks dan saya juga lupa author nya siapa.
Untuk cara memasang nya silahkan anda simak baik-baik tutorial berikut ini.
Pertama pastikan anda sudah terlebih dahulu memiliki Jquery v1.12.4 pada template namun apabila anda sudah memilikinya lanjut ke tahap berikut nya.
Sekarang anda masuk dulu ke blogger lalu pada menu pilih Layout.
setelah itu anda tambahkan widget HTML/JAVASCRIPT dan paste kan kode yang ada di bawah kedalam widget yang sudah anda buat tadi.
<style type="text/css">
/* Happy New Year CSS By Agiel Triono */
#happynew{text-align:center;font-size:150%;color:#fff}
#happynew > b{display:inline-block}
#happynew > b{padding:0 10px;width:auto;border:1px solid}
#happynew .aday{color:#2795EE}
#happynew .aday:after{content:' Day';color:#2795EE}
#happynew .ahour{color:#6CE890}
#happynew .ahour:after{content:' Hours';color:#6CE890}
#happynew .amin{color:#ffeb3b}
#happynew .amin:after{content:' Minute';color:#ffeb3b}
#happynew .asec{color:#ED6E55}
#happynew .asec:after{content:' Second';color:#ED6E55}
#backyear{font-family:'Roboto',sans-serif;background:transparent;display:block;position:relative;overflow:hidden;max-width:998px;margin:0 auto}
#backyear #horrayyy span{text-transform:uppercase}
#horrayyy{width:800px;height:100%;padding:10px;margin:0 auto;position:relative}
#happy-h4{font-size:350%;text-align:center;transition:all ease-in 2s;color:#F44336}
</style>
<!-- Happy New Year Start -->
<div id="backyear">
<div id="horrayyy">
<h4 id="happy-h4">Happy New Year !</h4>
</div>
<p id="happynew"></p>
</div>
<!-- Happy New Year End -->
<script type="text/javascript">
//<![CDATA[
/* Happy New Year JS By Agiel Triono */
var HappyNew=new Date("Jan 1, 2019 00:00:00").getTime();var x=setInterval(function(){var now=new Date().getTime();var distance=HappyNew-now;var days=Math.floor(distance/(1000*60*60*24));var hours=Math.floor((distance%(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((distance%(1000*60*60))/(1000*60));var seconds=Math.floor((distance%(1000*60))/1000);var sDay="aday";var sHour="ahour";var sMin="amin";var sSec="asec";document.getElementById("horrayyy").style.display='none';document.getElementById("happynew").innerHTML="<b class="+sDay+">"+days+"</b> <b class="+sHour+">"+hours+"</b> <b class="+sMin+">"+minutes+"</b> <b class="+sSec+">"+seconds+"</b>";if(distance<0){clearInterval(x);document.getElementById("happynew").innerHTML="Happy New Year !";document.getElementById("horrayyy").style.display='block';$('body').fireworks()}},1000);(function($){var MAX_ROCKETS=5,MAX_PARTICLES=500;var FUNCTIONS={'init':function(element){var jqe=$(element);if(jqe.data('fireworks_data')!==undefined){console.log('Looks like this element is already inited!');return}
var canvas=document.createElement('canvas'),canvas_buffer=document.createElement('canvas'),data={'element':element,'canvas':canvas,'context':canvas.getContext('2d'),'canvas_buffer':canvas_buffer,'context_buffer':canvas_buffer.getContext('2d'),'particles':[],'rockets':[]};if(jqe.css('position')==='static'){element.style.position='relative'}
element.appendChild(canvas);canvas.style.position='absolute';canvas.style.top='0px';canvas.style.bottom='0px';canvas.style.left='0px';canvas.style.right='0px';data.interval=setInterval(loop.bind(this,data),1000/50);jqe.data('fireworks_data',data)},'destroy':function(element){var jqe=$(element);if(jqe.data('fireworks_data')===undefined){console.log('Looks like this element is not yet inited!');return}
var data=jqe.data('fireworks_data');jqe.removeData('fireworks_data');clearInterval(data.interval);data.canvas.remove();data.element.style.position=''}};$.fn.fireworks=function(action){if(!action){action='init'}
this.each(function(){FUNCTIONS[action](this)});return this};function launch(data){if(data.rockets.length<MAX_ROCKETS){var rocket=new Rocket(data);data.rockets.push(rocket)}}
function loop(data){launch(data);if(data.canvas_width!=data.element.offsetWidth){data.canvas_width=data.canvas.width=data.canvas_buffer.width=data.element.offsetWidth}
if(data.canvas_height!=data.element.offsetHeight){data.canvas_height=data.canvas.height=data.canvas_buffer.height=data.element.offsetHeight}
data.context_buffer.clearRect(0,0,data.canvas.width,data.canvas.height);data.context_buffer.globalAlpha=0.9;data.context_buffer.drawImage(data.canvas,0,0);data.context.clearRect(0,0,data.canvas.width,data.canvas.height);data.context.drawImage(data.canvas_buffer,0,0);var existingRockets=[];data.rockets.forEach(function(rocket){rocket.update();rocket.render(data.context);var randomChance=rocket.pos.y<(data.canvas.height*2/3)?(Math.random()*100<=1):!1;if(rocket.pos.y<data.canvas.height/5||rocket.vel.y>=0||randomChance){rocket.explode(data)}else{existingRockets.push(rocket)}});data.rockets=existingRockets;var existingParticles=[];data.particles.forEach(function(particle){particle.update();if(particle.exists()){particle.render(data.context);existingParticles.push(particle)}});data.particles=existingParticles;while(data.particles.length>MAX_PARTICLES){data.particles.shift()}}
function Particle(pos){this.pos={x:pos?pos.x:0,y:pos?pos.y:0};this.vel={x:0,y:0};this.shrink=.97;this.size=2;this.resistance=1;this.gravity=0;this.flick=!1;this.alpha=1;this.fade=0;this.color=0}
Particle.prototype.update=function(){this.vel.x*=this.resistance;this.vel.y*=this.resistance;this.vel.y+=this.gravity;this.pos.x+=this.vel.x;this.pos.y+=this.vel.y;this.size*=this.shrink;this.alpha-=this.fade};Particle.prototype.render=function(c){if(!this.exists()){return}
c.save();c.globalCompositeOperation='lighter';var x=this.pos.x,y=this.pos.y,r=this.size/2;var gradient=c.createRadialGradient(x,y,0.1,x,y,r);gradient.addColorStop(0.1,"rgba(255,255,255,"+this.alpha+")");gradient.addColorStop(0.8,"hsla("+this.color+", 100%, 50%, "+this.alpha+")");gradient.addColorStop(1,"hsla("+this.color+", 100%, 50%, 0.1)");c.fillStyle=gradient;c.beginPath();c.arc(this.pos.x,this.pos.y,this.flick?Math.random()*this.size:this.size,0,Math.PI*2,!0);c.closePath();c.fill();c.restore()};Particle.prototype.exists=function(){return this.alpha>=0.1&&this.size>=1};function Rocket(data){Particle.apply(this,[{x:Math.random()*data.canvas.width*2/3+data.canvas.width/6,y:data.canvas.height}]);this.explosionColor=Math.floor(Math.random()*360/10)*10;this.vel.y=Math.random()*-3-4;this.vel.x=Math.random()*6-3;this.size=2;this.shrink=0.999;this.gravity=0.01}
Rocket.prototype=new Particle();Rocket.prototype.constructor=Rocket;Rocket.prototype.explode=function(data){var count=Math.random()*10+80;for(var i=0;i<count;i++){var particle=new Particle(this.pos);var angle=Math.random()*Math.PI*2;var speed=Math.cos(Math.random()*Math.PI/2)*15;particle.vel.x=Math.cos(angle)*speed;particle.vel.y=Math.sin(angle)*speed;particle.size=10;particle.gravity=0.2;particle.resistance=0.92;particle.shrink=Math.random()*0.05+0.93;particle.flick=!0;particle.color=this.explosionColor;data.particles.push(particle)}};Rocket.prototype.render=function(c){if(!this.exists()){return}
c.save();c.globalCompositeOperation='lighter';var x=this.pos.x,y=this.pos.y,r=this.size/2;var gradient=c.createRadialGradient(x,y,0.1,x,y,r);gradient.addColorStop(0.1,"rgba(255, 255, 255 ,"+this.alpha+")");gradient.addColorStop(0.2,"rgba(255, 180, 0, "+this.alpha+")");c.fillStyle=gradient;c.beginPath();c.arc(this.pos.x,this.pos.y,this.flick?Math.random()*this.size/2+this.size/2:this.size,0,Math.PI*2,!0);c.closePath();c.fill();c.restore()}}(jQuery))
//]]>
</script>Pengeditan :
untuk Jan 1, 2019 00:00:00 adalah tanggal hari perayaan tahun baru Jan adalah bulan dan dapat anda ganti misal Feb.
contoh : Jan,Feb,Mar,Apr,May,Aug,Sep,Oct,Nov.
Untuk 1 adalah tanggal menurut kalender mulai dari 1 - 30 namun setiap bulan memiliki tanggal yang berbeda.
Untuk 2019 menunjukan tahun yang akan datang misal apabila anda merencanakan ingin di gunakan untuk tahun 2020 mendatang tinggal ganti dengan tahun yang anda inginkan.
Untuk ini 00:00:00 jangan di ganti karena tahun baru menunjuk pada pukul 00.00 dini hari.
Oke dalam tahap ini anda sudah berhasil memasang Widget Happy New Year 2019 jika benar akan muncul pada widget yang sudah anda buat tadi.
Widget ini saya buat bertujuan untuk merayakan tahun baru 2019.
Tags:
JQUERY
