Chia sẻ code trang trí tết 2022 cho blog/website độc đáo, hấp dẫn

Nhằm tạo không khí vui tươi và phấn khởi, chào đón năm mới 2022. Hôm nay ReLub xin chia sẻ đến các bạn code trang trí tết 2022 cho blog/website độc đáo, hấp dẫn được ReLub sưu tầm và chia sẻ.

Gần đến Tết, chắc hẳn ai cũng muốn trang web của mình có chút màu mè, đẹp hơn, mới mẻ hơn. Với những đoạn code mình sắp chia sẻ dưới đây, bạn dễ dàng trang trí cho web của mình để đón tết 2022.

{tocify} $title={Nội dung bài viết}

Hình ảnh câu đối, cành mai, cành đào

Chỉ với vài dòng code đơn giản, bạn chỉ việc copy - past là đã có thể trang trí tết 2022 cho blog/website của mình. Đây cũng là code mà trang của mình đang dùng.

Dạng 1

Để sử dụng bạn copy đoạn code dưới đây và dán sau ~~/body~~

<a class='relub-tet-left' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJGN774921LrOiumFgSjXzL3vXXVMTqnud8ogEfVHJ01jaMZYlvfpWPU-QIr0tEcDcH7MASOEWQRcni65EWRynFCyqXqiROpwj9LByLYnvso0kZI4Ki-reznPEiwzPhELZmtuVQYpmKUp/s0/nam-moi-hanh-phuc-binh-an-den.png' style='width:140px;'/></a>
<a class='relub-tet-right' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXX6dSghMzg5dsIO0ICVo2BFNZc_WIPL4Dkxybn2s4mQceNdXxu7hqV7v0QR_FK15FPg4ImMawbSHB6uTpEfNUgC_JHnb377Kmq9Vf-h-w-Li8f6tI5P_14fsEcyIxfgP4IwT7PXn3xm3M/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png' style='width:140px;'/></a>
<style>
.relub-tet-left{position:fixed;top:0;left:0;z-index:9999}
.relub-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:1024px){.relub-tet-left,.relub-tet-right{display:none!important}}
</style> {codeBox}

Dạng 2

Để sử dụng bạn copy đoạn code dưới đây và dán sau ~~/body~~

<a class='relub-tet-left' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Ntx9bbMxQ2GqhPHsIA3H_v1OS8MXRFbGhHhJEK21eyOE0rUSal_gIxTKDof-tWDhshA7iFGMbOD5uGUNTNQ2MwSeX37FlO1wovPWKaTvjwjOxqH6mYJGdwKH_3evR7LlXbSlmiu8NUHw/s0/nam-moi-hanh-phuc-binh-an-den.png' style='width:140px;'/></a>
<a class='relub-tet-right' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28xMFA7_Kk17F4hljjMGqOIaIA60kCmPnIKtQ9bqV5Yfx8bbMag5FX1c50j1HXfocRMF6E66Ij-GgRGCYjAc6aYjK9GC3Wy1C8w-ek5y2ci0ESGZ_1e179OOuljRe90ERl5n8upaeuyvX/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png' style='width:140px;'/></a>
<style>
.relub-tet-left{position:fixed;top:0;left:0;z-index:9999}
.relub-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:1024px){.relub-tet-left,.relub-tet-right{display:none!important}}
</style> {codeBox}

Dạng 3

Để sử dụng bạn copy đoạn code dưới đây và dán sau ~~/body~~

<a class='relub-tet-left' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hMNVk0HlSR_jS09_-GZCTyxLBzQR5bAH1EbTVeb6lyazp6gk5MRZJHhsM8Hu8LKipe_NxaSGVOjmYhuOp9JQMJXg3YuatM5eDKeCK5Ib89siDMIVhGrAXUVnJmB7x9qXag6_jZ2Vuqbe/s0/canh-mai-ben-trai.png' style='width:140px;'/></a>
<a class='relub-tet-right' href='#'><img alt='Chúc mừng năm mới' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1aSrgTu5SvpCKyj9le-OcHIDJf9Hdp4xAy58QnFX25b4l9RjK2d6P1lMXVwErmrRW8q0jecZZh7jxIFKDgXo6jkjWmCsk46jDkRGJySQNSTC1gnCRSMDXMwygdybamjr7uxgRkMBXpKr/s0/canh-mai-ben-phai.png' style='width:140px;'/></a>
<style>
.relub-tet-left{position:fixed;top:0;left:0;z-index:9999}
.relub-tet-right{position:fixed;top:0;right:0;z-index:9999}
@media(max-width:1024px){.relub-tet-left,.relub-tet-right{display:none!important}}</style> {codeBox}

Popup Happy New Year có nhạc

Bước 1: Đăng nhập vào Blogger -> Bố cục -> Tiện ích HTML/Javascript và chèn đoạn code phía dưới vào

