BONGSOKLA.COM: របៀបបង្កើតប៊ូតុង Download រាប់ថយក្រោយលើ Blogger | Countdown Timer Button

ការប្រើប្រាស់ប៊ូតុងទាញយកធម្មតា វាហាក់បីដូចជាសាមញ្ញពេកហើយ។ ដើម្បីឱ្យប្លុករបស់បងប្អូនមើលទៅកាន់តែមានលក្ខណៈអាជីព និងទាក់ទាញអ្នកប្រើប្រាស់ឱ្យនៅលើវែបសាយបានយូរ យើងគួរប្រើប្រាស់ Download Box ដែលមាននាឡិការាប់ថយក្រោយ (Countdown Timer)។

របៀបតម្លើង (How to Install)

1 បញ្ចូលកូដ JavaScript (JS)

សូមចម្លងកូដខាងក្រោមនេះ យកទៅដាក់នៅពីលើស្លាក </body> ក្នុង Template របស់បងប្អូន៖

JavaScript

<script type='text/javascript'>
function generate() {
    var e, n = document.getElementById("downloadx"),
        t = document.getElementById("btnx"),
        a = document.getElementById("downloadx").href,
        l = 15, // កំណត់វិនាទីនៅទីនេះ
        d = document.createElement("span");
    n.parentNode.replaceChild(d, n), e = setInterval(function() {
        --l < 0 ? (d.parentNode.replaceChild(n, d), clearInterval(e), window.location.replace(a), n.style.display = "inline") : (d.innerHTML = "<p style='color:#ffc832;'>Please wait " + l.toString() + " seconds...</p>", t.style.display = "none")
    }, 1e3)
}
</script>

2 បន្ថែម CSS សម្រាប់រចនាប្រអប់

សូមចម្លងកូដ CSS នេះយកទៅដាក់ក្នុងផ្នែក <style> ឬពីលើ </b:skin>៖

CSS Styles

#btnx { cursor:pointer; padding:10px 20px; border:0; border-radius:5px; background:#007fff; color:#fff; font-weight:bold; }
.download_now { display:block; margin:20px auto; border-radius:8px; overflow:hidden; }
.download-now { background:#111; color:#ccc; padding:20px; }
.download-title { color:#fff; font-size:1.2em; }
.file-info { padding:15px; background:#eee; color:#222; font-size:14px; }
#downloadx { padding:10px 20px; border-radius:5px; background:#ffc832; text-decoration:none; color:#222; font-weight:bold; }

3 របៀបប្រើប្រាស់ក្នុងអត្ថបទ

នៅពេលសរសេរអត្ថបទ សូមប្តូរទៅកាន់ HTML View រួចដាក់កូដខាងក្រោមនេះ (កុំភ្លេចប្តូរ Link ក្នុង href)៖

HTML View

<div class="download_now"> 
  <div class="download-now"> 
    <div style="display:flex; justify-content:space-between; align-items:center;"> 
      <div class="download-title">Download File</div> 
      <button onclick="generate()" id="btnx">Download</button> 
      <a id="downloadx" href="ដាក់តំណភ្ជាប់នៅទីនេះ" style="display:none">Get Link</a> 
    </div> 
  </div> 
  <div class="file-info">រៀបចំដោយ៖ Bongsokla</div>
</div>

ចំណាំ៖ បងប្អូនអាចប្តូរលេខ l = 15 ទៅជាចំនួនវិនាទីដែលបងប្អូនចង់ឱ្យអ្នកអានរង់ចាំ។

---

សង្ឃឹមថាការចែករំលែកនេះនឹងមានប្រយោជន៍សម្រាប់បងប្អូនទាំងអស់គ្នា! បើមានចម្ងល់អាចសួរក្នុង Comment បានណា។