Blog iTeam OS

Share code trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai

trang trí tết cho blog, trang trí website, trang trí đón tết đẹp cho blog, code trang trí website, hiệu ứng đẹp cho blog, trang trí tết cho website

Tết ở Việt Nam là một phong tục, một mỹ tục của người Việt từ ngàn đời nay. Tết là dịp người Việt tụ hội, sum họp, cúng gia tiên, dâng lễ thánh thần, ăn uống và vui vẻ quây quần bên nhau.

Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai
Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai

Năm cũ sắp qua, năm mới sắp đến, mình xin gửi lời chúc tốt đẹp nhất đến tất cả khách hàng và độc giả của iTeam OS, đã theo dõi và ủng hộ cũng như tin tưởng sử dụng dịch vụ của iTeam OS trong suốt thời gian qua.

Hôm nay, mình sẽ hướng dẫn các bạn cách trang trí blog để đón tết thật đẹp và đơn giản bằng hình ảnh câu đối, cành mai,... cùng theo dõi ngay nào!

Các bước thực hiện

Bước 1: Thêm CSS cố định 2 bên

.codepro-tet-left{position:fixed;top:0;left:0;z-index:9999}
.codepro-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:1024px){.codepro-tet-left,.codepro-tet-right{display:none!important}}

Bước 2: Thêm phần hiển thị vào trước </body>, hình ảnh câu đối hoặc cành mai:

Trang trí đón tết cho blog/website bằng hình ảnh câu đối
Trang trí đón tết cho blog/website bằng hình ảnh câu đối/td>
<a class="codepro-tet-left" href="https://www.hoan.name.vn/2022/12/trang-tri-don-tet-cho-blog-website.html"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj6Nei172zHfYxuV3Nqg89VfuurktxBnSunG7znN3d3FUBSDU7wQ7uM9kzdSyYT5S0BNzIWBeta6tPvwSNXQARmOAgb1Ol5pWtH8i8dPtDTSBGkgzQT52gh3cMzY1IuM1geDkrIW29KTs/s0/nam-moi-hanh-phuc-binh-an-den.png" style="width:160px;"/></a>
<a class="codepro-tet-right" href="https://www.hoan.name.vn/2022/12/trang-tri-don-tet-cho-blog-website.html"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPz03rL1VYbPfYter3lXF1Onq9nxx27Hz3bgdLIcdFed0KhG2tUQs70X0A2WIQ_Tgxq1j8y5vC95tzt0ZLdYtw8nAgq33-GmuA1xZIeO2YknM9E_jpM3PZEcFlYkMWuh_2Y9KUCpulS9A/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png" style="width:160px;"/></a>
Trang trí đón tết cho blog/ website bằng hình ảnh cành mai
Trang trí đón tết cho blog/ website bằng hình ảnh cành mai
<a class="codepro-tet-left" href="https://www.hoan.name.vn/2022/12/trang-tri-don-tet-cho-blog-website.html"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcgcVKjA6kTy1IKVnD_yR0ePBtRZvUQtPLy2sA96rs9WBV9AEY7KkEw62y8rPWA_GdQFYwGQswVQr5D5FbV8N3Hz1iUN6kF028UugTx2zcMKvYVvgcHEcI1TOaNeyfKdhjVNlLX2ehCqw/s0/canh-mai-ben-trai.png" style="width:160px;"/></a>
<a class="codepro-tet-right" href="https://www.hoan.name.vn/2022/12/trang-tri-don-tet-cho-blog-website.html"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwlLygdcboAumJYQT1tXadBcPJPr_KdA_8yLvIlB-pqPCs4-mpQqdW8q4cKLKkv6a7KXZHcWRlWkMowaSZoaIubaEUyi9Vuwb8DZ2LwUm_2A_NKtuJi-Uf1muIvHZo5hdB5Cv0_Lqow8/s0/canh-mai-ben-phai.png" style="width:160px;"/></a>

Bước 3: Lưu lại và tận hưởng thành quả!

