Lợi ích khi sử dụng nút đếm ngược hiển thị Link url Download
Sử dụng shortcode đếm ngược thời gian hiển thị link “Download File” mang lại một số lợi ích:
- Cải thiện trải nghiệm người dùng: Google đặt sự chú trọng vào trải nghiệm người dùng. Khi bạn tạo một trang web với các chức năng tương tác như đếm ngược thời gian tải File, người dùng sex ở lại trang web lâu hơn và tương tác nhiều hơn. Giúp tốc độ thoát thấp hơn và thời gian duyệt trang lâu hơn, việc này có thể tích cực ảnh hưởng đến xếp hạng của website trên kết quả tìm kiếm Google.
- Tăng tỷ lệ chuyển đổi: Nếu bạn cung cấp nội dung hấp dẫn và chất lượng qua các chức năng tương tác, khả năng người dùng thực hiện hành động mong muốn (chẳng hạn như tải tệp) sẽ tăng. Tỷ lệ chuyển đổi cao hơn có thể được coi là một tín hiệu tích cực về trải nghiệm người dùng, và Google có thể xem xét điều này khi xác định xếp hạng trang web của bạn.
- Tạo sự khác biệt và tương tác: Google ưu tiên các website có nội dung khác biệt và độc đáo. Các chức năng tương tác như đếm ngược thời gian “Download File” sẽ làm website bạn nổi bật và khác biệt so với các trang web cùng ngành khác.
- Tối ưu hóa tốc độ trang: Mã JavaScript trong đoạn code được tối ưu hóa để đảm bảo website hoạt động nhanh chóng. Tối ưu hóa tốc độ website là một yếu tố quan trọng trong SEO, vì Google ưa thích các trang web tải nhanh và cung cấp trải nghiệm tốt cho người dùng.
Xem thêm: Tạo nút đếm ngược hiển thị mã sau 30 giây trong Wordpress
Cách tạo shortcode đếm ngược hiển thị liên kết download tài liệu Wordpress
Bạn truy cập Giao diện > Theme file editor > functions.php sau đó sao chép và dán đoạn code được chia sẻ bên dưới vào và lưu.
function khaiminh_getfile_shortcode($atts)
{
$atts = shortcode_atts(
array(
'url' => '',), $atts,
'khaiminh_getfile');
$url = esc_url($atts['url']);
ob_start(); ?>
<div id="countdown" style="display:none;"></div>
<button id="download-btn">Download</button>
<script>
var remainingTime = 60; // Thời gian đếm ngược là 60s
var downloadBtn = document.getElementById("download-btn");
var countdownDiv = document.getElementById("countdown");
var countdown; // biến lưu trữ thời gian đếm ngược
// hàm bắt đầu đếm ngược
function startCountdown() {
downloadBtn.style.display = "none"; // Ẩn nút Download Now
countdownDiv.style.display = "block"; // Hiển thị thời gian đếm ngược
countdown = setInterval(function() {
if (!document.hidden) { // nếu tab đang active thì mới đếm ngược
remainingTime--;
countdownDiv.textContent = "Bạn sẽ được tải file sau " + remainingTime + " giây";
if (remainingTime == 0) {
clearInterval(countdown);
window.location.href = "<?php echo $url; ?>";
}
}
}, 1000);
}
// bắt sự kiện khi người dùng click vào nút Download Now
downloadBtn.addEventListener("click", function() {
startCountdown();
});
</script>
<style>
#download-btn {
position: relative;
background-color: rgb(230, 34, 77);
border-radius: 5px;
box-shadow: rgb(121, 18, 55) 0px 4px 0px 0px;
background-repeat: no-repeat;
box-sizing: border-box;
width: 168px;
height: 49px;
color: #fff;
border: none;
font-size: 16px;
transition: all .3s ease-in-out;
z-index: 1;
overflow: hidden;
margin-bottom: 39px; }
#download-btn::before {
content: "";
background-color: rgb(248, 50, 93);
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 700ms ease-in-out;
display: inline-block; }
#download-btn:hover::before {
width: 100%; }
#countdown {
display: none;
font-size: 18px;
font-weight: bold;
color: rgb(230, 34, 77);
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
padding: 10px;
border-radius: 5px;}
</style>
<?php
return ob_get_clean(); }
add_shortcode('khaiminh_getfile', 'khaiminh_getfile_shortcode');
Hướng dẫn sử dụng
Đoạn code trên sẽ tạo ra 1 button Download, khi người dùng nhấn vào nút Download thì sẽ được bắt sự kiện đếm ngược 60 giây. Trong thời gian đang đếm ngược, nếu người dùng chuyển sang tab khác của trình duyệt thì thời gian sẽ bị đóng băng lại cho đến khi người dùng quay trở lại tab thì thời gian mới được tiếp tục đếm ngược. Và đường link download file của bạn cũng được mã hoá dưới dạng base64 giúp được bảo mật hơn.
Ngoài ra mặc định thời gian đếm ngược tải file sẽ là 60 giây, nếu bạn muốn thay đổi chỉ cần thay đổi số 60 ở đoạn <script> như ảnh bên dưới thành con số thời gian mà bạn muốn.
Vậy sử dụng như thế nào? Bạn chỉ cần copy đoạn shortcode dưới vào bài viết của bạn và thay đổi đường link download file là được.
[khaiminh_getfile url="https://thuthuatwiki.com/"]
UPDATE: Tạo nút đếm ngược và hiển thị URL trực tiếp sau khi đếm ngược kết thúc trong WordPress
Sau khi đếm ngược về 0 thì sẽ hiển thị trực tiếp url thay vì nút button như cách 1 bên trên
function khaiminh_getfile_shortcode($atts)
{
$atts = shortcode_atts(
array(
'url' => '',
), $atts, 'khaiminh_getfile');
$url = esc_url($atts['url']);
ob_start(); ?>
<div id="countdown" style="display: none;"></div>
<div id="download-link" style="display: none;"></div>
<button id="download-btn">Download</button>
<script>
var remainingTime = 60; // Thời gian đếm ngược là 60 giây
var downloadBtn = document.getElementById("download-btn");
var downloadLinkDiv = document.getElementById("download-link");
var countdownDiv = document.getElementById("countdown");
var countdown; // Biến lưu trữ thời gian đếm ngược
// Hàm bắt đầu đếm ngược
function startCountdown() {
downloadBtn.style.display = "none"; // Ẩn nút Download Now
countdownDiv.style.display = "block"; // Hiển thị thời gian đếm ngược
countdown = setInterval(function() {
if (remainingTime === 0) {
clearInterval(countdown);
downloadLinkDiv.innerHTML = '<a href="<?php echo $url; ?>"><?php echo $url; ?></a>'; // Hiển thị liên kết tải tài liệu
downloadLinkDiv.style.display = "block"; // Hiển thị liên kết
countdownDiv.style.display = "none"; // Ẩn thời gian đếm ngược
} else {
countdownDiv.textContent = "Bạn sẽ được tải file sau " + remainingTime + " giây";
remainingTime--;
}
}, 1000);
}
// Bắt sự kiện khi người dùng click vào nút Download Now
downloadBtn.addEventListener("click", function() {
startCountdown();
});
</script>
<style>
#download-btn {
position: relative;
background-color: rgb(230, 34, 77);
border-radius: 5px;
box-shadow: rgb(121, 18, 55) 0px 4px 0px 0px;
background-repeat: no-repeat;
box-sizing: border-box;
width: 168px;
height: 49px;
color: #fff;
border: none;
font-size: 16px;
transition: all .3s ease-in-out;
z-index: 1;
overflow: hidden;
margin-bottom: 39px;
}
#download-btn::before {
content: "";
background-color: rgb(248, 50, 93);
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 700ms ease-in-out;
display: inline-block;
}
#download-btn:hover::before {
width: 100%;
}
#countdown {
display: none;
font-size: 18px;
font-weight: bold;
color: rgb(230, 34, 77);
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
padding: 10px;
border-radius: 5px;
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('khaiminh_getfile', 'khaiminh_getfile_shortcode');
Cách sử dụng vẫn là
[khaiminh_getfile url="https://thuthuatwiki.com/"]
Chúc bạn thành công. Nếu có thắc mắc hay góp ý nào, bạn hãy bình luận ngay bên dưới.
Nếu mình muốn hiển thị link download thay vì redirect sang link download như hiện tại thì được không bạn?
được bạn nha
đã update, đọc trên bài nha
Cảm ơn bác admin tốt bụng.
Em muốn dùng cả 2 đoạn code trên trong function để hiển thị 2 mã đếm ngược khác nhau:
Lần đếm ngược 1: Đếm để hiển thị link đến bài 2.
Lần đếm ngược 2: Đếm trong bài 2 để hiển thị link đến quà tặng.
Vì 2 lần đếm có 2 Call To Action khác nhau nên em muốn để 2 đoạn code vậy có được không ạ?
Nếu muốn vậy thì bạn nên tạo 1 trang chuyển hướng làm template. khi nhấn vô link thì nó sẽ chuyển qua template chuyển hướng đó r nó đếm ngược (bao nhiêu giây thì bạn tự đặt) sau khi đếm về 0 thì nó sẽ đến trang bạn muốn, trong trang đích đó bạn xài code của mình để hiển thị link hoặc mã gì đó.
Cảm ơn ad đã tư vấn
bạn ơi, tôi có dùng 2 link download trong bài, khi click link 1 thì nó hiện đếm ngược, nhưng link 2 thì click vào nó ko thay đổi gì ko hiển thị đếm ngược hay hiển thị link. Không biết có phải do xung đột 2 link trong bài ko
bạn chỉ nên sử dụng 1 trong 2 thôi nha
cảm ơn bạn nhiều đúng cái mình đang cần
nhưng khi mình đặt 2 nút download trong 1 page thì chỉ có 1 cái có tác dụng à
bị lặp lại js đó
Bạn ơi, khi hết time, link nó hiện ra mà mình muốn click vô link nó sang tab mới chứ không chuyển tab hiện tại thì làm sao bạn