Share Code Đếm Ngược Đến Tết, Các Ngày Lễ Lớn
13.8.22
Cập nhật :
Add Comment
Cứ mỗi năm đến dịp gần tết là mọi người thường đi tìm các template hoặc code đếm ngược những ngày còn lại của Tết Nguyên đán: là dịp lễ đầu năm mới theo âm lịch của các dân tộc thuộc Vùng văn hóa Đông Á, gồm có Trung Quốc, Nhật Bản, Triều Tiên và Việt Nam.
Thời điểm này tuy cũng còn vài ngày nữa là tết rồi nhưng cũng share lại cho các bạn code đếm ngược đến tết, ngày lễ lớn hay ngày bạn thích( các bạn tùy chỉnh lại là ok) này để sử dụng hoặc lưu lại cho năm sau dùng cũng ok.
Widget đếm ngược tết cho Blogger
Dưới đây là đoạn code các bạn có thể chèn bất cứ nơi nào trong template để nó hiển thị hợp lý:
<b:if cond='data:blog.isMobile == "true" '><b:if cond='data:view.isHomepage'>
<div class='tet-event-wrapper'>
<div class='container'>
<div class='tet-event-left'>
<img src='https://i.ibb.co/1LcmBG1/hpnyatn.jpg'/>
<a class='enjoyevent' href='#comingsoon'>Tham gia events nhận templates</a>
</div>
<div class='tet-event-right'>
<div class='tetcontainer'>
<div class='balloon white'>
<div class='star-red'/>
<div class='face'>
<div class='eye'/>
<div class='mouth happy'/>
</div>
<div class='triangle'/>
<div class='string'/>
</div>
<div class='balloon red'>
<div class='star'/>
<div class='face'>
<div class='eye'/>
<div class='mouth happy'/>
</div>
<div class='triangle'/>
<div class='string'/>
</div>
<div class='balloon blue'>
<div class='star'/>
<div class='face'>
<div class='eye'/>
<div class='mouth happy'/>
</div>
<div class='triangle'/>
<div class='string'/>
</div>
<div id='timer'/>
<h1>Countdown to Tết Holiday 2023</h1>
</div>
</div>
</div>
</div>
<script id="rendered-js">const year=new Date().getFullYear();const tetHoliday=new Date("February 01, 2022 00:00:00").getTime();let timer=setInterval(function(){const today=new Date().getTime();const diff=tetHoliday-today;let days=Math.floor(diff/(1000*60*60*24));let hours=Math.floor(diff%(1000*60*60*24)/(1000*60*60));let minutes=Math.floor(diff%(1000*60*60)/(1000*60));let seconds=Math.floor(diff%(1000*60)/1000);document.getElementById("timer").innerHTML="<div class=\"days\"> \
<div class=\"numbers\">"+days+"</div>ngày</div> \
<div class=\"hours\"> \
<div class=\"numbers\">"+hours+"</div>giờ</div> \
<div class=\"minutes\"> \
<div class=\"numbers\">"+minutes+"</div>phút</div> \
<div class=\"seconds\"> \
<div class=\"numbers\">"+seconds+"</div>giây</div> \
</div>";},1000);</script>
<style>
#timer{color:#f6f4f3;text-align:center;text-transform:uppercase;font-family:"Lato",sans-serif;font-size:.7em;letter-spacing:5px;margin-top:25%}.days,.hours,.minutes,.seconds{display:inline-block;padding:20px;width:100px;border-radius:5px}.days{background:#ef2f3c}.hours{background:#f6f4f3;color:#183059}.minutes{background:#276fbf}.seconds{background:#f0a202}.numbers{font-family:"Montserrat",sans-serif;color:#183059;font-size:4em}.white{position:absolute;background:#f6f4f3;height:85px;width:75px;left:30%;top:2%}.white .triangle{border-bottom:14px solid #f6f4f3}.white .string{background:#f6f4f3;border:1px solid #f6f4f3}.red{position:absolute;background:#ef2f3c;left:18%;top:9%;height:65px;width:70px}.red .triangle{border-bottom:14px solid #ef2f3c}.red .string{background:#ef2f3c;border:1px solid #ef2f3c}.blue{position:absolute;background:#276fbf;height:80px;width:80px;left:60%;top:5%}.blue .triangle{border-bottom:14px solid #276fbf}.blue .string{background:#276fbf;border:1px solid #276fbf}.balloon{border:1px solid #000;border-radius: 50% 50% 50% 50%/ 40% 40% 60% 60%;z-index:2}.eye{position:absolute;width:7px;height:7px;top:40%;left:22%;background:#000;border-radius:50%}.eye:after{content:'';left:35px;width:7px;height:7px;border-radius:50%;background:#000;position:absolute}.mouth{position:absolute;top:45%;left:43%;width:7px;height:7px;border-radius:50%}.happy{border:2px solid;border-color:transparent #000 #000 transparent;transform:rotate(45deg)}.triangle{position:absolute;left:40%;bottom:-10%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}.string{position:absolute;height:70px;width:1px;left:48%;top:100%;z-index:-1}.star{width:20px;height:20px;background:#f6f4f3;-webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.star-red{width:30px;height:30px;margin-left:51px;margin-top:-5px;background:#ef2f3c;-webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tet-event-left img {
width: 80%;
height: auto;
border-radius: 15px;
margin: 50px 30px 0;
}
.tet-event-left {
width: 30%;
float: left;
}
.tet-event-right {
float: right;
width: 65%;
}
.tetcontainer {
position: relative;
margin: auto;
overflow: hidden;
width: 650px;
height: 375px;
}
.tetcontainer h1 {
font-family: "Lato",sans-serif;
text-align: center;
margin-top: 2em;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 5px;
color: #f6f4f3;
}
.tet-event-wrapper {
display: grid;
background: #183059;
width: 100%;
border-radius: 10px;
margin-bottom: 30px;
padding: 0;
padding-bottom: 0;
background: radial-gradient(ellipse at bottom, #c30800 10%, #33201a 100%);
background-image: url(https://i.imgur.com/HGv2NLM.png);
background-size: cover;
background-position: center center;
}
.enjoyevent {
color: #ff7070;
text-align: center;
display: block;
padding: 10px 0;
letter-spacing: 0.4px;
text-shadow: 2px 2px 2px #990a00;
font-weight: 600;
}
</style></b:if></b:if>
Lưu ý: Các bạn có thể sửa lại ngày tháng năm, ảnh và nội dung text để phù hợp theo từng năm sử dụng nhé! Và một điều nữa là code này chưa tương thích trên mobile nên mình để thẻ điều kiện ẩn trên mobile.
Bạn nào muốn chèn trực tiếp vào Bố cục HTML/Javascript thì bỏ cặp thẻ này ra:
<b:if cond='data:view.isHomepage'>
<!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>
0 Response to "Share Code Đếm Ngược Đến Tết, Các Ngày Lễ Lớn"
Post a Comment