Code trang trí Tết 2022 cho blog/website

Hi xin chào tất cả các bạn, lại là mình Nguyễn Phong Pro đây. Vậy là Tết sắp cận kề chúng ta rồi, vì vậy hôm nay Nguyễn Phong Pro sẽ chia sẻ cho các bạn một bộ code trang trí Tết mà mình sưu tầm được. Mời các bạn theo dõi bài viết nhé.

Code trang trí tết 2022 cho blog/website

Cách thực hiện

Các bạn chỉ cần copy các đoạn code dưới đây và dán vào trước </body>.

Hoa mai

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4LECv1sgdi5Kh5UB3S3dR0Bon5n-HL0HzXC9f0uqYIDDb84EVKy5nCYCGgDkboq0IrnKM60eY2eUle82FA0-eC4e89qFoLQ3mVmWKLAvjrONSr6TiCfZh756-x0RuPW29Jicy8tv4Lg/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web
var pictureWidth = 15; //Chiều rộng của hoa mai or đào
var pictureHeight = 15; //Chiều cao của hoa mai or đào
var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
var downSpeed = 0.01; //Tốc độ rơi của hoa
var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
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>

Popup Happy New Year

  • Bước 1: Đăng nhập vào Blogger --> Bố cục --> Tiện ích HTML/JAVASCRIPT rồi dán code dưới đây 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>
  • Bước 2: Vào phần chủ đề --> Chỉnh sửa HTML, dán toàn bộ code phía dưới lên trên </body>.
<b:if cond='data:view.isHomepage'>
<div class='AT-new-year' id='746427'> <div class='AT-close' onclick='document.getElementById(&quot;746427&quot;).style.display=&quot;none&quot;'><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> 

Bước 3: Lưu lại!

Hình ảnh câu đối, bánh chưng, ông đồ

Các bạn copy rồi dán vào trước </body> là được nhé.

<style type="text/css">body{padding-bottom:20px}</style><img style="position:fixed;z-index:9999;top:0;left:0;wight:300px; height: 400px;" src="https://imgur.com/KzJh7E6.png""/><img style="position:fixed;z-index:9999;top:0;right:0;wight:300px; height: 400px;" src="https://imgur.com/jDBBwDz.png"/><img style="position:fixed;z-index:9999;bottom:0px;left:0px" src="https://imgur.com/gvgEkIN.png"/>

Lời Kết

Trên đây là toàn bộ code trang trí Tết 2022 cho blog/website mà mình đã chia sẻ. Nếu có vấn đề về khiếu nại hay bản quyền vui lòng comment xuống dưới, chúc các bạn một ngày làm việc hiệu quả.

Copyright © Nguyễn Phong Pro