Thứ Năm, 15 tháng 2, 2018

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 == &quot;index&quot;'>
<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: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage:after{content:&#39;&#39;;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:&quot;Roboto Condensed&quot;,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 &#39;Josefin Sans&#39;,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(&quot;&#39;02/14/2018 23:59:59 GMT+0700 (SE Asia Standard Time)&quot;); ----
        let endTime = new Date(&quot;&#39;02/15/2018 23:59:59 GMT+0700 (SE Asia Standard Time)&quot;);
        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 &amp;&amp; Phút === 0 &amp;&amp; Giây === 0) {
          clearTimeout(timeout);
        } else {
          if (Giờ &lt; &quot;10&quot;) {
            Giờ = &quot;0&quot; + Giờ;
          }
          if (Phút &lt; &quot;10&quot;) {
            Phút = &quot;0&quot; + Phút;
          }
          if (Giây &lt; &quot;10&quot;) {
            Giây = &quot;0&quot; + Giây;
          }


          $(&quot;#Ngày&quot;).html(Ngày + &quot;<span>Ngày</span>&quot;);
          $(&quot;#Giờ&quot;).html(Giờ + &quot;<span>Giờ</span>&quot;);
          $(&quot;#Phút&quot;).html(Phút + &quot;<span>Phút</span>&quot;);
          $(&quot;#Giây&quot;).html(Giây + &quot;<span>Giây</span>&quot;);


          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

Nhận Thiết Kế

fb.com/HongHai.H.T.H
instagram.com/honghai.des
01682253xxx
honghai251325@gmail.com

Facebook Comments

3 nhận xét :

  1. Đẹp mà vẫn thích cái intro đang dùng cơ :)
    Happy New Year

    Trả lờiXóa
  2. Ghi nguồn cũng phải ghi đàng hoàng chứ, BSW - ghi vậy ai mà biết là ai

    Trả lờiXóa
  3. 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

    Trả lờiXóa