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 này để sử dụng hoặc lưu lại cho năm sau dùng cũng ok.
Đây là code đếm ngược tết được share bởi Admin Hieu hay còn được gọi là Hieu Ho, nay mình lấy share lại để nhiều anh em được biết hơn.
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 2022</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>
Lời kết
Ngoài Code to Countdown New Year này ra các bạn có thể xem nhiều cách trang trí cho Blogger khác tại bài viết: Một số code blogspot đẹp trang trí tết 2022.
Một lần nữa xin cảm ơn Hieu Ho đã làm đoạn code rất đẹp này. Các bạn có thể ghé sang blog Hieu.Tech để ủng hộ Hiếu nha!
Post a Comment
Post a Comment