Lưu ý: Để tránh nội dung bị tre phủ, hình ảnh sẽ chỉ hiển thị trên màn hình có kích thước lớn!

Hiệu ứng pháo hoa

Ai thích pháo hoa thì thêm vào trước </body>

<script type="text/javascript">
var bits=90;var speed=33;var bangs=7;var colours=new Array("#03f","#f03","#fff","#f7efa1","#0cf","#f93","#f0c","#fff");var bangheight=new Array();var intensity=new Array();var colour=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var swide=800;var shigh=600;var boddie;window.onload=function(){if(document.getElementById){var i;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(i=0;i<bangs;i++){write_fire(i);launch(i);setInterval('stepthrough('+i+')',speed);}}}
function write_fire(N){var i,rlef,rdow;stars[N+'r']=createDiv('|',12);boddie.appendChild(stars[N+'r']);for(i=bits*N;i<bits+bits*N;i++){stars[i]=createDiv('*',13);boddie.appendChild(stars[i]);}}
function createDiv(char,size){var div=document.createElement("div");div.style.font=size+"px monospace";div.style.position="absolute";div.style.backgroundColor="transparent";div.appendChild(document.createTextNode(char));return(div);}
function launch(N){colour[N]=Math.floor(Math.random()*colours.length);Xpos[N+"r"]=swide*0.5;Ypos[N+"r"]=shigh-5;bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];if(dX[N+"r"]>1.25)stars[N+"r"].firstChild.nodeValue="/";else if(dX[N+"r"]<-1.25)stars[N+"r"].firstChild.nodeValue="\\";else stars[N+"r"].firstChild.nodeValue="|";stars[N+"r"].style.color=colours[colour[N]];}
function bang(N){var i,Z,A=0;for(i=bits*N;i<bits+bits*N;i++){Z=stars[i].style;Z.left=Xpos[i]+"px";Z.top=Ypos[i]+"px";if(decay[i])decay[i]--;else A++;if(decay[i]==15)Z.fontSize="10px";else if(decay[i]==7)Z.fontSize="2px";else if(decay[i]==1)Z.visibility="hidden";Xpos[i]+=dX[i];Ypos[i]+=(dY[i]+=1.25/intensity[N]);}
if(A!=bits)setTimeout("bang("+N+")",speed);}
function stepthrough(N){var i,M,Z;var oldx=Xpos[N+"r"];var oldy=Ypos[N+"r"];Xpos[N+"r"]+=dX[N+"r"];Ypos[N+"r"]-=4;if(Ypos[N+"r"]<bangheight[N]){M=Math.floor(Math.random()*3*colours.length);intensity[N]=5+Math.random()*4;for(i=N*bits;i<bits+bits*N;i++){Xpos[i]=Xpos[N+"r"];Ypos[i]=Ypos[N+"r"];dY[i]=(Math.random()-0.5)*intensity[N];dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;decay[i]=25+Math.floor(Math.random()*25);Z=stars[i];if(M<colours.length)Z.style.color=colours[i%2?colour[N]:M];else if(M<2*colours.length)Z.style.color=colours[colour[N]];else Z.style.color=colours[i%colours.length];Z.style.fontSize="20px";Z.style.visibility="visible";}
bang(N);launch(N);}
stars[N+"r"].style.left=oldx+"px";stars[N+"r"].style.top=oldy+"px";}
window.onresize=set_width;function set_width(){var sw_min=999999;var sh_min=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)sw_min=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)sh_min=document.documentElement.clientHeight;}
if(typeof(self.innerWidth)!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<sw_min)sw_min=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<sh_min)sh_min=self.innerHeight;}
if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<sw_min)sw_min=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<sh_min)sh_min=document.body.clientHeight;}
if(sw_min==999999||sh_min==999999){sw_min=800;sh_min=600;}
swide=sw_min;shigh=sh_min;}

</script>

Lời kết

Trên đây là bộ code và hướng dẫn trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!


Truy cập Bypass Google Account APK để tải file APK nhé