Hello xin chào tất cả các bạn, chẳng là sắp đến giao thừa nên mình xin chia sẽ code TẠO INTRO CHÚC MỪNG NĂM MỚI & ĐẾM NGƯỢC ĐẾN GIAO THỪA TUYỆT ĐẸP .....
CÁCH THỰC HIỆN
Bước 1: Chèn đoạn mã dưới đây vào trước thẻ <body> hoặc <body .
<b:if cond='data:blog.pageType == "index"'>
<style>
#intro_homepage{position:relative;display:table;width:100%; height: 670px;margin:0!important;padding:0!important;z-index:999;background:url(https://4.bp.blogspot.com/-pIjxBRuGU34/WkVXe1-PR3I/AAAAAAAACJw/nGqsu5RAVqA9YKi_ah6WueigPptUDerkQCLcBGAs/s1600/HinhNen2k-4k06.jpg) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 25px; font-weight: 500; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;margin-left:-12px;border-left:1px solid #FFF;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb05 2s infinite;animation:sdb05 2s infinite;box-sizing:border-box}
#intro_buttondown a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg:0;font-weight:300;position:absolute;bottom:20px;right:30px;z-index:9999}
.xem-hd a{color:rgba(255,255,255,.5);animation:slideToLeft 2s}
.xem-hd a:hover{color:#fff}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>Chúc Mừng Năm Mới 2018<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Đếm Ngược Đến Giao Thừa</p>
<style>acv{display:inline-block;line-height:1;padding:0px 40px 0px 0;font-size:40px}span{font-size:20px}#Ngày,#Giờ,#Phút{font-size:100px}#Ngày{color:#db4844}#Giờ{color:#f07c22}#Phút{color:#f6da74}#Giây{font-size:50px;color:#abcd58}#timer{text-align: center;padding-top:0}
</style>
<div id='timer'>
<acv id='Ngày'/>
<acv id='Giờ'/>
<acv id='Phút'/>
<acv id='Giây'/>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<script>
let timeout = null;
function makeTimer() {
// Edit Here
//---- let endTime = new Date("'02/14/2018 23:59:59 GMT+0700 (SE Asia Standard Time)"); ----
let endTime = new Date("'02/15/2018 23:59:59 GMT+0700 (SE Asia Standard Time)");
endTime = (Date.parse(endTime) / 1000);
let now = new Date();
now = (Date.parse(now) / 1000);
let timeLeft = endTime - now,
Ngày = Math.floor(timeLeft / 86400),
Giờ = Math.floor((timeLeft - (Ngày * 86400)) / 3600),
Phút = Math.floor((timeLeft - (Ngày * 86400) - (Giờ * 3600)) / 60),
Giây = Math.floor((timeLeft - (Ngày * 86400) - (Giờ * 3600) - (Phút * 60)));
if (Giờ === 0 && Phút === 0 && Giây === 0) {
clearTimeout(timeout);
} else {
if (Giờ < "10") {
Giờ = "0" + Giờ;
}
if (Phút < "10") {
Phút = "0" + Phút;
}
if (Giây < "10") {
Giây = "0" + Giây;
}
$("#Ngày").html(Ngày + "<span>Ngày</span>");
$("#Giờ").html(Giờ + "<span>Giờ</span>");
$("#Phút").html(Phút + "<span>Phút</span>");
$("#Giây").html(Giây + "<span>Giây</span>");
timeout = setTimeout(makeTimer, 1000);
}
}
makeTimer();
</script>
</div>
</div></div>
<div class='xem-hd'>
<a href='/' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/></a>
</div>
<section class='intro_buttondown' id='intro_buttondown'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
</b:if>
Lưu Chủ Đề và thưởng thức thôi!
Đoạn màu xanh là thẻ điều kiện hiển thị ở trang chủ, bạn có thể xóa nó nếu muốn hiển thị ở các trang.
Đoạn màu đỏ là link ảnh ,bạn có thể thay ảnh khác nếu không thích ảnh đó.
Chúc Các Bạn Năm Mới Vui Vẻ ^^.
Code:BacSiWindows
Edit: Hồng Hải
Tags:
Thủ Thuật Blogspot
Đẹp mà vẫn thích cái intro đang dùng cơ :)
Happy New Year
Ghi nguồn cũng phải ghi đàng hoàng chứ, BSW - ghi vậy ai mà biết là ai
Giờ cũng đã 1h30 rồi. Đã qua một năm mới. Chúc Hải babe có 1 năm mới vui vẻ - an khang thịnh vượng nhé <3