<style>
@-webkit-keyframes hue { 100% { -webkit-filter:hue-rotate(360deg); }} .AT-new-year{ position: fixed; background-image: url('https://cdn.statically.io/img/1.bp.blogspot.com/-iT8SkVmVQf8/X-CNYZtQyFI/AAAAAAAADPc/HWj3qmXbqIMB0IiUHJ15Eep98GAaDLDQQCLcBGAsYHQ/s0/pngtree-festive-2019-pig-new-year-background-design-display-boardspring-festival-image_74331.jpg'); background-size:cover;-webkit-animation:hue 1s linear infinite; z-index: 50; align-items: center; max-width: 500px; max-height: 300px; border-radius: 5px; box-shadow: 0 6px 18px 0 rgba(9,32,76,.035); display: flex; padding: 12px 15px 12px 12px; left: 50%;box-sizing: border-box;transform: translate(-50%, -100%); top: 70%;width: 100%; height:100%;text-align: center;border: 4px solid #fefefe; } .AT-new-year:before{ content: ""; background-image: url('https://cdn.statically.io/img/1.bp.blogspot.com/-IELKsnCdJ_E/X-CNUytCXVI/AAAAAAAADPU/ajvjFLDFEbE8qCFuQLn0Z93HR6NymMpOwCLcBGAsYHQ/s0/giphy.gif'); background-size:cover; width: 100%; height:100%; opacity: 0.1; } .AT-close svg { width: 35px; height: 35px; fill: #fff; position: absolute; top: 4px; right: 8px; } .text-content{ z-index: 2; color: #fff; position: absolute; display:block; align-items: center;width: 100%; justify-content: center;padding-bottom: 42px; } .title2 { font-size: 34px; font-weight: 800;display:block; text-align: center; } .title2x{ font-size: 68px; font-weight: 800; text-align: center;display:block;text-shadow: 4px 4px #222, 7px 5px #ffff00; } .subtext{ font-size: 12px;display:block;padding-top:12px;font-family: 'Bangers', cursive; } .player-bottom { display:block;align-items: center;text-align: center;justify-content: center;} audio{height:32px; width: 250px; position: fixed; top: 92%; left: 52%; display: flex;flex-grow: 1; transform: translate(-50%, -100%); }
</style> {codeBox}

Bước 2: Vào Chủ đề > Chỉnh sửa HTML và tìm đến thẻ ~~/body~~ và chèn đoạn code sau lên trên nó

<b:if cond='data:view.isHomepage'>
<div class='AT-new-year' id='746427'> <div class='AT-close' onclick='document.getElementById("746427").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='text-content'> <div class='title2'> HAPPY NEW YEAR </div> <div class='title2x'> 2021 </div> <div class='subtext'> Mong chờ những cuộc phiêu lưu mới. </div> </div> <div class='player-bottom'> <audio autoplay='' controls=''> <source src='https://www.tones7.com/media/happy_new_year281212.mp3' type='audio/mpeg'/> </audio> </div> </div>
</b:if> {codeBox}

Bước 3: Lưu lại và tận hưởng kết quả.

Background trang trí tết đẹp

Bạn đừng thấy ảnh demo như trên mà sợ, nó chẳng có code gì nhiều cả. Làm theo mình nhé!

Copy đoạn code dưới đây và dán vào ~~/head~~

<style>#outer-wrapper {background:url(https://i.imgur.com/NZh5sJb.png) no-repeat center fixed;background-size:cover;background-color: #3333330f;}</style> {codeBox}

Chỗ mình tô màu bên trên bạn hãy sử dụng F12 để tự kiểm tra blog của mình là phần tử gì nhé. Ở đây mình demo trên template LiteSpot. Đối với template khác có thể là body

Hiệu ứng hoa mai vàng rơi

Bên cạnh các hiệu ứng bong bóng, hiệu ứng trái tim khi nhấp chuột,... thì khi đến tết không thể nào không nhắc đến hiệu ứng hoa mai vàng rơi.

Bước 1: Đăng nhập vào Blogger -> Chỉnh sửa HTML và chèn đoạn code phía dưới vào ~~/head~~

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0weLNwqqGkS6yhj3BUSN8sxMuGELD0B1DbgpAXsCESXeDHzAl8dpEqW_5OMB1lwHarDLbXflHKoa5962zAy-PpVAoJCHowhpi2OD7zGfZcal5xFqCV1Mp8Q0tF_IU6oCJ9mp5U_fK-w/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
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;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script> {codeBox}

Bước 2: Lưu lại và tận hưởng kết quả.

Hiệu ứng pháo hoa

Bước 1: Đăng nhập vào Blogger -> Chỉnh sửa HTML và chèn đoạn code phía dưới vào ~~/body~~

<script type='text/javascript'>
//<![CDATA[
// Copy Text
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> {codeBox}

Bước 2: Lưu lại và tận hưởng kết quả.

Thêm nhạc nền tết tự động phát cho website/blogger

Bạn có thể xem demo tại web của mình, để sử dụng bạn chèn đoạn code bên dưới trên thẻ /body

<audio autoplay='true'>
<source src='https://drive.google.com/uc?export=download&id=10RYPgmH4t_gexuiriBrMAKrJK-eiBD78' type='audio/mpeg'/>
</audio> {codeBox}

Nếu bạn không thích bài hát này, có thể thay đổi bằng bài hát khác bằng cách đổi link trên. Để làm được bạn cần up file mp3 lên GG Drive sau đó Direct Link. Nếu bạn không chuyên code thì hãy để mặc định dùng trong dịp Tết này nhé!

Lời kết

Trên đây là toàn bộ những chia sẻ của mình về code trang trí tết 2022 cho blog/website mà mình sưu tầm được. Các bạn hãy thử trang trí web của mình bằng những code mà mình chia sẻ để xem có gì đẹp hơn mặc định nhé! Nếu các bạn có thắc mắc về vấn đề code trang trí tết thì có thể để lại bình luận bên dưới mình sẽ giải đáp sớm nhất có thể. Chúc các bạn thành công.