Share code tạo Widget đếm ngược Xuân Tân Sửu 2021 cho Blogspot

Share code tạo Widget đếm ngược Xuân Tân Sửu 2021

Xin chào các bạn, tết đến nơi rồi, mọi người bắt đầu trang trí website của mình cho đẹp nhất. Hôm nay mình xin phép hướng dẫn anh em cách tạo widget đếm ngược tết 2021 cho Blogspot


tao widget dem nguoc tet 2021 cho blogspot

Tạo Widget Đếm Ngược Tết Cho Blogspot

Bước 1: Các bạn vào Blogger.

Bước 2: Chọn Bố Cục -> Thêm Tiện Ích -> Html/JavaScrip.

Tiếp đó các bạn chèn code sau vào:

<div class='tet-event-wrapper'>
<div class='container'>


<div id="timer"></div>
<div class='xuantansuu'><strong>Xuân Tân Sửu</strong></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:8px;letter-spacing:5px;margin-top:25%}.days,.hours,.minutes,.seconds{display:inline-block;padding:20px;width:80px;border-radius:5px}.days{background:#ef2f3c;border:2px solid black}.hours{background:#f6f4f3;color:#183059;border:2px solid blue}.minutes{background:#276fbf;border:2px solid white}.seconds{background:#f0a202;border:2px solid green}.numbers{font-family:"Montserrat",sans-serif;color:#183059;font-size:20px}.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://1.bp.blogspot.com/-sv9L7UqCuDc/YBKSAaDg9QI/AAAAAAAAAMs/_D-TXqMvFV4IlDGRJrAk23egWCTIXsk5wCLcBGAsYHQ/s700/tong-hop-30-mau-hinh-nen-tet-cho-may-tinh-duoc-ua-thich-nhat-nam-nay-30_1605840035.jpg);
    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;
}
 .xuantansuu {
      color:white;
      text-align:center;
      font-size:20px;
      font-family:"Lato",sans-serif;
       }
</style>

Bước 3: Lưu lại và xem kết quả.



Lời Kết

Bên trên là Code mình mod lại của quochieu.com(Hiếu Dev) cho phù hợp với 1 số website. Nếu có bất cứ thắc mắc nào hãy Comment xuống dưới để được hỗ trợ.