Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Blogger Tips
Tutorial

Hướng dẫn tạo nút tải xuống có đếm time cho blogger 2021

How to Create Download Button with timer for blogger 2021

Xin chào, chào mừng các bạn VOZTHEME hôm nay chúng ta sẽ tìm hiểu cách tạo Nút Tải xuống Với Bộ hẹn giờ .



Nút tải xuống có bộ hẹn giờ

Đối với những người không biết rằng nút tải xuống có bộ đếm thời gian là gì , đó là một nút HTML bình thường nhưng khi bạn nhấp vào nó, nó sẽ bắt đầu đếm ngược hoặc thời gian do bạn quyết định, sau khi bộ đếm ngược kết thúc, bạn có thể nhận được liên kết tải xuống của mình.
 {tocify} $ title = { Main content  }

Tại sao lại sử dụng nút Tải xuống với bộ hẹn giờ

Tôi thực sự khuyên bạn nên sử dụng nút tải xuống có bộ đếm thời gian , vì điều này sẽ giúp bạn tăng Thời gian tương tác trung bình và nếu bạn đang nghĩ rằng tại sao Thời gian tương tác trung bình lại quan trọng nếu trang web của bạn tăng Thời gian tương tác trung bình thì nó cũng sẽ giúp bạn để tăng thứ hạng của bạn trong công cụ tìm kiếm google.

Cách tạo Nút Tải xuống với Bộ hẹn giờ

Rất dễ dàng và đơn giản để tạo một nút tải xuống với bộ đếm thời gian , bạn chỉ cần làm theo hướng dẫn được đưa ra bên dưới ..
Vì vậy, chúng ta hãy bắt đầu.
  • Truy cập blogger.com
  • sau đó nhấp vào chủ đề
  • sau đó Chỉnh sửa HTML
  • Bây giờ Tìm]]> </ b: skin>
  • Sau đó, dán CSS này được cung cấp bên dưới ở trên]]> </ b: skin>

CSS


  .voztheme-download{background: #FFD62F; color:black; padding:8px; outline:none; border:0px; border-radius:5px; cursor:pointer;box-shadow:0 0 2px 2px #FFE000 ;}
  .vozthemedownload{background:#FFD62F; color:black; text-decoration:none; padding:8px; border-radius:5px; box-shadow:0 0 2px 2px #FFE000;}
  • Sau đó tìm thấy </body>
  • Sau đó, dán JavaScript này được cung cấp bên dưới Bên trên </body>

JavaScript


<script>
            function dosomethig(e){
                e.style.display = "none";
                var output = document.querySelector('#output');
                var i=15; //set the time
                setInterval(
                    function(){
                        output.innerHTML = "Please wait.. "+i;
                        i--;
                        if(i<=0){
                            output.style.display = "none";
                            var vozthemedownload = document.querySelector('#vozthemedownload');
                            vozthemedownload.style.display= "inline-flex";
                        }
                    },
                    1000
                )
            }
        </script>
  • Cuối cùng, Chuyển đến Bài đăng của bạn nơi bạn muốn thêm Nút Tải xuống Có Bộ hẹn giờ
  • Sau đó Dán mã HTML này vào bên dưới

HTML


<div style="text-align: center;">
        <button class="voztheme-download" onclick="dosomethig(this)">Click Here</button>
        <div id="output"></div>
        <a class="vozthemedownload" href="https://voztheme.blogspot.com" id="vozthemedownload" style="display: none;">Download Now</a>
</div>

Hy vọng bài viết này sẽ giúp bạn viết blog của mình tốt hơn.

Post a Comment