Hướng dẫn cài đặt code hiệu ứng hoa mai, hoa đào rơi cho blogspot/blogger

Trang trí blog mỗi dịp tết nguyên đán cho blogspot các bạn có rất nhiều lựa chọn như sử dụng banner câu đối, pháo hoa...hoặc sử dụng code tạo hiệu ứng hoa mai rơi trên blogspot cũng là một lựa chọn không tồi.

Hiệu ứng hoa mai rơi có 2 loại code là sử dụng javascript hoặc chỉ với css3. Với code chỉ với css sẽ cải thiện được tốc độ load của blog. Nếu bạn có nhu cầu trang trí blog của mình nhân dịp tết nguyên đán thì có thể lấy dùng ngay.

Hướng dẫn cài đặt code hiệu ứng hoa mai rơi cho blogspot/blogger

tạo hiệu ứng hoa mai rơi cho blogspot

Code hiệu ứng hoa mai rơi với javascript cho blogspot

Có hai code:
Code 1 dễ áp dụng,nhẹ nhàng nhưng sự bảng lảng của cánh hoa không được đẹp lắm.
DEMO
Code 2 hơi nặng nhưng hoa rơi rất đẹp.
DEMO

Hướng dẫn cài đặt code hiệu ứng hoa mai rơi cho blogspot

Code 1

Với code này bạn vào bố cục và tiến hành thêm một tiện ích javascript/HTML dán code bên dưới vào và lưu lại là xong hoặc dán đoạn code vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
var SNOW_Picture="http://1.bp.blogspot.com/-aZQXzUqSw5E/VKdQ-NZEaxI/AAAAAAAAB9U/3Cj3b3PLygk/s1600/hoa-mai.png";//Bông hoa mai
var SNOW_no=10;//Số lượng bông hoa mai rơi
var SNOW_browser_IE_NS=(document.body.clientHeight)?1:0;
var SNOW_browser_MOZ=(self.innerWidth)?1:0;
var SNOW_browser_IE7=(document.documentElement.clientHeight)?1:0;
var SNOW_Time;
var SNOW_dx,SNOW_xp,SNOW_yp;
var SNOW_am,SNOW_stx,SNOW_sty;
var i,SNOW_Browser_Width,SNOW_Browser_Height;if(SNOW_browser_IE_NS){SNOW_Browser_Width=document.body.clientWidth;SNOW_Browser_Height=document.body.clientHeight;}else{if(SNOW_browser_MOZ){SNOW_Browser_Width=self.innerWidth-20;SNOW_Browser_Height=self.innerHeight;}else{if(SNOW_browser_IE7){SNOW_Browser_Width=document.documentElement.clientWidth;SNOW_Browser_Height=document.documentElement.clientHeight;}}}SNOW_dx=new Array();SNOW_xp=new Array();SNOW_yp=new Array();SNOW_am=new Array();SNOW_stx=new Array();SNOW_sty=new Array();for(i=0;i<SNOW_no;++i){SNOW_dx[i]=0;SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-50);SNOW_yp[i]=Math.random()*SNOW_Browser_Height;SNOW_am[i]=Math.random()*20;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();if(i==0){document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>
');}else{document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>
');}}function SNOW_Weather(){for(i=0;i<SNOW_no;++i){SNOW_yp[i]+=SNOW_sty[i];if(SNOW_yp[i]>SNOW_Browser_Height-50){SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);SNOW_yp[i]=0;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();}SNOW_dx[i]+=SNOW_stx[i];document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i]+SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";}SNOW_Time=setTimeout("SNOW_Weather()",20);}SNOW_Weather();
//]]>
</script>

Code 2

Với code này bạn cần vào chỉnh sửa HTML trong mẫu và dán đoạn code bên dưới vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
function flakeFall(){if(!getRefToDivNest("snFlkDiv0")){return}var e=0,t=0,n=0,r=0;if(typeof window.innerWidth=="number"){e=window.innerWidth;t=window.innerHeight}else{if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){e=document.documentElement.clientWidth;t=document.documentElement.clientHeight}else{if(document.body&&(document.body.clientWidth||document.body.clientHeight)){e=document.body.clientWidth;t=document.body.clientHeight}}}if(typeof window.pageYOffset=="number"){n=pageYOffset;r=pageXOffset}else{if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){n=document.body.scrollTop;r=document.body.scrollLeft}else{if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){n=document.documentElement.scrollTop;r=document.documentElement.scrollLeft}}}for(var i=0;i<numFlakes;i++){if(ycoords[i]*t>t-pictureHeight){ycoords[i]=0}var s=getRefToDivNest("snFlkDiv"+i);if(!s){return}if(s.style){s=s.style}var o=document.childNodes?"px":0;s.top=Math.round(ycoords[i]*t)+n+o;s.left=Math.round(xcoords[i]*e-pictureWidth/2+e/((numFlakes+1)*4)*(Math.sin(lrFlakes*ycoords[i])-Math.sin(3*lrFlakes*ycoords[i])))+r+o;ycoords[i]+=downSpeed}}function getRefToDivNest(e){if(document.layers){return document.layers[e]}if(document[e]){return document[e]}if(document.getElementById){return document.getElementById(e)}if(document.all){return document.all[e]}return false}var pictureSrc="http://1.bp.blogspot.com/-aZQXzUqSw5E/VKdQ-NZEaxI/AAAAAAAAB9U/3Cj3b3PLygk/s1600/hoa-mai.png";var pictureWidth=20;var pictureHeight=20;var numFlakes=10;var downSpeed=.01;var lrFlakes=10;if(typeof numFlakes!="number"||Math.round(numFlakes)!=numFlakes||numFlakes<1){numFlakes=10}for(var x=0;x<numFlakes;x++){if(document.layers){document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>')}else{document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>')}}var xcoords=new Array,ycoords=new Array,snFlkTemp;for(var x=0;x<numFlakes;x++){xcoords[x]=(x+1)/(numFlakes+1);do{snFlkTemp=Math.round((numFlakes-1)*Math.random())}while(typeof ycoords[snFlkTemp]=="number");ycoords[snFlkTemp]=x/numFlakes}window.setInterval("flakeFall();",100)//]]>
</script>

