-->
Home

Share widget đếm ngược tết 2021 cho Blogger

Hieu Ho
Hieu Ho 6 comments
Chỉ còn một tháng nữa thôi, chúng ta sẽ cùng đón tết nguyên đán 2021, vậy để decor cho giao diện Blogger các bạn thật nổi bật và cùng đón tết, hôm nay mình sẽ chia sẻ các bạn widget đếm ngược tết 2021 cho Blogger.


Có nhiều widget hay để decor cho ngày tết, cụ thể mình list dưới:

Widget đếm ngược tết 2021 cho Blogger

Đây là demo widget, các bạn có thể xem demo qua hình bên dưới:

Để thêm widget sau vào Blogger các bạn có thể vào Bố cục, và Thêm tiện ích với code sau:


<div class='tet-event-wrapper'>
<div class='container'>
<div class='tet-event-left'>
<img src='https://i.ibb.co/64FbRpk/4675754.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>
<div class="face">
<div class="eye"></div>
<div class="mouth happy"></div>
</div>
<div class="triangle"></div>
<div class="string"></div>
</div>
<div class="balloon red">
<div class="star"></div>
<div class="face">
<div class="eye"></div>
<div class="mouth happy"></div>
</div>
<div class="triangle"></div>
<div class="string"></div>
</div>
<div class="balloon blue">
<div class="star"></div>
<div class="face">
<div class="eye"></div>
<div class="mouth happy"></div>
</div>
<div class="triangle"></div>
<div class="string"></div>
</div>
<div id="timer"></div>
<h1>Countdown to Tết Holiday 2021</h1>
</div>
</div>
</div>
</div>
<script id="rendered-js">const year=new Date().getFullYear();const tetHoliday=new Date("February 12, 2021 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: 100%;
    height: auto;
    border-radius: 15px;
}
.tet-event-left {
    width: 25%;
    float: left;
}

.tet-event-right {
    float: left;
    width: 75%;
}
.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-top: 22px;
    padding: 30px;
    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: 20px 0;
    letter-spacing: 0.4px;
    text-shadow: 2px 2px 2px #990a00;
    font-weight: 600;
}
</style>

Nếu các bạn không thêm code vào Bố cục, mà thêm trực tiếp và template thì các bạn nên thêm thẻ điều kiện vào code trên như sau:

<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>

Lời kết

Các bạn có thể trang trí thêm các code như câu đối, pháo hoa,... và widget này còn 29 ngày kể từ lúc đăng tải nên hãy nhanh tay các bạn nhé.

Mong bài viết hữu ích với bạn, chúc các bạn thành công!
By Hiếu Quốc

Có lẽ bạn thích?

6 comments

Post a Comment