Bạn nào thích hoa đào thì tìm cánh hoa đào png thay thế vào link ảnh trong code hoặc dùng tạm

Code tạo hiệu ứng hoa mai rơi cho blogspot

Bổ sung thêm hàng

Code 3

Đây là code hoa mai rơi với nhiều loại cánh hoa cụ thể là hình ảnh:
- 1 bông hoa mai
- Cánh hoa mai lớn
- Cánh hoa mai nhỏ

<script type='text/javascript'>
//<![CDATA[
Date.now||(Date.now=function(){return(new Date).getTime()}),function(){"use strict";for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var s=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(s+16,e);return setTimeout(function(){t(s=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}(),function(t){t.snowfall=function(e,i){function s(s,n,a,r){this.x=s,this.y=n,this.size=a,this.speed=r,this.step=0,this.stepSize=h(1,10)/100,i.collection&&(this.target=m[h(0,m.length-1)]);var p=null;i.image?(p=document.createElement("img"),p.src=i.image):(p=document.createElement("div"),t(p).css({background:i.flakeColor})),t(p).attr({"class":"snowfall-flakes"}).css({width:this.size,height:this.size,position:i.flakePosition,top:this.y,left:this.x,fontSize:0,zIndex:i.flakeIndex}),t(e).get(0).tagName===t(document).get(0).tagName?(t("body").append(t(p)),e=t("body")):t(e).append(t(p)),this.element=p,this.update=function(){if(this.y+=this.speed,this.y>l-(this.size+6)&&this.reset(),this.element.style.top=this.y+"px",this.element.style.left=this.x+"px",this.step+=this.stepSize,y===!1?this.x+=Math.cos(this.step):this.x+=y+Math.cos(this.step),i.collection&&this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var t=this.target.element.getContext("2d"),e=this.x-this.target.x,s=this.y-this.target.y,n=this.target.colData;if(void 0!==n[parseInt(e)][parseInt(s+this.speed+this.size)]||s+this.speed+this.size>this.target.height)if(s+this.speed+this.size>this.target.height){for(;s+this.speed+this.size>this.target.height&&this.speed>0;)this.speed*=.5;t.fillStyle=o.flakeColor,void 0==n[parseInt(e)][parseInt(s+this.speed+this.size)]?(n[parseInt(e)][parseInt(s+this.speed+this.size)]=1,t.fillRect(e,s+this.speed+this.size,this.size,this.size)):(n[parseInt(e)][parseInt(s+this.speed)]=1,t.fillRect(e,s+this.speed,this.size,this.size)),this.reset()}else this.speed=1,this.stepSize=0,parseInt(e)+1<this.target.width&&void 0==n[parseInt(e)+1][parseInt(s)+1]?this.x++:parseInt(e)-1>0&&void 0==n[parseInt(e)-1][parseInt(s)+1]?this.x--:(t.fillStyle=o.flakeColor,t.fillRect(e,s,this.size,this.size),n[parseInt(e)][parseInt(s)]=1,this.reset())}(this.x+this.size>d-c||this.x<c)&&this.reset()},this.reset=function(){this.y=0,this.x=h(c,d-c),this.stepSize=h(1,10)/100,this.size=h(100*i.minSize,100*i.maxSize)/100,this.element.style.width=this.size+"px",this.element.style.height=this.size+"px",this.speed=h(i.minSpeed,i.maxSpeed)}}function n(){for(r=0;r<a.length;r+=1)a[r].update();p=requestAnimationFrame(function(){n()})}var a=[],o={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:!1,shadow:!1,collection:!1,collectionHeight:40,deviceorientation:!1},i=t.extend(o,i),h=function(t,e){return Math.round(t+Math.random()*(e-t))};t(e).data("snowfall",this);var r=0,l=t(e).height(),d=t(e).width(),c=0,p=0;if(i.collection!==!1){var f=document.createElement("canvas");if(f.getContext&&f.getContext("2d"))for(var m=[],w=t(i.collection),g=i.collectionHeight,r=0;r<w.length;r++){var u=w[r].getBoundingClientRect(),x=t("<canvas/>",{"class":"snowfall-canvas"}),z=[];if(u.top-g>0){t("body").append(x),x.css({position:i.flakePosition,left:u.left+"px",top:u.top-g+"px"}).prop({width:u.width,height:g});for(var v=0;v<u.width;v++)z[v]=[];m.push({element:x.get(0),x:u.left,y:u.top-g,width:u.width,height:g,colData:z})}}else i.collection=!1}for(t(e).get(0).tagName===t(document).get(0).tagName&&(c=25),t(window).bind("resize",function(){l=t(e)[0].clientHeight,d=t(e)[0].offsetWidth}),r=0;r<i.flakeCount;r+=1)a.push(new s(h(c,d-c),h(0,l),h(100*i.minSize,100*i.maxSize)/100,h(i.minSpeed,i.maxSpeed)));i.round&&t(".snowfall-flakes").css({"-moz-border-radius":i.maxSize,"-webkit-border-radius":i.maxSize,"border-radius":i.maxSize}),i.shadow&&t(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"});var y=!1;i.deviceorientation&&t(window).bind("deviceorientation",function(t){y=.1*t.originalEvent.gamma}),n(),this.clear=function(){t(".snowfall-canvas").remove(),t(e).children(".snowfall-flakes").remove(),cancelAnimationFrame(p)}},t.fn.snowfall=function(e){return"object"==typeof e||void 0==e?this.each(function(i){new t.snowfall(this,e)}):"string"==typeof e?this.each(function(e){var i=t(this).data("snowfall");i&&i.clear()}):void 0}}(jQuery);

$(document).ready(function(){
  $(document).snowfall({image :"https://4.bp.blogspot.com/-Pz9gplYXnVg/WHeI3NW2o0I/AAAAAAAACfM/bQhjTtpeZeIC2vMKRYN6u5do6HppGIkwACLcB/s1600/hoamai1.png", minSize: 10, maxSize:32, flakeCount: 25});
  $(document).snowfall({image :"https://1.bp.blogspot.com/-groQ9fqAtWk/WHeI6IN-bUI/AAAAAAAACfU/RC2RXr75qDAZKOsmSEqNeb_OyhFQ5gH8ACLcB/s1600/hoamai2.png", minSize: 10, maxSize:32, flakeCount: 20});
  $(document).snowfall({image :"https://2.bp.blogspot.com/-4npl186jl6A/WHeI3c_516I/AAAAAAAACfQ/9DbJuPWlz9I1i7836YHLoJR_NSAFDn3fACLcB/s1600/hoamai3.png", minSize: 10, maxSize:32, flakeCount: 20});
});
//]]>
</script>

Bạn có thể tải hoa và cánh hoa về úp lên blog cho riêng mình.

Code hiệu ứng cánh hoa đào rơi

Với code này bạn cần vào chỉnh sửa HTML trong mẫu và dán đoạn code bên dưới vào trước thẻ </body>
DEMO

<script>/*<![CDATA[*/
         document.addEventListener("DOMContentLoaded",()=>{const body=document.getElementsByTagName("body");body[0].append(document.createElement("canvas"));const canvas=document.querySelector("canvas");canvas.style.position='fixed';canvas.style.top='0';canvas.style.pointerEvents='none';canvas.width=window.innerWidth;canvas.height=window.innerHeight;const ctx=canvas.getContext("2d");const TOTAL=10;const petalArray=[];const petalImg=new Image();petalImg.src="https://lh3.googleusercontent.com/-oZqWOoJGmnk/ZdB2mPmwWDI/AAAAAAAAEoc/mwk83U3pgp4eD0r_dWLZI45nPnGiQpTjgCNcBGAsYHQ/s0/hd.png";petalImg.addEventListener("load",()=>{for(let i=0;i<TOTAL;i++){petalArray.push(new Petal());}
render();});function render(){ctx.clearRect(0,0,canvas.width,canvas.height);petalArray.forEach((petal)=>petal.animate());window.requestAnimationFrame(render);}
window.addEventListener("resize",()=>{canvas.width=window.innerWidth;canvas.height=window.innerHeight;});let mouseX=0;class Petal{constructor(){this.x=Math.random()*canvas.width;this.y=Math.random()*canvas.height*2-canvas.height;this.w=25+Math.random()*15;this.h=20+Math.random()*10;this.opacity=this.w/40;this.flip=Math.random();this.xSpeed=0.5+Math.random()*0.5;this.ySpeed=0.5+Math.random()*0.3;this.flipSpeed=Math.random()*0.03;}
draw(){if(this.y>canvas.height||this.x>canvas.width){this.x=-petalImg.width;this.y=Math.random()*canvas.height*2-canvas.height;this.xSpeed=0.5+Math.random()*0.5;this.ySpeed=0.5+Math.random()*0.3;this.flip=Math.random();}
ctx.globalAlpha=this.opacity;ctx.drawImage(petalImg,this.x,this.y,this.w*(0.6+Math.abs(Math.cos(this.flip))/3),this.h*(0.8+Math.abs(Math.sin(this.flip))/5));}
animate(){this.x+=this.xSpeed+mouseX*3;this.y+=this.ySpeed+mouseX*1;this.flip+=this.flipSpeed;this.draw();}}
undefined;});
     /*]]>*/</script>

Code hiệu ứng hoa mai rơi chỉ với CSS3 cho blogspot

DEMO
Cách cài đặt hiệu ứng này chỉ với việc dán code bên dưới vào trước thẻ </body>

<div class="snowflakes" aria-hidden="true">
  <div class="snowflake" style="font-size: 30px;">✿</div>
  <div class="snowflake">✿</div>
  <div class="snowflake" style="font-size: 40px;">✿</div>
  <div class="snowflake">✿</div>
  <div class="snowflake" style="font-size: 30px;">✿</div>
  <div class="snowflake" style="font-size: 22px;">✿</div>
  <div class="snowflake" style="font-size: 50px;">✿</div>
  <div class="snowflake" style="font-size: 20px;">✿</div>
  <div class="snowflake" style="font-size: 70px;">✿</div>
  <div class="snowflake" style="font-size: 20px;">✿</div>
</div>
<style>/*<![CDATA[*/
       @-webkit-keyframes snowflakes-fall
{
  0%
  {
    top: -10%
  }

  100%
  {
    top: 100%
  }
}

@-webkit-keyframes snowflakes-shake
{
  0%
  {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
  }

  50%
  {
    -webkit-transform: translateX(80px);
    transform: translateX(80px)
  }

  100%
  {
    -webkit-transform: translateX(0px);
    transform: translateX(0px)
  }
}

@keyframes snowflakes-fall
{
  0%
  {
    top: -10%
  }

  100%
  {
    top: 100%
  }
}

@keyframes snowflakes-shake
{
  0%
  {
    transform: translateX(0px)
  }

  50%
  {
    transform: translateX(80px)
  }

  100%
  {
    transform: translateX(0px)
  }
}

.snowflake
{
  color: yellow;
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running
}

.snowflake:nth-of-type(0)
{
  left: 1%;
  -webkit-animation-delay: 0s, 0s;
  animation-delay: 0s, 0s
}

.snowflake:nth-of-type(1)
{
  left: 10%;
  -webkit-animation-delay: 1s, 1s;
  animation-delay: 1s, 1s
}

.snowflake:nth-of-type(2)
{
  left: 20%;
  -webkit-animation-delay: 6s, .5s;
  animation-delay: 6s, .5s
}

.snowflake:nth-of-type(3)
{
  left: 30%;
  -webkit-animation-delay: 4s, 2s;
  animation-delay: 4s, 2s
}

.snowflake:nth-of-type(4)
{
  left: 40%;
  -webkit-animation-delay: 2s, 2s;
  animation-delay: 2s, 2s
}

.snowflake:nth-of-type(5)
{
  left: 50%;
  -webkit-animation-delay: 8s, 3s;
  animation-delay: 8s, 3s
}

.snowflake:nth-of-type(6)
{
  left: 60%;
  -webkit-animation-delay: 6s, 2s;
  animation-delay: 6s, 2s
}

.snowflake:nth-of-type(7)
{
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s;
  animation-delay: 2.5s, 1s
}

.snowflake:nth-of-type(8)
{
  left: 80%;
  -webkit-animation-delay: 1s, 0s;
  animation-delay: 1s, 0s
}

.snowflake:nth-of-type(9)
{
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s;
  animation-delay: 3s, 1.5s
}
     /*]]>*/</style>

🌸 Chúc vui vẻ!
Nếu có nhu cầu sử dụng pháo hoa tham khảo:
Tại đây , Tại đây và Tại đây.

Thủ thuật blogspot

Hướng dẫn cài đặt code hiệu ứng hoa mai, hoa đào rơi cho blogspot/blogger

Code hiệu ứng hoa mai rơi với javascript cho blogspot

Hướng dẫn cài đặt code hiệu ứng hoa mai rơi cho blogspot

Code 1

Code 2

Bổ sung thêm hàng

Code 3

Code hiệu ứng cánh hoa đào rơi

Code hiệu ứng hoa mai rơi chỉ với CSS3 cho blogspot

Post a Comment

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

Tạo safelink random tự động get link trên blog chính cho template không phải Plus UI v2.6

Thêm bài viết liên quan bên trong nội dung bài viết trên Blogspot

Sửa lỗi data:post.snippet không hiện summary trên blogspot

Thủ thuật blogspot®